Moved dep graph to creature form, improved style

app/imports/client/ui/creature/CreatureForm.vue

@@ -120,6 +120,18 @@
           {{ libraryWriteError }}
         </p>
       </form-section>
+      <form-section name="Debug">
+        <v-btn
+          data-id="dependency-graph-button"
+          text
+          @click="showDependencyGraph"
+        >
+          <v-icon left>
+            mdi-graph
+          </v-icon>
+          Dependency Graph
+        </v-btn>
+      </form-section>
     </form-sections>
   </div>
 </template>
@@ -267,6 +279,15 @@ export default {
       this.dirty = true;
       this.updateAllowedLibraryCollections();
     },
+    showDependencyGraph() {
+      this.$store.commit('pushDialogStack', {
+        component: 'dependency-graph-dialog',
+        elementId: 'dependency-graph-button',
+        data: {
+          creatureId: this.model._id,
+        },
+      });
+    },
   },
 };
 </script>

app/imports/client/ui/creature/character/CharacterSheetToolbar.vue

@@ -55,13 +55,6 @@
                     </v-icon> Delete
                   </v-list-item-title>
                 </v-list-item>
-                <v-list-item @click="showDependencyGraph">
-                  <v-list-item-title>
-                    <v-icon left>
-                      mdi-graph
-                    </v-icon> Dependency Graph
-                  </v-list-item-title>
-                </v-list-item>
                 <v-list-item @click="showCharacterForm">
                   <v-list-item-title>
                     <v-icon left>
@@ -244,15 +237,6 @@ export default {
         }
       });
     },
-    showDependencyGraph() {
-      this.$store.commit('pushDialogStack', {
-        component: 'dependency-graph-dialog',
-        elementId: 'creature-menu',
-        data: {
-          creatureId: this.creatureId,
-        },
-      });
-    },
     unshareWithMe() {
       updateUserSharePermissions.call({
         docRef: {

app/imports/client/ui/creature/dependencyGraph/DependencyGraphDialog.vue

@@ -60,15 +60,16 @@ export default {
     // Convert ngraph to cytoscape
     // Convert Nodes
     const nodes = [];
-    console.log(this.computation);
     const loopNodes = getLoopNodes(this.computation);
     this.computation.dependencyGraph.forEachNode(function (node) {
       nodes.push({
         data: {
           id: node.id,
           label: getNodeName(node) || node.id,
-          variable: !node.data,
+          variable: !node.data?.type,
           inLoop: loopNodes.includes(node.id),
+          propId: node.data?._id,
+          prop: node.data,
         },
       });
     });
@@ -80,9 +81,7 @@ export default {
           target: link.fromId,
           source: link.toId,
           linkType: link.data,
-          inLoop: loopNodes.includes(link.fromId) && loopNodes.includes(link.toId)
+          inLoop: loopNodes.includes(link.fromId) && loopNodes.includes(link.toId),
-        },
-        scratch: {
         },
       })
       //{ data: { source: 'n0', target: 'n1' } }
@@ -97,18 +96,23 @@ export default {
         name: 'klay',
         nodeDimensionsIncludeLabels: false,
         klay: {
-          // direction: 'RIGHT',
+          addUnnecessaryBendpoints: false,
+          aspectRatio: 1.6,
+          direction: 'RIGHT',
           edgeRouting: 'ORTHOGONAL', //'ORTHOGONAL',
+          edgeSpacingFactor: 0.5,
           feedbackEdges: true,
-          compactComponents: true,
+          inLayerSpacingFactor: 1.0,
           layoutHierarchy: true,
-          mergeEdges: true,
+          linearSegmentsDeflectionDampening: 0.3,
-          // mergeHierarchyCrossingEdges: true,
+          compactComponents: true,
+          mergeEdges: false,
+          mergeHierarchyCrossingEdges: false,
+          nodeLayering: 'NETWORK_SIMPLEX',
           nodePlacement: 'LINEAR_SEGMENTS', //default 'BRANDES_KOEPF'
           spacing: 20,//20,
-          edgeSpacingFactor: 2.0, //0.5,
           thoroughness: 12,//7,
-          separateConnectedComponents: false,
+          separateConnectedComponents: true,
         },
       },
 
@@ -117,37 +121,56 @@ export default {
           selector: 'node',
           style: {
             'content': 'data(label)',
-            //'text-opacity': 0.5,
+            //'text-opacity': 0.8,
-            'text-valign': 'bottom',
+            'text-valign': 'center',
             'text-halign': 'center',
-            'background-color': '#11479e',
+            'background-color': '#303030',
+            'text-background-color': '#303030',
+            'color': '#fff',
             //'text-outline-color': '#888',
             //'text-outline-width': 3,
             'text-background-opacity': 1,
-            'text-background-color': '#888',
             'text-background-shape': 'roundrectangle',
-            'shape': 'round-rectangle'
+            'text-background-padding': 2,
+            'shape': 'round-rectangle',
+            'width': 80,
+            'height': 20,
+            'compound-sizing-wrt-labels': 'include',
+            'font-family': '"Roboto",sans-serif',
           }
         }, {
           selector: ele => ele.data().variable,
+          style: {
+            'color': '#f44336',
+            'font-family': 'monospace',
+          }
+        }, {
+          selector: ele => !!ele.data().propId,
           style: {
             'background-color': '#B71C1C',
+            'text-background-color': '#B71C1C',
           }
         }, {
           selector: 'edge',
           style: {
             'width': 4,
             'target-arrow-shape': 'triangle-backcurve',
-            'line-color': '#9dbaea',
+            'color': '#fff',
-            'target-arrow-color': '#9dbaea',
+            'text-opacity': 0.8,
-            'curve-style': 'unbundled-bezier',
+            'line-color': '#555',
+            'target-arrow-color': '#555',
+            'curve-style': 'unbundled-bezier',//'unbundled-bezier',
             'label': 'data(linkType)',
             'text-rotation': 'autorotate',
+            'source-endpoint': 'outside-to-line-or-label',
+            'target-endpoint': 'outside-to-line-or-label',
           }
         }, {
           selector: ele => ele.data().inLoop,
           style: {
+            'color': '#fff',
             'background-color': '#FF6D00',
+            'text-background-color': '#FF6D00',
             'line-color': '#FF6D00',
             'target-arrow-color': '#FF6D00',
           }
@@ -161,11 +184,11 @@ export default {
     });
     this.cytoscape.on('tap', 'node', function(evt){
       var node = evt.target;
-      console.log( 'tapped node', node.data() );
+      console.log( node.data() );
     });
     this.cytoscape.on('tap', 'edge', function(evt){
       var edge = evt.target;
-      console.log( 'tapped edge', edge );
+      console.log( edge.data() );
     });
   },
   meteor: {
@@ -182,6 +205,7 @@ export default {
   .graph-container {
     width: 100%;
     height: 100%;
+    background-color: #151515;
   }
 
   .graph-container svg {