Merge pull request #850 from VirtualFlyBrain/alpha-sync-39f5

sync: alpha with alpha-sync-39f5
VirtualFlyBrain · Dec 18, 2020 · 8df87d2 · 8df87d2
2 parents a5a5bf0 + 577681f
commit 8df87d2
Show file tree

Hide file tree

Showing 23 changed files with 617 additions and 77 deletions.
diff --git a/actions/generals.js b/actions/generals.js
@@ -58,9 +58,9 @@ export const instanceAdded = instance => ({
   data: instance
 });
 
-export const instanceDeleted = (type, instance) => ({
+export const instanceDeleted = (type, id) => ({
   type: type,
-  data: instance
+  data: id
 });
 
 export const instanceSelected = instance => ({

diff --git a/components/VFBMain.js b/components/VFBMain.js
@@ -823,7 +823,7 @@ class VFBMain extends React.Component {
           this.restoreUIComponent("vfbCircuitBrowser");
         }
         this.setState({ UIUpdated: false });
-        break;    
+        break;
       case 'treeBrowserVisible':
         if (this.treeBrowserReference !== undefined && this.treeBrowserReference !== null) {
           this.restoreUIComponent("treeBrowser");
@@ -1176,7 +1176,11 @@ class VFBMain extends React.Component {
         this.quickHelpRender = <VFBQuickHelp id="quickHelp" closeQuickHelp={this.closeQuickHelp} />;
       }
     }
-
+    // Set default page metadata
+    document.querySelector('meta[name="description"]').setAttribute("content","VFB integrates data curated from the literature with image data from many bulk sources. The search system allows you to search for neurons and neuroanatomical structures using almost any name found in the literature. The query system can identify neurons innervating any specified neuropil or fasciculating with any specified tract. It also allows queries for genes, transgenes and phenotypes expressed in any brain region or neuron. Search and query results combine referenced textual descriptions with 3D images and links to originating data sources. VFB features tens of thousands of 3D images of neurons, clones and expression patterns, registered to standard template brains. Any combination of these images can be viewed together. A BLAST-type query system (NBLAST) allows you to find similar neurons and drivers starting from a registered neuron.");
+    document.querySelector('meta[property="og:description"]').setAttribute("content","VFB integrates data curated from the literature with image data from many bulk sources. The search system allows you to search for neurons and neuroanatomical structures using almost any name found in the literature. The query system can identify neurons innervating any specified neuropil or fasciculating with any specified tract. It also allows queries for genes, transgenes and phenotypes expressed in any brain region or neuron. Search and query results combine referenced textual descriptions with 3D images and links to originating data sources. VFB features tens of thousands of 3D images of neurons, clones and expression patterns, registered to standard template brains. Any combination of these images can be viewed together. A BLAST-type query system (NBLAST) allows you to find similar neurons and drivers starting from a registered neuron.");
+    document.title = "Virtual Fly Brain, a data integrator for Drosophila neurobiology";
+    document.querySelector('meta[property="og:title"]').setAttribute("content",document.title);
     setTimeout(function () {
       if (window.templateID == undefined) {
         window.location.reload(true);
@@ -1244,6 +1248,32 @@ class VFBMain extends React.Component {
           idsList += ",";
         }
         idsList += this.idFromURL;
+        // populate page meta for this term for indexing
+        try {
+          if ( window.XMLHttpRequest ) {
+            var xhr = new XMLHttpRequest();
+            xhr.onload = function () {
+              document.title = 'Virtual Fly Brain (' + this.responseXML.title + ')';
+              document.querySelector('meta[property="og:title"]').setAttribute("content",this.responseXML.title);
+              document.querySelector('meta[name="description"]').setAttribute("content",this.responseXML.body.innerText);
+              document.querySelector('meta[property="og:description"]').setAttribute("content",this.responseXML.body.innerText);
+            }
+            xhr.open( 'GET', 'https://virtualflybrain.org/data/VFB/json/' + this.idFromURL + '.html')
+            xhr.responseType = 'document';
+            xhr.send();
+          }
+        } catch (err) {
+          console.error(err);
+        }
+        try {
+          var link = !!document.querySelector("link[rel='amphtml']");
+          link = link ? document.querySelector("link[rel='amphtml']") : document.createElement('link');
+          link.setAttribute('rel', 'amphtml');
+          link.setAttribute('href', 'https://virtualflybrain.org/data/VFB/json/' + this.idFromURL + '.html');
+          document.head.appendChild(link);
+        } catch (err) {
+          console.error(err);
+        }
       } else if (idList[list].indexOf("i=") > -1) {
         if (idsList.length > 0) {
           idsList = "," + idsList;
@@ -1288,6 +1318,11 @@ class VFBMain extends React.Component {
     GEPPETTO.on(GEPPETTO.Events.Instance_added, function (instance) {
       that.props.instanceAdded(instance);
     });
+
+    GEPPETTO.on(GEPPETTO.Events.Instance_deleted, function (instancePath) {
+      let id = instancePath.split(".")[0];
+      that.props.instanceDeleted(ACTIONS.INSTANCE_DELETED, id);
+    });
 
     GEPPETTO.on(GEPPETTO.Events.Model_loaded, function () {
       that.addVfbId(that.idsFinalList);

diff --git a/components/configuration/VFBListViewer/listViewerConfiguration.js b/components/configuration/VFBListViewer/listViewerConfiguration.js
@@ -75,13 +75,17 @@ const conf = [
         return t.type.getInitialValue().value
       })[0].html;
 
+      let htmlLabels = instance.getTypes().map(function (t) {
+        return t.label.getInitialValue().value
+      })[0].html;
+
       // Extract HTML element anchor from html string
       var matchAnchor = /<a[^>]*>([\s\S]*?)<\/a>/g
         , type = html.match(matchAnchor);
 
       // Extract HTML element anchor from html string
       var matchSpan = /<span[^>]*>([\s\S]*?)<\/span>/g
-        , tags = html.match(matchSpan);
+        , tags = htmlLabels.match(matchSpan);
 
       var matchID = /data-instancepath\=\"([A-Za-z0-9 _]*)\"/
         , classID = type[0].match(matchID)[1];

diff --git a/components/configuration/VFBMain/queryBuilderConfiguration.js b/components/configuration/VFBMain/queryBuilderConfiguration.js
@@ -25,6 +25,19 @@ var queryResultsColMeta = [
     "cssClassName": "query-results-name-column",
     "sortDirectionCycle": ['asc', 'desc', null]
   },
+  {
+    "columnName": "neuron_A",
+    "order": 2,
+    "locked": false,
+    "visible": true,
+    "customComponent": QueryLinkComponent,
+    "actions": "window.addVfbId('$entity$');",
+    "entityIndex": 0,
+    "entityDelimiter": "----",
+    "displayName": "Neuron_A",
+    "cssClassName": "query-results-name-column",
+    "sortDirectionCycle": ['asc', 'desc', null]
+  },
   {
     "columnName": "type",
     "order": 2,
@@ -38,6 +51,19 @@ var queryResultsColMeta = [
     "cssClassName": "query-results-type-column",
     "sortDirectionCycle": ['asc', 'desc', null]
   },
+  {
+    "columnName": "parent",
+    "order": 12,
+    "locked": false,
+    "visible": true,
+    "customComponent": QueryLinkComponent,
+    "actions": "window.addVfbId('$entity$');",
+    "entityIndex": 2,
+    "entityDelimiter": "----",
+    "displayName": "Parent",
+    "cssClassName": "query-results-type-column",
+    "sortDirectionCycle": ['asc', 'desc', null]
+  },
   {
     "columnName": "expressed_in",
     "order": 3,
@@ -92,6 +118,81 @@ var queryResultsColMeta = [
     "cssClassName": "query-results-stage-column",
     "sortDirectionCycle": ['asc', 'desc', null]
   },
+  {
+    "columnName": "downstream",
+    "order": 7,
+    "locked": false,
+    "visible": true,
+    "displayName": "Downstream",
+    "cssClassName": "query-results-stage-column",
+    "sortDirectionCycle": ['asc', 'desc', null]
+  },
+  {
+    "columnName": "tbars",
+    "order": 8,
+    "locked": false,
+    "visible": true,
+    "displayName": "Tbars",
+    "cssClassName": "query-results-stage-column",
+    "sortDirectionCycle": ['asc', 'desc', null]
+  },
+  {
+    "columnName": "upstream",
+    "order": 9,
+    "locked": false,
+    "visible": true,
+    "displayName": "Upstream",
+    "cssClassName": "query-results-stage-column",
+    "sortDirectionCycle": ['asc', 'desc', null]
+  },
+  {
+    "columnName": "weight",
+    "order": 10,
+    "locked": false,
+    "visible": true,
+    "displayName": "Weight",
+    "cssClassName": "query-results-stage-column",
+    "sortDirectionCycle": ['asc', 'desc', null]
+  },
+  {
+    "columnName": "neuron_B",
+    "order": 11,
+    "locked": false,
+    "visible": true,
+    "customComponent": QueryLinkComponent,
+    "actions": "window.addVfbId('$entity$');",
+    "entityIndex": 1,
+    "entityDelimiter": "----",
+    "displayName": "Neuron_B",
+    "cssClassName": "query-results-name-column",
+    "sortDirectionCycle": ['asc', 'desc', null]
+  },
+  {
+    "columnName": "region",
+    "order": 11,
+    "locked": false,
+    "visible": true,
+    "customComponent": QueryLinkComponent,
+    "actions": "window.addVfbId('$entity$');",
+    "entityIndex": 1,
+    "entityDelimiter": "----",
+    "displayName": "Region",
+    "cssClassName": "query-results-name-column",
+    "sortDirectionCycle": ['asc', 'desc', null]
+  },
+  {
+    "columnName": "traget",
+    "order": 11,
+    "locked": false,
+    "visible": true,
+    "customComponent": QueryLinkComponent,
+    "actions": "window.addVfbId('$entity$');",
+    "entityIndex": 1,
+    "entityDelimiter": "----",
+    "displayName": "Target",
+    "cssClassName": "query-results-name-column",
+    "sortDirectionCycle": ['asc', 'desc', null]
+  },
   {
     "columnName": "license",
     "order": 8,
@@ -166,7 +267,7 @@ var queryResultsColMeta = [
 ];
 
 // which columns to display in the results
-var queryResultsColumns = ['name', 'type', 'expressed_in', 'description', 'reference', 'gross_type', 'stage', 'license', 'template', 'technique', 'controls', 'images', 'score','image_count'];
+var queryResultsColumns = ['name', 'neuron_A', 'type', 'downstream', 'tbars', 'upstream', 'weight', 'neuron_B', 'region', 'target', 'parent', 'expressed_in', 'description', 'reference', 'gross_type', 'stage', 'license', 'template', 'technique', 'controls', 'images', 'score', 'image_count'];
 
 var queryResultsControlConfig = {
   "Common": {
@@ -330,6 +431,10 @@ var queryBuilderDatasourceConfig = {
 };
 
 var sorterColumns = [
+  {
+    column: "downstream",
+    order: "DESC"
+  },
   {
     column: "score",
     order: "DESC"

diff --git a/components/interface/VFBListViewer/ListViewerControlsMenu.js b/components/interface/VFBListViewer/ListViewerControlsMenu.js
@@ -1,7 +1,7 @@
 import React, { Component } from "react";
 import Menu from "@geppettoengine/geppetto-ui/menu/Menu";
 import { connect } from 'react-redux';
-import { SliderPicker } from 'react-color';
+import { ChromePicker } from 'react-color';
 import { setTermInfo, SHOW_LIST_VIEWER, INSTANCE_DELETED } from './../../../actions/generals';
 
 const controlsConfiguration = require('../../configuration/VFBListViewer/controlsMenuConfiguration').default;
@@ -62,7 +62,6 @@ class ListViewerControlsMenu extends Component {
       break;
     case ACTIONS.DELETE:
       this.props.instance.delete();   
-      this.props.instanceDeleted(INSTANCE_DELETED, this.props.instance);
       break;
     case ACTIONS.INFO:
       var self = this;
@@ -228,7 +227,7 @@ class ListViewerControlsMenu extends Component {
             className="btnBar-color-picker"
             ref={ref => this.colorPickerContainer = ref}
             style={{ left: this.state.pickerPosition }}>
-            <SliderPicker
+            <ChromePicker
               color={ this.props.instance.getColor() }
               onChangeComplete={ (color, event) => {
                 this.props.instance.setColor(color.hex);
@@ -247,10 +246,7 @@ function mapStateToProps (state) {
 }
 
 function mapDispatchToProps (dispatch) {
-  return {
-    setTermInfo: (instance, visible) => dispatch(setTermInfo(instance, visible )),
-    instanceDeleted : ( type, instance ) => dispatch({ type : type , instance : instance })
-  }
+  return { setTermInfo: (instance, visible) => dispatch(setTermInfo(instance, visible )) }
 }
 
 export default connect(mapStateToProps, mapDispatchToProps)(ListViewerControlsMenu);