Settings Progress 2 - Template Edit / Save Proof of Concept

[dsriseah]

This PR implements a rudimentary user interface that edits the existing TEMPLATE structure as a proof of concept. Currently, only simple settings are supported, but this PR does have the bones to add more user interface features that can be saved to the [dataset]-template.TOML file using the existing NetCreate conventions.

Phase 3 will handle the six remaining property settings, which require more complex UI programming:

• Node/Edge Definitions
• Node/Edge Type Definition (a list of selectable objects for Node/Edge Type)
• CommentType Definition (a list of selectable comment definitions for comments)
• Additional custom input fields as needed (e.g. color pickers)
  Also:
• Import Template should lock
• Import Nodes and Edges should lock

Currently these can be edited manually in the template. Phase 3 will provide the user interface for these.

Note

Previously in PR #400, we had started to implement a clean slate modular template system to exist alongside the legacy TEMPLATE structure which conformed to clean top-down dataflow architecture used in our simulation systems. However, after many surprises, we found that React itself is highly resistant to this kind of architecture. For expediency, we were forced to abandon the approach and archive it in the URSYS repo for future apps launches (and show React the airlock along the way)

TESTING

1. First, let's create a new dataset by running the nc.js command

   ./nc.js --dataset=testui
   

   This will create a new dataset from the default toml file with an empty loki database
2. Start the app and open the Javascript Console (CMD-OPT-J on Mac Chrome)
3. Click the vertical [...] menu at the top-right of the app to open the Advanced Panel
4. Enter the default password danishpowers
5. Click on the POC Settings Tab then drag it below the title bar. You'll see something like this:
   

Modify Settings
The Settings Panel allows you to change items until you are ready to save them. If you change your mind, you can revert your changes.

1. Make a change to Graph Name, calling it "My Testing UI", then click outside the box.
2. The background colors of buttons and editable fields change to show they're active
3. Click the Revert Changes button to revert
4. Click the Save Changes button to save the template back to disk
5. Look at the Javascript Console to see the debug messages
6. Look at the Terminal to see the template status in the server output

Test Settings Locking

1. Close the Settings Tab. Note the Javascript Console and Terminal output showing debug messages.
2. Open a new window to NetCreate and open the Settings Tab there as before, with the Javascript Console visible
3. Now, go back to the first window and open the Settings Tab. You should see the message that the template is locked.
4. On the second window, click on a different tab or close the Advanced Panel
5. On the first window, close and open the Settings Tab. You should now be able to edit it.
6. Click the Save Chnges button, and keep the Settings Tab open
7. On the second window, open the Settings Tab and see that changes are propagated though they are not editable, as the first window has the lock
8. Back on the first window with Settings Tab Still open, refresh the browser and look at the Terminal Output to see that the lock has been released.
9. Confirm that you can now edit settings on the second window.

Test the Template Files

1. Open app-templates/_default.template.toml and note the addition of the new _ui key
2. Find an old dataset .template.toml file that doesn't have the _ui keys, and load it through ./nc.js --dataset=olddataset
3. The Settings Tab should still work.
4. Save the template from the Settings Tab, and look at the dataset .template.toml file again to see that the _ui keys have been added

KNOWN ISSUES

• with blank datasets, a warning about "elements with non-unique id" appears, due to a UI bug outside of the Settings Editor
• the input text field expands when it is edited, causing horizontal scrolling

---

CHANGE NOTES

• The default.template.toml now includes a _ui object that contains metadata used for rendering the user interface. The template migration and validation methods in server-database.js have been updated as well.
• New _schemaVersion is 2.1
• Template Locking system has been rewritten to support (a) lock by uaddr and (b) release of lock on client disconnect
• SettingsEditor manages template changes as pending using the Immer library and dispatcher through React.useReducer()
• SettingsEditor now uses React Context to distribute {draft, hasLock, dispatch } as <SettingsContext.Provider value> to make draft settings available to all children, bypassing the need from prop drilling; this value is generated on rerender whenever the React useReducer hook's dispatch function is used, which causes all its children to rerender (secret React sauce)
• SettingsEditor now use React's useEffect hooks to to use call LockTemplate() and ReleaseTemplate() on mount
• Children of SettingsEditor can access hasLock through const { hasLock } = useContext(SettingsContext) to determine whether to enable/disable editing
• Where necessary, all components use React useState hooks to represent dynamic data, as all React components must be "controlled". When state relies on external data, the values of state is set through useEffect because the initial state assign works only once despite it appearing at the top of the code, thanks to the "magic" of React.

[benloh]

Confirmed tests passed.

Additional tests:

• Third browser on secondary machine was able to lock and unlock settings
• Tested Import Template to see if it locks Settings => NOPE
• Tested Import Nodes and Edges to see if it locks Settings => NOPE

@dsriseah Works according to tests. I'm guessing this is is future work, but just noting that we'll have to lock down the settings (and template) during template imports and node and edge imports. I can probably take care of that once this PR is in.

[dsriseah]

Additional tests:

• Third browser on secondary machine was able to lock and unlock settings

To confirm: it did work as expected?

• Tested Import Template to see if it locks Settings => NOPE
• Tested Import Nodes and Edges to see if it locks Settings => NOPE

Those are different panels, and are outside the scope of Settings Editor and Property Editing UI; getting this part to work independently was the goal. The import system still uses the legacy locking system.

[dsriseah]

Adding the Import tests to Next Phase work (not part of this scope)

[dsriseah]

I am now starting prop-settings-3 branch

[benloh]

To confirm: it did work as expected?

Sorry. Yes, it did work as expected.

Adding the Import tests to Next Phase work (not part of this scope)

I figured that was true. Just wanted to note it for future reference.

Thanks!!

[benloh]

Reconfirmed with a test merge into dev-dhi. Merging!