One or more nodes can be selected now and the detail view will display an editable table of all the selected Node objects. Updates are also propagated to the data store so that they persist.
Implementation
svelte-headless-table is used to build the table component. Data is read from a derived Svelte store representing selected nodes, and the columns are generating by traversing the union of all selected nodes, populating cells with "undefined" if a node does not have a parameter that another does.
The table is editable by creating an EditableCell component that will create a small input form in the cell when it is clicked on. This triggers a function to update the parent store of all nodes, which will affect all components in the app reading node data.
To avoid recreating safe functions in pure JavaScript to manipulate these data types, we rely on remeda and flat dependencies.
Closes #16
Summary
One or more nodes can be selected now and the detail view will display an editable table of all the selected Node objects. Updates are also propagated to the data store so that they persist.
Implementation
svelte-headless-tableis used to build the table component. Data is read from a derived Svelte store representing selected nodes, and the columns are generating by traversing the union of all selected nodes, populating cells with "undefined" if a node does not have a parameter that another does.The table is editable by creating an EditableCell component that will create a small input form in the cell when it is clicked on. This triggers a function to update the parent store of all nodes, which will affect all components in the app reading node data.
To avoid recreating safe functions in pure JavaScript to manipulate these data types, we rely on
remedaandflatdependencies.