Update front-end code for new data structure

CHANGELOG.md

@@ -11,10 +11,20 @@ Version numbers should follow https://semver.org/spec/v2.0.0.html
 
 - Dropped support for Django < 3.2.
 - Dropped support for Python < 3.10.
+- Data format returned from `schema_graph.schema.get_schema` has been overhauled.
+- Template context now only includes the new schema data format.
+- The JS front-end has been rewritten to handle the new format.
+
 
 ### Changed
 
 - Main "App" Vue component refactored into smaller component files.
+- The JS code now tries to refer to "nodes" and "edges", not "models" and "apps".
+- More options have been added to the sidebar to offer finer control.
+  This has resulted in the sidebar getting wider.
+- The list of groups in the sidebar is now collapsed by default.
+- More items in the sidebar show tooltips on hover (using the title HTML attribute).
+- Graph nodes representing Proxy models now appear with a white background.
 
 
 ## [2.2.1] - 2022-10-26

assets/components/App.vue

@@ -1,17 +1,14 @@
 <template>
-  <div class="main-app">
-    <v-app>
-      <GraphEditor
-        :inactiveColor=inactiveColor
-        :loaded=loaded
-      />
-      <Graph
-        class="graph"
-        :completeLoad=completeLoad
-      />
-      <vue-progress-bar></vue-progress-bar>
-    </v-app>
-  </div>
+  <v-app>
+    <GraphEditor
+      :loaded=loaded
+    />
+    <Graph
+      class="graph"
+      :completeLoad=completeLoad
+    />
+    <vue-progress-bar></vue-progress-bar>
+  </v-app>
 </template>
 
 <style>
@@ -53,12 +50,11 @@ export default {
   },
   data() {
     let loaded = false;
-    graphData.setup();
+    graphData.setup('rgba(0, 0, 0, 0.54)');
 
     return {
-      inactiveColor: 'rgba(0, 0, 0, 0.54)',
       loaded,
-    };
+    }
   },
 };
 </script>

assets/components/GraphEditor.vue

@@ -7,10 +7,10 @@
       >
         <v-icon>mdi-menu</v-icon>
       </v-btn>
-      <v-navigation-drawer app temporary v-model="sidebar">
+      <v-navigation-drawer app temporary v-model="sidebar" width=384>
 
         <v-toolbar flat>
-          <v-tooltip bottom attach=".main-app">
+          <v-tooltip bottom>
             <template v-slot:activator="{ on }">
               <v-btn small v-on="on" @click="hideAll">
                 <v-icon>mdi-eye-off</v-icon>
@@ -19,7 +19,7 @@
             <span>Hide all</span>
           </v-tooltip>
           <v-spacer></v-spacer>
-          <v-tooltip bottom attach=".main-app">
+          <v-tooltip bottom>
             <template v-slot:activator="{ on }">
               <v-btn small v-on="on" @click="showAll">
                 <v-icon>mdi-eye</v-icon>
@@ -28,7 +28,7 @@
             <span>Show all</span>
           </v-tooltip>
           <v-spacer></v-spacer>
-          <v-tooltip bottom attach=".main-app">
+          <v-tooltip bottom>
             <template v-slot:activator="{ on }">
               <v-btn small v-on="on" @click="collapseAll">
                 <v-icon>mdi-arrow-collapse-all</v-icon>
@@ -37,60 +37,91 @@
             <span>Collapse all</span>
           </v-tooltip>
           <v-spacer></v-spacer>
-          <v-tooltip bottom attach=".main-app">
+          <v-tooltip bottom>
             <template v-slot:activator="{ on }">
               <v-btn small v-on="on" @click="expandAll">
                 <v-icon>mdi-arrow-expand-all</v-icon>
               </v-btn>
             </template>
             <span>Expand all</span>
           </v-tooltip>
+          <v-spacer></v-spacer>
+          <v-tooltip bottom>
+            <template v-slot:activator="{ on }">
+              <v-btn small v-on="on" @click="foldAll">
+                <v-icon>mdi-chevron-up</v-icon>
+              </v-btn>
+            </template>
+            <span>Fold all</span>
+          </v-tooltip>
+          <v-spacer></v-spacer>
+          <v-tooltip bottom>
+            <template v-slot:activator="{ on }">
+              <v-btn small v-on="on" @click="unfoldAll">
+                <v-icon>mdi-chevron-down</v-icon>
+              </v-btn>
+            </template>
+            <span>Unfold all</span>
+          </v-tooltip>
         </v-toolbar>
 
         <v-list expand dense>
           <v-list-group
-            v-for="app in Object.keys(graphData.activeModels)"
-            :key="app"
-            :value="graphData.activeModels[app].expanded"
-            :color="graphData.activeModels[app].visible ? graphData.activeModels[app].hardColor : inactiveColor"
+            v-for="group in graphData.groups"
+            :key="group.id"
+            v-model:value="isOpen[group.id]"
+            :color="group.hardColor"
+            :title="group.label"
           >
 
             <template v-slot:activator>
