New topology editor

[grdw]

Initial graphic topology editor.

• [x] JSLinting

---

Closes: #1412 Closes: #1433 Closes: #1432 Closes: #1434

[grdw]

When adding a new node to an existing topology, the "Name" field remains disabled. Naturally the validation fails since I can't enter a name for the node.

Hmmm. yes this was to prevent people from renaming existing nodes. Ofcourse this fix is a little patchy. I'll re-enable the field and figure out something better.

If I add a node and then change my mind, there's no way to remove the node except to refresh the browser and start over.

You can hit the delete key 👍

---

I managed to fix most of these points. Some of them are still open though like the dragging and

it should not be possible to add child nodes to an endpoint which already has technologies attached.

[antw]

I managed to fix most of these points.

I've got more. Sorry. :cry:

• The topology preview on the "Import" page is missing node(s) sometimes. This is topology ID:529 ("Lochem Weidemolen MSR Thom") from the production server:

  Production	new-topology-editor

• You can hit the delete key 👍

  Thanks. IMO when you can add a node with a button it's not obvious or intuitive that pressing the delete key is how to remove one. A - button would be more consistent. Interested in hearing what others think about this...

• When editing a topology, it seems I can only delete nodes which existed when the page loaded. If I add a new node, the delete key doesn't do anything.

• I created a new LES using the default topology, chose to edit the LES and selected the topology tab. Clicking a node and tapping "Delete" locked up the whole tab. 😕 (Chrome 53.0.2785.143 and Firefox 48.0.2). It happens consistently when I try to delete the highlighted nodes:

  

  I can delete the parent "HV-MV Trafo" node just fine though. This also seems to happen (sometimes) when editing one of the attributes for these nodes.

• You still have to click precisely on the green bars of the + to add a node. Is this a limitation of SVG? Perhaps another (larger) element can be placed behind the button to increase the clickable area?

  For example, this small ETModel button has a larger clickable area than is visible to the user:

  

• The + button looks kind of fat now. I guess this was because it's not possible to keep the stroke width at 3px while keeping the button vertically centered with the node?

  Perhaps is makes sense for the button to be off-center, to more clearly show that the button adds a child instead of a sibling?

  

  Another alternative (although more complex) would be for a clicked node to transform into "Add" and "Remove" buttons:

   _|_            ___|___
  (   )    ->    ( - | + )
   ‾|‾            ‾‾‾|‾‾‾

[ChaelKruip]

Another alternative (although more complex) would be for a clicked node to transform into "Add" and "Remove" buttons:

I like that!

[grdw]

• [x] "The topology preview on the "Import" page is missing node(s) sometimes."
• [x] "When editing a topology, it seems I can only delete nodes which existed when the page loaded"
• [x] "I created a new LES using the default topology, chose to edit the LES and selected the topology tab. Clicking a node and tapping "Delete" locked up the whole tab."
• [x] "You still have to click precisely on the green bars of the + to add a node"
• [x] "Perhaps is makes sense for the button to be off-center, to more clearly show that the button adds a child instead of a sibling?"

---

Another alternative (although more complex) would be for a clicked node to transform into "Add" and "Remove" buttons:

This is going to be rather ugly (sorry for the honesty here). I'd rather see some sort of pop-up instead when clicking the node, which presents a tiny little interface where you can choose between "add" or "remove". Especially in light of the advanced features which one day might be implemented.

[grdw]

@antw I think this is good to go now 👍 I manage to fix the dragging node problem so I hope all is fine.

[antw]

so I hope all is fine.

Great job @grdw, it's looking a whole lot better now. :+1:

Everything looks good with two exceptions. On the LES topology page (testing_grounds/:id/edit):

• "Save a;; and view LES" button doesn't seem to save the changes.
• There appears to be no "add child" / "delete node" popup on the LES topology page; was that intentional?

[grdw]

Save a;; and view LES" button doesn't seem to save the changes.

I shall take a look.

There appears to be no "add child" / "delete node" popup on the LES topology page; was that intentional?

Yes. It's a bit weird to add a node or remove a node when you're in the LES topology page (you already chose a topology to begin with). Also you can't add an endpoint for that will result in a validation error.

When we're finally going towards #1488 than it would maybe be less of a problem to re-enable the interface for "Adding and removing a node" since every topology is a duplicate anyway and the testing_ground -> technology_profile and topology -> graph columns might be merged into one column.

[antw]

Yes. It's a bit weird to add a node or remove a node when you're in the LES topology page (you already chose a topology to begin with). Also you can't add an endpoint for that will result in a validation error.

I'm not so sure about that. It's an error to delete an endpoint (which might have technologies attached), but adding new ones should be okay.

For example:

Before	After

Technically you can delete an endpoint provided you add a new one with the same name elsewhere in the topology.

This might be a problem if a user wants to create a custom version of one of their own topologies – such as this. Since we don't have a "Save as / clone" button for topologies, it means they'd have to create the topology from scratch every time they want to make a change to the structure.

I'm okay with this if #1488 is something we plan to do very soon. @ChaelKruip?

[grdw]

I'm not so sure about that. It's an error to delete an endpoint (which might have technologies attached), but adding new ones should be okay.

It's not what I currently experience on beta.

If I add a new endpoint called Households 4 I'm getting the 'deleted' error. Which is a bit odd, since I added one. 😆

[antw]

This is why. That's an odd validation. 😆

I'm a little worried that the inability to add nodes on the LES page might push visitors into making their changes on the "edit topology" page (topologies/:id/edit) instead. A change there doesn't result in a clone and might break other LESes which also use it.

I still think this is okay as long as #1488 is something we do soon.

[grdw]

This is why. That's an odd validation.

Man... I know I wrote that. Just changing the != into a < makes it actually do what the error message is describing. 😅

I'm also ok with enabling the adding and removing but I purely judged by the inability of adding and removing a node by the error I got and therefor disabled the interface.

I do still want to disable renaming the nodes for each node which has technologies attached to it for that will currently result in errors.

[ChaelKruip]

I'm okay with this if #1488 is something we plan to do very soon. @ChaelKruip?

I think we should! @grdw can you pick that up after this?

[antw]

Looks good now. Merged it! :tada: :cake: