New Node and Edge UI Components

[benloh]

Overview

This is a complete rewrite of NodeSelector.jsx and EdgeEditor.jsx.

Main Changes

• Node and Edge properties can now be arbitrarily defined -- Templates can define custom fields, and all custom fields are automatically inputted and displayed.
• The UI is now simpler and more compact.
• Edit and View modes for both Nodes and Edges are better differentiated (in Edit mode, input fields have borders, colors are less transparent)
• Data update cycles have been greatly simplified. Most updates are triggered by either SELECTION updates or PERMISSIONS updates (tied to locking due to node edit, template edit, or import).
• ReactStrap has been removed -- all components are now simple HTML components
• Permissions management has been centralized: various local and network state updates will set flags, updatePermissions will then interpret all of those flags in one go and either disable or hide the Edit button.

In general, any new components named NC*.jsx are Version 2.x components.

Specific Changes

Node and Edge Edit Fields

• Text input fields are now <textarea> by default. They default to single line fields, but will expand as you add more text.

Search Bar

• NCSearch.jsx replaces Search.jsx
• The new NCSearch ui replaces the search input, using the new NCAutoSuggest component to highlight matching nodes and create new nodes.
• NEW FEATURE: You can now quickly create new nodes by typing in a new node name and hitting Enter. (We may want to revisit this in case it's too easy to create too many duplicate nodes)
• The "New Node" button will only be enabled if a search term has been entered. The "New Node" button is unreachable during Node Edit (because of a transparent screen), so need to disable/hide.

Node Data

• Node data is now split into built in parameters (id, label, provenance) and arbitrarily defined custom attributes.
• It is now possible define any number of attribute parameters in the template. The UI will automatically display and support input for these parameters.
• Three types of attributes are currently available: string, number, and select (options). We can add boolean if necessary.

Node UI

• NCNode.jsx replaces NodeSelector.jsx
• The Node UI is now split into three tabs: attributes, edges. and provenance.
• Node locking due to someone else on the network editing the selected node, template editing, or importing is now flagged in real time. The "Edit" button will be disabled or hidden according to the locking state. (Previously updates to the state were sporadic, e.g. you didn't know you edit was disabled until you clicked on "Edit").
• The node viewer/editor background now uses the color of the node type. (This will need to be revisited once we get the new color scheme and color designation system in).
• Edit mode and View mode are now better differentiated -- View mode just displays simple static text. In Edit mode form input elements are displayed, the background color is darkened and a stroke is added.
• Edit mode now behaves like a modal -- In Edit mode, the rest of the window is grayed out and clicks are intercepted. (The exception is that you can still zoom the map with the zoom buttons, though not pan the map).
• During Edit Mode, selections and other data edits are ignored, neither can you navigate to another node tab (e.g. Edges or Provenance).
• You can initiate a node edit from the Node Table (replicated existing functionality)
• As you type in a new node label, the system displays a list of currently matching nodes. (replicate existing functionality without using AutoSuggest system)
• Warn user of duplicate label name (replicate existing functionality) -- The warning message will need to be updated since you can no longer use the the AutoSuggest list to select and view the node.
• Hitting Cancel while editing a node will restore the previous node values.
• "Degrees" are a built-in field, but are displayed as an attribute.
  * Provenance will have its own Edit mode tbd.
• Rudimentary Provenance is implemented as a simple text field.

Graph

• Added a white stroke around nodes to offset them from edges. This makes the whole graph feel more elegant.
• Added a stroke linecap for edges. Large edges now "wrap" around nodes. Again, a more elegant look.
• Minimized the amount of animation updates when clicking on a node -- previously any click would result in the graph reapplying forces and moving around. This squelches that setting so there is minimal movement. The graph feels much more solid now. It's worth checking if this affects layout on more complex graphs.

Edge UI

• NCEdge.jsx replaces EdgeEditor.jsx.
• Edges are now displayed embedded in the NCNode view tabs -- edges should be more easily accessed without having to scroll far down the screen.
• Only one edge can be viewed at a time (we might want to revisit that to make sure we actually want that).
• Only one edge can be edited at a time, avoiding multiple edges stuck in edit mode.
• Source and Target nodes are now colored, matching their source/target node colors.
• Selecting edge type will color the edge. (This will need to be revisited once we get the new color scheme and color designation system in).
• Edges also use Attribute and Provenance tabs to make information more compact, matching Nodes.
• Edge Edit mode locks out node editing but graph selections are still allowed for selecting source/targets.
• Clicking on a source/target allows you to change the source/target.
• To select a new source/target, you have the option of clicking on a node in the graph, start to type in a new node name and use arrows and Enter to select an autosuggest name, type in the full name of an existing node, or type in a new node.
• Entering a new node (that doesn't match an existing node) and hitting Enter will show a dialog offering to create a new node. Clicking "Create 'xxx' node" will create a new node. The new node will be immediately displayed. As soon as you click "Save", the node will be linked. Clicking "Back to Edge Edit" will not create the node and allow you to continue to editing.
• Clicking "Swap" will swap source and target node direction (replicating existing functionality)

DEPRECATED

The following components have been deprecated.

• NodeSelector.jsx
• EdgeEditor.jsx
• AutoComplete.jsx

Pending

These still need to be fixed, but will be added to a new merge request:

• Provenance needs to be completely revamped
• It's possible to start creating an edge, but then abandon the edge edit, resulting in an edge with a missing source/target
• Warn or handle duplicate node labels
• NodeTables and EdgeTables are still using hard-coded parameters. The custom template parameters for NodeTable and EdgeTable have not been implemented yet.
• server-database.m_ValidateTemplate is relying on built-in template parameters for validation -- should validation only be done on built-in core parameters?

To Test

There's a lot to test, but here are some highlights:

• Create a new node
• Create a new edge
• Edit an existing node -- make sure changes are saved
• Edit an existing edge -- make sure changes are saved

Gotchas

• AutoSuggest -- The search field and the source/target node selection all use the NCAutoSuggest component to allow you to select a node via multiple methods (clicking, partial autosuggest, full name match, clicking on graph). There might be unexpected interactions. You'll want to carefully test all of the possible paths and states.

• Edge Editing Selection Arrow -- The source/target secondary selection animated arrow is touchy because there are many ways that selection can happen: Edit an edge, click the source or target to enable setting a new source/target. Make sure the single animated arrow shows the targetted source/target using all three methods: clicking on graph, type full name, autosuggest, new node. Make sure the single animated arrow is deselected after saving or canceling the edit.

[benloh]

• Login required is fixed. Though there is a long standing bug where removing the token and leaving the #/edit URL will not properly logout.
• "Edit" mode is now automatically enabled when creating a new node. The downside of this approach is that you can't just hit Enter to add a node and quickly add a second one -- you have to click "Save" first. Also it becomes easy to inadvertently create a second node. But we'll have to refine that over time.

[jdanish]

Awesome, thanks. We'll definitely want to continue refining. In most implementations the bigger issue has been kids not assigning a type to a node, so slowing them down isn't necessarily a bad thing, though definitely something we'll want to keep thinking through. Thanks!

[benloh]

Cool. Yeah there's a lot of little tweaks we've already done that make the user flow feel more fluid, but there are many more.

OK, I'm considering this feature-locked for now pending any urgent bugs. Please log any outstanding issues in a new ticket(s).

[jdanish]

By the way - in case it matters, for the TBD items you listed above, the key one we'd need in September for testing ideas with teachers would be:

NodeTables and EdgeTables are still using hard-coded parameters. The custom template parameters for NodeTable and EdgeTable have not been implemented yet.

[jdanish]

This looks pretty good. I added a number of issues for revision 2 of things that don't work quite as expected or were removed from prior functionality such as the delete button. But this appears stable to continue playing with and keep those out as separate for clarity.