-              <v-list-item-icon
-                @click.stop="graphData.setAppVisible(app, !graphData.activeModels[app].visible)"
-              >
-                <v-icon
-                  v-if="graphData.activeModels[app].visible"
-                  v-bind:style="{color: graphData.activeModels[app].visible ? graphData.activeModels[app].hardColor : inactiveColor}"
-                >mdi-eye-outline</v-icon>
-                <v-icon v-else
-                  v-bind:style="{color: graphData.activeModels[app].visible ? graphData.activeModels[app].hardColor : inactiveColor}"
-                >mdi-eye-off-outline</v-icon>
-              </v-list-item-icon>
-              <v-list-item-content
-                @click.stop="graphData.setAppExpanded(app, !graphData.activeModels[app].expanded)"
-              >
+              <v-list-item-content>
                 <v-list-item-title
-                  v-text="app"
-                  v-bind:style="{color: graphData.activeModels[app].visible ? graphData.activeModels[app].hardColor : inactiveColor}"
+                  v-text="group.label"
+                  v-bind:style="{color: group.hardColor}"
                 ></v-list-item-title>
               </v-list-item-content>
+              <v-icon
+                v-if="graphData.isGroupEnabled(group.id)"
+                v-bind:style="{color: group.hardColor}"
+                @click.stop="toggleGroupEnabled(group.id)"
+                title="Hide group"
+              >mdi-eye-outline</v-icon>
+              <v-icon v-else
+                v-bind:style="{color: group.hardColor}"
+                @click.stop="toggleGroupEnabled(group.id)"
+                title="Show group"
+              >mdi-eye-off-outline</v-icon>
+
+              <v-icon
+                v-if="graphData.isGroupExpanded(group.id)"
+                v-bind:style="{color: group.hardColor}"
+                @click.stop="toggleGroupExpanded(group.id)"
+                title="Collapse group"
+              > mdi-arrow-expand-vertical </v-icon>
+              <v-icon v-else
+                v-bind:style="{color: group.hardColor}"
+                @click.stop="toggleGroupExpanded(group.id)"
+                title="Expand group"
+              > mdi-arrow-collapse-vertical </v-icon>
             </template>
-            <v-list-item dense link
-              class="menu-model"
-              v-for="model, modelIndex in graphData.activeModels[app].models"
-              :key="model.id"
-              :disabled="!graphData.activeModels[app].visible"
-              @click.stop="graphData.setModelActive(app, model.label, !model.active)"
+            <v-list-item dense
+              v-for="nodeID in graphData.allGroups[group.id].nodes"
+              :key="nodeID"
+              :disabled="!graphData.isGroupEnabled(group.id)"
+              @click.stop="toggleNodeEnabled(nodeID)"
+              :title="graphData.allNodes[nodeID].name"
             >
               <v-list-item-content>
-                <v-list-item-title v-text="model.label"></v-list-item-title>
+                <v-list-item-title
+                  v-text="graphData.allNodes[nodeID].name"
+                />
               </v-list-item-content>
-              <v-list-item-action>
-                <v-icon v-if="!graphData.activeModels[app].visible && model.active">
-                  mdi-eye-outline
-                </v-icon>
-                <v-icon v-else-if="graphData.activeModels[app].visible && model.active" :color="graphData.activeModels[app].hardColor" >
+              <v-list-item-action title="Show/hide">
+                <v-icon
+                  v-if="graphData.isNodeEnabled(nodeID)"
+                  :color="group.hardColor"
+                >
                   mdi-eye-outline
                 </v-icon>
                 <v-icon v-else>
@@ -99,45 +130,75 @@
               </v-list-item-action>
             </v-list-item>
 
+          <v-divider></v-divider>
           </v-list-group>
         </v-list>
 
       </v-navigation-drawer>
   </div>
 </template>
 
-<style scoped>
-  /* Own styles */
-  .menu-model {
-    padding-left: 52px;
-  }
-</style>
-
 <script>
 import graphData from "../state/graphData.js";
 export default {
   name: "GraphEditor",
   components: {},
-  props: ["loaded", "inactiveColor"],
+  props: ["loaded"],
   data() {
     return {
       sidebar: false,
-      graphData
+      graphData,
+      isOpen: Object.fromEntries(graphData.groups.map((group) => [group.id, false]))
     }
   },
   methods: {
     hideAll: function () {
       graphData.hideAll();
+      this.foldAll();
     },
     showAll: function () {
       graphData.showAll();
     },
     collapseAll: function () {
       graphData.collapseAll();
+      this.foldAll();
     },
     expandAll: function () {
       graphData.expandAll();
     },
+    foldAll: function () {
+      Object.keys(this.isOpen).map((key) => {
+        this.isOpen[key] = false;
+      });
+    },
+    unfoldAll: function () {
+      Object.keys(this.isOpen).map((key) => {
+        this.isOpen[key] = true;
+      });
+    },
+    toggleGroupEnabled: function (groupID) {
+      if (graphData.isGroupEnabled(groupID)) {
+        graphData.disableGroup(groupID);
+        this.isOpen[groupID] = false;
+      } else {
+        graphData.enableGroup(groupID);
+      }
+    },
+    toggleGroupExpanded: function (groupID) {
+      if (graphData.isGroupExpanded(groupID)) {
+        graphData.collapseGroup(groupID);
+        this.isOpen[groupID] = false;
+      } else {
+        graphData.expandGroup(groupID);
+      }
+    },
+    toggleNodeEnabled: function (nodeID) {
+      if (graphData.isNodeEnabled(nodeID)) {
+        graphData.disableNode(nodeID);
+      } else {
+        graphData.enableNode(nodeID);
+      }
+    },
   },
 };
 </script>