Latest version from development for review

.github/workflows/main.yml

@@ -7,6 +7,9 @@ on:
   push:
     branches: '**'
     tags: 'v*'
+  workflow_run:
+    workflows: [Build]
+    types: [completed]
 
 # A workflow run is made up of one or more jobs that can run sequentially or in parallel
 jobs:

components/configuration/VFBCircuitBrowser/circuitBrowserConfiguration.js

@@ -19,7 +19,7 @@ var locationCypherQuery = ( instances, paths, weight ) => ({
       + " WITH * ORDER BY index DESC"
       + " UNWIND relationships(path) as sr"
       + " OPTIONAL MATCH cp=(x:Neuron:has_neuron_connectivity)-[:synapsed_to]-(y:Neuron:has_neuron_connectivity) WHERE x=apoc.rel.startNode(sr) AND y=apoc.rel.endNode(sr) OPTIONAL MATCH fp=(x)-[r:synapsed_to]->(y) WHERE r.weight[0] >= " + weight?.toString()
-      + " OPTIONAL MATCH (x)-[xio:INSTANCEOF]->(xpc:Class) OPTIONAL MATCH (y)-[yio:INSTANCEOF]->(ypc:Class) WITH *,'\"'+ x.short_form+'\":{\"'+xpc.short_form+'\":\"' + xpc.label + '\"},\"'+ y.short_form+'\":{\"'+ypc.short_form+'\":\"' + ypc.label + '\"}' as Class"
+      + " OPTIONAL MATCH (x)-[xio:INSTANCEOF]->(xpc:Class) OPTIONAL MATCH (y)-[yio:INSTANCEOF]->(ypc:Class) WITH *,'\"'+ x.short_form+'\":{\"'+xpc.short_form+'\":\"' + coalesce(xpc.symbol[0], xpc.label) + '\"},\"'+ y.short_form+'\":{\"'+ypc.short_form+'\":\"' + coalesce(ypc.symbol[0], ypc.label) + '\"}' as Class"
       + " RETURN distinct a as root, collect(distinct fp) as pp, collect(distinct cp) as p, collect(distinct id(r)) as fr, sourceNode as source, targetNode as target, max(length(path)) as maxHops, collect(distinct toString(id(r))+':'+toString(index)) as relationshipY, "
       + " apoc.convert.fromJsonMap('{' + apoc.text.join(collect(Class),',') + '}') as class ",
       "resultDataContents": ["row", "graph"]
@@ -71,8 +71,19 @@ var styling = {
   defaultLinkHoverColor : "#11bffe",
   // Color apply to target and source nodes when hovering over a link or a node.
   defaultNeighborNodesHoverColor : "orange",
-  // Font used for text in nodes
-  defaultNodeFont : "8px sans-serif",
+  defaultNodeFont : "sans-serif",
+  // Font size in pixels used for text in nodes
+  nodeTitleFontSize : 8,
+  // Percentage of node for title area to take in node, as decimal. Default 45%
+  nodeTitleHeight : .45,
+  // Pixel font size for description text of node
+  nodeDescriptionFontSize : 8,
+  // percentage of node description area to take in node, as decimal. Default 45%
+  nodeDescriptionHeight : .45,
+  // percentage of node color bar area to take in node, as decimal. Default 10%
+  nodeColorAreaHeight : .1,
+  // Max amount of lines to display for title and description 
+  linesText : 3,
   // Color of font in node's text
   defaultNodeFontColor : "black",
   // Node border color

components/configuration/VFBMain/searchConfiguration.js

@@ -95,7 +95,7 @@ var datasourceConfiguration = {
       "start": "0",
       "pf":"true",
       "fq": [
-        "short_form:VFB* OR short_form:FB* OR facets_annotation:DataSet OR facets_annotation:pub"
+        "(short_form:VFB* OR short_form:FB* OR facets_annotation:DataSet OR facets_annotation:pub) AND NOT short_form:VFBc_*"
       ],
       "rows": "100",
       "wt": "json",

components/interface/VFBCircuitBrowser/VFBCircuitBrowser.js

@@ -268,8 +268,6 @@ class VFBCircuitBrowser extends Component {
     let width = context.measureText(text).width;
     while (width > maxWidth) {
       baseSize--;
-      context.font = `${baseSize}px sans-serif`
-      width = context.measureText(text).width;
     }
 
     return baseSize;
@@ -278,31 +276,47 @@ class VFBCircuitBrowser extends Component {
   /**
    * Breaks Description texts into lines to fit within a certain width value.
    */
-  wrapText (context, text, x, y, maxWidth, maxHeight) {
-    let words = text.split(' ');
-    let lines = [];
-    let line = '';
-
-    let maxTextLength = text.length < 20 ? text.length / 2 : text.length / 3;
-
-    words.forEach( word => {
-      let testLine = line + word + ' ';
-      if ( line.length >= maxTextLength ) {
-        lines.push(line);
-        line = word + ' ';
+  wrapText (context, text, x, y, fontSize, maxWidth, maxHeight) {
+    let lines = new Array();
+    let width = 0, i, j;
+    let result, tempLine;
+
+    while ( text.length ) {
+      for ( i = text.length; context.measureText(text.substr(0,i)).width > maxWidth; i-- ) {}
+
+      result = text.substr(0,i);
+      tempLine = result.substr(0, result.length);
+
+      // Break line by spaces if avaiable
+      if ( tempLine.indexOf(" ") >= 0 && ( text.charAt(i + 1) != ' ' && text.charAt(i + 1) != "" ) ) {
+        tempLine = tempLine.split(" ")[0];
+        lines.push( tempLine );
+        text = text.substr( tempLine.length + 1, text.length );
       } else {
-        line = testLine;
+        lines.push( tempLine );
+        text = text.substr( tempLine.length, text.length );
       }
-    });
-
-    lines.push(line);
+    }
 
-    const lineHeight = this.getFontSize(context, maxWidth, lines[0], maxTextLength);
-
-    lines.forEach( line => {
-      context.fillText(line, x, y);
-      y += lineHeight;
-    });
+    // Only one line, center it
+    if ( lines.length == 1 ) { 
+      y = y + ( maxHeight / 2 ) - fontSize / 2;
+    }
+    // Tow lines, center them
+    if ( lines.length == 2 ) {
+      y = y + (fontSize * ((stylingConfiguration.linesText / 2) - 1));
+    }
+
+    // Multiple lines 
+    for ( let i = 0; i < lines.length ; i++ ) {
+      if ( i === stylingConfiguration.linesText - 1 ) {
+        context.fillText( lines.length > i + 1 ? lines[i] + "..." : lines[i], x, y );
+        break;
+      } else {
+        context.fillText( lines[i], x, y );
+      }
+      y += fontSize + ( fontSize / lines.length );
+    }
   }
 
   // Calculate link middle point
@@ -316,22 +330,23 @@ class VFBCircuitBrowser extends Component {
   nodeRendering (node, ctx, globalScale) {
     const cardWidth = NODE_WIDTH;
     const cardHeight = NODE_HEIGHT;
-    const classnameHeight = cardHeight * .45;
-    const idHeight = cardHeight * .45;
+    const nodeTitleHeight = cardHeight * stylingConfiguration.nodeTitleHeight;
+    const nodeDescriptionHeight = cardHeight * stylingConfiguration.nodeDescriptionHeight;
+    const colorBarHeight = cardHeight * stylingConfiguration.nodeColorAreaHeight;
     let borderThickness = this.highlightNodes.has(node) ? NODE_BORDER_THICKNESS : 1;
 
     // Node border color
-    ctx.fillStyle = self.hoverNode == node ? stylingConfiguration.defaultNodeHoverBoderColor : (this.highlightNodes.has(node) ? stylingConfiguration.defaultNeighborNodesHoverColor : stylingConfiguration.defaultNodeBorderColor) ;
+    ctx.fillStyle = self.hoverNode == node || node?.id === self.hoverNode?.id ? stylingConfiguration.defaultNodeHoverBoderColor : (this.highlightNodes.has(node) ? stylingConfiguration.defaultNeighborNodesHoverColor : stylingConfiguration.defaultNodeBorderColor) ;
     // Create Border
-    ctx.fillRect(node.x - cardWidth / 2 - (borderThickness), node.y - cardHeight / 2 - (borderThickness), cardWidth , cardHeight );
+    ctx.fillRect(node.x - (cardWidth / 2) - borderThickness, node.y - (cardHeight / 2) + borderThickness, cardWidth + (borderThickness * 2), cardHeight + (borderThickness * 2));
 
     // Assign color to Description Area background in Node
     ctx.fillStyle = stylingConfiguration.defaultNodeDescriptionBackgroundColor;
     // Create Description Area in Node
-    ctx.fillRect(node.x - cardWidth / 2,node.y - cardHeight / 2, cardWidth - (borderThickness * 2 ), cardHeight - (borderThickness * 2 ));
+    ctx.fillRect(node.x - cardWidth / 2,node.y - nodeDescriptionHeight, cardWidth, cardHeight);
 
     ctx.fillStyle = stylingConfiguration.defaultNodeTitleBackgroundColor;
-    ctx.fillRect(node.x - cardWidth / 2,node.y - cardHeight / 2, cardWidth - (borderThickness * 2 ), cardHeight / 2 );
+    ctx.fillRect(node.x - cardWidth / 2,node.y - nodeTitleHeight, cardWidth, nodeTitleHeight );
 
     const lastIndex = node.nodeColorLabels.length;
     node.nodeColorLabels.forEach( (color, index) => {
@@ -340,28 +355,39 @@ class VFBCircuitBrowser extends Component {
       const x = (node.x - cardWidth / 2) + (index * (cardWidth / lastIndex));
       const y = node.y;
       // Create Title Bar in Node
-      ctx.fillRect(x,y, (cardWidth / lastIndex) - ( index == lastIndex - 1 ? borderThickness * 2 : 0 ) , cardHeight / 10);
+      ctx.fillRect(x,y, (cardWidth / lastIndex), colorBarHeight);
     })
 
     // Assign font to text in Node
-    ctx.font = stylingConfiguration.defaultNodeFont;
+    ctx.font = `${stylingConfiguration.nodeTitleFontSize}px ${stylingConfiguration.defaultNodeFont}`;
     // Assign color to text in Node
     ctx.fillStyle = stylingConfiguration.defaultNodeFontColor;
     // Text in font to be centered
     ctx.textAlign = "center";
     ctx.textBaseline = 'middle';
+
+    /* 
+     * Add Description text to Nodes
+     * Parameters:
+     * node.name = text to display
+     * node.x = x coordinate of text
+     * node.y - (cardHeight / 2) + 10 = y coordinate, adds 15 pixels for padding from upper element
+     * cardWidth * .8 = The maximum width the text can take
+     * nodeTitleHeight = The maximum height the text can take 
+     */
+    this.wrapText(ctx, node.classLabel, node.x, node.y - (cardHeight / 2) + 10, stylingConfiguration.nodeTitleFontSize, cardWidth * .8 , nodeTitleHeight);
 
-    // Create Title in Node
-    this.wrapText(ctx, node.classLabel, node.x, node.y - (cardHeight / 2) + 10, cardWidth * .8 , classnameHeight);
-
-    ctx.font = stylingConfiguration.defaultNodeFont;
+    ctx.font = `${stylingConfiguration.nodeDescriptionFontSize}px ${stylingConfiguration.defaultNodeFont}`;
     /* 
      * Add Description text to Nodes
+     * Parameters:
      * node.name = text to display
      * node.x = x coordinate of text
-     * node.y + 20 = y coordinate, adds 20 pixels for padding from upper element
+     * node.y + 15 = y coordinate, adds 15 pixels for padding from upper element
+     * cardWidth * .8 = The maximum width the text can take
+     * cardHeight = The maximum height the text can take 
      */
-    this.wrapText(ctx, node.name, node.x, node.y + 20, cardWidth * .8 , classnameHeight);
+    this.wrapText(ctx, node.name, node.x, node.y + 15, stylingConfiguration.nodeDescriptionFontSize, cardWidth * .8 , nodeDescriptionHeight);
   }
 
   render () {
@@ -408,7 +434,7 @@ class VFBCircuitBrowser extends Component {
             data={this.state.graph}
             // Create the Graph as 2 Dimensional
             d2={true}
-            nodeLabel={node => node.title}
+            nodeLabel={node => node.name + " [" + node.title + "]"}
             // Relationship label, placed in Link
             linkLabel={link => link.label}
             // Width of links, log(weight)
@@ -478,8 +504,9 @@ class VFBCircuitBrowser extends Component {
               ctx.fillText(label, 0, 0);
               ctx.restore();
             }}
-            nodeRelSize={20}
+            nodeRelSize={50}
             nodeSize={30}
+            enableNodeDrag={true}
             // Assign background color to Canvas
             backgroundColor = {stylingConfiguration.canvasColor}
             // Assign color to Links connecting Nodes
@@ -562,8 +589,8 @@ class VFBCircuitBrowser extends Component {
                 self.highlightNodes.add(link.source);
                 self.highlightNodes.add(link.target);
               }
-            }
-            }
+            }}
+            linkHoverPrecision={10}
           />
     )
   }