Feature create mesh view

[darinh]

@kevinmershon please review -- Blocked -- I branched off of feature-create-measurement-history-view, so that one needs to be reviewed and merged before you'll get an accurate diff for this one.

[kevinmershon]

@darinh For this screen I really don't think it's a good idea to have Transmitter 1, 2, 3, listed below because Gateways can have up to 200 transmitters.

In the long run, I'd prefer to have a pinch-zoom functionality on the D3 graph, and a search-by-name box that will let the user pick the node and show it in the mesh, with text labels under it and its neighbors for the transmitter name and MAC address. For the ISA show, though, I'd just be happy with pinch-to-zoom and text labels for all nodes.

[darinh]

@kevinmershon thanks for the feedback. One issue I ran into with testing was that swiping right and panning right both revealed the menu, which could be problematic if there will be zooming and panning. Here are two options that could solve this problem:

• We could change the menu from swipe-to-reveal style to hamburger.
• I could also look into handling the swipe event in the graph and then prevent bubbling up to ionic via preventDefault().

Requirements:

• pinch-to-zoom should zoom in/out on the force graph.
• a user should be able search for a node in the graph
  • Textbox with autocomplete?
  • Select/Dropdown list?
• After a node is chosen, it should be "highlighted" in the graph, along with its neighbors, and they should all have text labels displaying the name of each transmitter.
• Do you also want me to list the selected node and its neighbors in a table below so a user can navigate to them by clicking a row or can we just ditch the table completely? It might be an easier for a user to tap a row rather than a node in the graph if the nodes are too close. I also haven't looked into navigating from tapping a node in the graph. It shouldn't be too difficult though, since it's all SVG.

[kevinmershon]

Yeah, let's just go with a hamburger menu to fix the swiping issue. It's easy and standard.

[kevinmershon]

@darinh This is definitely closer to what I had in mind. Instead of worrying about pinch-to-zoom, could we superimpose +/- buttons, and use gestures for panning?

[darinh]

This is complete apart from the zooming / panning. Scroll was disabled, which makes dragging the nodes easier. Selecting a node from the dropdown list will highlight it in the graph and display detail.

@kevinmershon please review this again when you have a chance.

[kevinmershon]

Looks great.