#1238 and #1239, adds badges to results and external handler for filter events

.github/workflows/main.yml

@@ -0,0 +1,25 @@
+name: Geppetto Client Workflow
+
+on:
+  push:
+  pull_request:
+  workflow_dispatch:  
+
+jobs:
+  build:
+
+    runs-on: ubuntu-latest
+
+    strategy:
+      matrix:
+        node-version: [10.x, 12.x, 14.x, 15.x]
+
+    steps:
+    - uses: actions/checkout@v2
+    - name: Use Node.js ${{ matrix.node-version }}
+      uses: actions/setup-node@v1
+      with:
+        node-version: ${{ matrix.node-version }}
+    - run: npm ci
+    - run: npm run build --if-present
+    - run: npm run test

__tests__/ModelFactory.test.js

@@ -52,6 +52,16 @@ test('Merge models', () => {
   let diffReport = GEPPETTO.ModelFactory.mergeModel(testModel);
   expect(diffReport.variables.length).toBe(0);
 
+  testModel.worlds[0].instances[0].name = 'aa';
+  testModel.worlds[0].instances[0].value.json = "{\"l\": [\"xx\", \"y\"]}";
+  diffReport = GEPPETTO.ModelFactory.mergeModel(testModel);
+  expect(diffReport.variables.length).toBe(0); // The diffReport is only about new items
+
+  expect(geppettoModel.getCurrentWorld().getInstances()[0].getName()).toBe('aa');
+  expect(geppettoModel.getCurrentWorld().getInstances()[0].getValue().l[0]).toBe('xx');
+  expect(Instances.a.getName()).toBe('aa');
+  expect(Instances.a.getValue().l[0]).toBe('xx');
+
   expect(ModelFactory.allPaths.length).toBe(11);
   GEPPETTO.Manager.addVariableToModel(testModel);
   expect(ModelFactory.allPaths.length).toBe(11);

geppetto-client/js/components/controls/modals/ModalFactory.js

@@ -9,13 +9,7 @@ define(['jquery'], function () {
 
 
   function ModalFactory () {
-    /*
-     * Due to a bootstrap bug, multiple modals can't be open at same
-     * time. This line allows multiple modals to be open
-     * simultaneously without going in an infinite loop.
-     */
-    $.fn.modal.Constructor.prototype.enforceFocus = function () {
-    };
+
   }
 
   ModalFactory.prototype

geppetto-client/js/components/interface/3dCanvas/ThreeDEngine.js

@@ -30,51 +30,50 @@ define(['jquery'], function () {
   THREE.ShaderPass = require('imports-loader?THREE=three!exports-loader?THREE.ShaderPass!three\/examples\/js\/postprocessing\/ShaderPass');
   THREE.FilmPass = require('imports-loader?THREE=three!exports-loader?THREE.FilmPass!three\/examples\/js\/postprocessing\/FilmPass');
 
-  class ThreeDEngine {
-    constructor (container, viewerId) {
-      this.container = container;
-      this.colorController = new (require('./ColorController'))(this);
-      this.viewerId = viewerId;
-      // Engine components
-      this.scene = new THREE.Scene();
-      this.camera = null;
-      this.controls = null;
-      this.renderer = null;
-      this.stats = null;
-      this.projector = null;
-      this.sceneCenter = new THREE.Vector3();
-      this.cameraPosition = new THREE.Vector3();
-      this.mouse = { x: 0, y: 0 };
-      // The content of the scene
-      this.meshes = {};
-      this.splitMeshes = {};
-      this.connectionLines = {};
-      this.visualModelMap = {};
-      this.complexity = 0;
-      this.sceneMaxRadius = 0; // maximum radius of bounding sphere in scene
-      this.linePrecisionMinRadius = 300; // Default expected minimum radius
-      this.minAllowedLinePrecision = 1; // default line precision, can't go lower than this
-      // Settings
-      this.linesThreshold = 2000;
-      this.baseZoom = 1;
-      this.aboveLinesThreshold = false;
-      this.wireframe = false;
-      this.isAnimated = false;
-      this.debugUpdate = false;
-      this.needsUpdate = false;
-      this.pickingEnabled = true; // flag to enable disable 3d picking
-      this.linesUserInput = false;
-      this.linesUserPreference = undefined;
-      this.hoverListeners = undefined;
-      this.THREE = THREE;
-      // Initialisation
-      this.setupCamera();
-      this.setupRenderer();
-      this.setupLights();
-      this.setupControls();
-      this.setupListeners();
-      this.animate();
-    }
+  function ThreeDEngine (container, viewerId) {
+    this.container = container;
+    this.colorController = new (require('./ColorController'))(this);
+    this.viewerId = viewerId;
+    // Engine components
+    this.scene = new THREE.Scene();
+    this.camera = null;
+    this.controls = null;
+    this.renderer = null;
+    this.stats = null;
+    this.projector = null;
+    this.sceneCenter = new THREE.Vector3();
+    this.cameraPosition = new THREE.Vector3();
+    this.mouse = { x: 0, y: 0 };
+    // The content of the scene
+    this.meshes = {};
+    this.splitMeshes = {};
+    this.connectionLines = {};
+    this.visualModelMap = {};
+    this.complexity = 0;
+    this.sceneMaxRadius = 0; // maximum radius of bounding sphere in scene
+    this.linePrecisionMinRadius = 300; // Default expected minimum radius
+    this.minAllowedLinePrecision = 1; // default line precision, can't go lower than this
+    // Settings
+    this.linesThreshold = 2000;
+    this.baseZoom = 1;
+    this.aboveLinesThreshold = false;
+    this.wireframe = false;
+    this.isAnimated = false;
+    this.debugUpdate = false;
+    this.needsUpdate = false;
+    this.pickingEnabled = true; // flag to enable disable 3d picking
+    this.linesUserInput = false;
+    this.linesUserPreference = undefined;
+    this.hoverListeners = undefined;
+    this.THREE = THREE;
+
+    // Initialisation
+    this.setupCamera();
+    this.setupRenderer();
+    this.setupLights();
+    this.setupControls();
+    this.setupListeners();
+    this.animate();
   }
 
 

geppetto-client/js/components/widgets/treevisualiser/treevisualiserdat/controllers/TreeVisualiserControllerDAT.js

@@ -55,7 +55,7 @@ define(function (require) {
           GEPPETTO.WidgetsListener.subscribe(that, id);
 
           // updates helpc command output
-          GEPPETTO.CommandController.updateHelpCommand(tvdat, id, that.getFileComments("geppetto/node_modules/@geppettoengine/geppetto-client/js/components/widgets/treevisualiser/treevisualiserdat/TreeVisualiserDAT.js"));
+          GEPPETTO.CommandController.updateHelpCommand(tvdat, id, that.getFileComments("geppetto/node_modules/@geppettoengine/geppetto-client/components/widgets/treevisualiser/treevisualiserdat/TreeVisualiserDAT.js"));
           // update tags for autocompletion
           GEPPETTO.CommandController.updateTags(tvdat.getId(), tvdat);
 

geppetto-core/src/ModelFactory.js

@@ -914,43 +914,49 @@ export default function (GEPPETTO) {
         const wrappedObj = parent.wrappedObj;
         const diffReportInst = [];
 
+        if (wrappedObj.instances == undefined) {
+          wrappedObj.instances = [];
+        }
+
         for (var x = 0; x < diffInst.length; x++) {
           if (diffInst[x].getWrappedObj().synched == true) {
             // if synch placeholder var, skip it
             continue;
           }
 
-          var match = currentModelInst.find(currModelVar => diffInst[x].getPath() == currModelVar.getPath());
-
-          // if no match, add it, it's actually new
-          if (!match) {
-
-            if (wrappedObj.instances == undefined) {
-              wrappedObj.instances = [];
-            }
-
+          diffInst[x].parent = this.geppettoModel;
+
+          this.populateTypeReferences(diffInst[x]);
+
+          const match = currentModelInst[diffInst[x].getId()];
+          if (match) {
+            const matchIdx = currentModelInst.findIndex(currModelVar => diffInst[x].getPath() == currModelVar.getPath());
+            currentModelInst[matchIdx] = diffInst[x];
+            currentModelInst[match.getId()] = diffInst[x];
+            Instances[match.getId()] = diffInst[x];
+          } else {
+            // if no match, add it, it's actually new
+            diffReportInst.push(diffInst[x]);
             // append variable to raw model
             wrappedObj.instances.push(diffInst[x].getWrappedObj());
 
             // add variable to geppetto object model
-            diffInst[x].parent = this.geppettoModel;
+
             currentModelInst.push(diffInst[x]);
-
-
-            // populate references for new vars
-            this.populateTypeReferences(diffInst[x]);
+
 
             // find new potential instance paths and add to the list
             const newInstancePath = createInstancePathObj(diffInst[x]);
             this.allPaths.push(newInstancePath);
             this.allPathsIndexing.push(newInstancePath);
 
-            diffReportInst.push(diffInst[x]);
-
             // let's populate the shortcut in the parent of the variable, this might not exist if it was a fetch
-            this.geppettoModel[diffInst[x].getId()] = diffInst[x];
+
             // window.Instances.push(diffInst[x]);
+
+            this.geppettoModel[diffInst[x].getId()] = diffInst[x];
           }
+
         }
         return diffReportInst;
       },

geppetto-ui/src/search/Search.tsx

@@ -184,7 +184,7 @@ function StyledCheckbox(props) {
             fontSize: '20px' }}
           className="fa fa-square"
           onClick={() => {
-            props.filterHandler(props.filter);
+            props.filterHandler(props.filter, props.filtersListener);
           }}/>
       );
       break;
@@ -200,7 +200,7 @@ function StyledCheckbox(props) {
             paddingRight: '4px', }}
           className="fa fa-plus-square"
           onClick={() => {
-            props.filterHandler(props.filter);
+            props.filterHandler(props.filter, props.filtersListener);
           }}/>
       );
       break;
@@ -216,7 +216,7 @@ function StyledCheckbox(props) {
             paddingRight: '4px', }}
           className="fa fa-minus-square"
           onClick={() => {
-            props.filterHandler(props.filter);
+            props.filterHandler(props.filter, props.filtersListener);
           }}/>
       );
       break;
@@ -231,14 +231,14 @@ function StyledCheckbox(props) {
             paddingRight: '4px',  }}
           className="fa fa-square"
           onClick={() => {
-            props.filterHandler(props.filter);
+            props.filterHandler(props.filter, props.filtersListener);
           }}/>
       );
       break;
   }
 }
 
-const Results: FC<ResultsProps> = ({ data, mapping, closeHandler, clickHandler, topAnchor, searchStyle }) => {
+const Results: FC<ResultsProps> = ({ data, configuration, closeHandler, clickHandler, topAnchor, searchStyle }) => {
   // if data are available we display the list of results
   if (data == undefined || data.length == 0) return null;
   let clone = Object.assign({}, searchStyle.paperResults);
@@ -249,11 +249,18 @@ const Results: FC<ResultsProps> = ({ data, mapping, closeHandler, clickHandler,
           {data.map((item, index) => {
             return ( <MenuItem style={ searchStyle.singleResult }
               key={index}
+              className="searchResult"
               onClick={() => {
-                clickHandler(item[mapping["id"]]);
+                clickHandler(item);
                 closeHandler(false);
               }}>
-              {item[mapping["name"]]}
+              {configuration.label_manipulation ? configuration.label_manipulation(item[configuration.resultsMapping["name"]]) : item[configuration.resultsMapping["name"]]}
+              { item[configuration.resultsMapping["labels"]] && <span className="label types badges">
+                {item[configuration.resultsMapping["labels"]].map((label, index) => {
+                	return <span className={"label label-" + label}>{label}</span>;
+                })}
+              </span>
+              }
             </MenuItem> );
           })}
         </MenuList>
@@ -268,7 +275,7 @@ const Results: FC<ResultsProps> = ({ data, mapping, closeHandler, clickHandler,
  * @param openFilters: Function
  */
 
-const Filters: FC<FiltersProps> = ({ filters, searchStyle, setFilters, openFilters, filters_expanded }) => {
+const Filters: FC<FiltersProps> = ({ filters, searchStyle, filtersListener, setFilters, openFilters, filters_expanded }) => {
   var paperRef = useRef(null);
   const [ state, setState ] = useState({ open: filters_expanded, top: "0", left: "0" });
 
@@ -289,7 +296,7 @@ const Filters: FC<FiltersProps> = ({ filters, searchStyle, setFilters, openFilte
     }
   };
 
-  const filterHandler = item => {
+  const filterHandler = (item, filtersListener) => {
     if (item.enabled === undefined) {
       item.enabled = "disabled"
     } else {
@@ -315,6 +322,7 @@ const Filters: FC<FiltersProps> = ({ filters, searchStyle, setFilters, openFilte
       });
     }
     setFilters(item);
+    filtersListener(item);
     setState(() => { return { open: true, top: state.top, left: state.left} });
   };
 
@@ -360,6 +368,7 @@ const Filters: FC<FiltersProps> = ({ filters, searchStyle, setFilters, openFilte
                       <StyledCheckbox
                         filter={item}
                         checked={item.enabled}
+                        filtersListener={filtersListener}
                         filterHandler={filterHandler} />
                       <span>
                         {item.filter_name}
@@ -374,6 +383,7 @@ const Filters: FC<FiltersProps> = ({ filters, searchStyle, setFilters, openFilte
                       : <StyledCheckbox
                           filter={item}
                           checked={item.enabled}
+                          filtersListener={filtersListener}
                           filterHandler={filterHandler} /> }
                       <span>
                         {item.filter_name}
@@ -385,6 +395,7 @@ const Filters: FC<FiltersProps> = ({ filters, searchStyle, setFilters, openFilte
                             <StyledCheckbox
                               filter={value}
                               checked={value.enabled}
+                              filtersListener={filtersListener}
                               filterHandler={filterHandler} />
                             <span style={{verticalAlign: "middle"}}>
                               {value.filter_name}
@@ -448,6 +459,7 @@ class Search extends Component<SearchProps, SearchState> {
     private getResults: Function;
     private resultsHeight: number;
     private inputRef: any;
+    private datasourceConfiguration: any;
 
     constructor (props: SearchProps) {
         super(props);
@@ -466,11 +478,15 @@ class Search extends Component<SearchProps, SearchState> {
         this.resultsHeight = 0;
 
         this.openSearch = this.openSearch.bind(this);
+        this.clickHandler = this.clickHandler.bind(this);
         this.setFilters = this.setFilters.bind(this);
         this.escFunction = this.escFunction.bind(this);
         this.handleResize = this.handleResize.bind(this);
         this.handleResults = this.handleResults.bind(this);
         this.handleClickOutside = this.handleClickOutside.bind(this);
+        this.filterSelection = this.filterSelection.bind(this);
+        this.lookupFilter = this.lookupFilter.bind(this);
+        this.datasourceConfiguration = JSON.parse(JSON.stringify(props.datasourceConfiguration));
       };
 
       // literal object to extract the getter function based on the datasource we pick
@@ -492,6 +508,23 @@ class Search extends Component<SearchProps, SearchState> {
           event.stopPropagation();
         }
       }
+
+      clickHandler(result) {
+        const id = result[this.props.searchConfiguration.resultsMapping["id"]];
+        let shortForm = result && result.short_form;
+        let self = this;
+        if ( self.props.searchConfiguration.Neo4jLabels ) {
+          const neo4jLabels = Object.values(self.props.searchConfiguration.Neo4jLabels);
+          result.facets_annotation.forEach( annotation => {
+            let facet = "facets_annotation:" + annotation;
+            if ( neo4jLabels.includes(annotation) && !self.datasourceConfiguration.query_settings.fq.includes(facet) ) {
+              self.datasourceConfiguration.query_settings.fq.push(facet); 
+            }
+          });
+        }
+
+        this.props.searchConfiguration.clickHandler(id);
+      }
 
       // results handler, the name says everything
       handleResults(status:string, data:any, value:string) {
@@ -606,7 +639,7 @@ class Search extends Component<SearchProps, SearchState> {
         this.getResults(e.target.value,
                         this.handleResults,
                         this.props.searchConfiguration.sorter,
-                        this.props.datasourceConfiguration);
+                        this.datasourceConfiguration);
       };
 
       handleResize() {
@@ -656,6 +689,43 @@ class Search extends Component<SearchProps, SearchState> {
       componentWillMount() {
         this.getResults = this.getDatasource[this.props.datasource]
       };
+
+      lookupFilter (item, bq, filterValue){
+        let lookup = "facets_annotation:" + item.key;
+        let re = new RegExp(lookup, 'g');
+        let found = bq.match(re);
+        if ( found ){
+          return bq.replace(found[0] + filterValue, "");
+        }
+        return bq;
+      }
+
+      filterSelection (item) {    
+        let bq = this.datasourceConfiguration.query_settings.bq;
+
+        switch (item.enabled) {
+          case "disabled":
+            bq = this.lookupFilter(item, bq, this.props.searchConfiguration.filter_positive);
+            bq = this.lookupFilter(item, bq, this.props.searchConfiguration.filter_negative);
+            break;
+          case "positive":
+            bq = this.lookupFilter(item, bq, this.props.searchConfiguration.filter_negative);
+            bq += " facets_annotation:" + item.key + "^100";
+            break;
+          case "negative":
+            bq = this.lookupFilter(item, bq, this.props.searchConfiguration.filter_positive);
+            bq += " facets_annotation:" + item.key + "^0.001";
+            break;
+          default:
+            break;
+        }
+        Object.assign(this.datasourceConfiguration , {
+          query_settings : {
+            ...this.datasourceConfiguration.query_settings,
+            bq : bq
+          }
+        });        
+      }
 
       render() {
         if (!this.state.isOpen) {
@@ -683,6 +753,7 @@ class Search extends Component<SearchProps, SearchState> {
                       <InputAdornment position="end">
                         <Filters
                           filters_expanded={this.props.searchConfiguration.filters_expanded}
+                          filtersListener={this.filterSelection}
                           searchStyle={searchStyle}
                           filters={this.state.filters}
                           setFilters={this.setFilters} />
@@ -696,9 +767,9 @@ class Search extends Component<SearchProps, SearchState> {
                     <Results
                       data={filteredResults}
                       searchStyle={searchStyle}
-                      mapping={this.props.searchConfiguration.resultsMapping}
+                      configuration={this.props.searchConfiguration}
                       closeHandler={this.openSearch}
-                      clickHandler={this.props.searchConfiguration.clickHandler}
+                      clickHandler={this.clickHandler}
                       topAnchor={this.resultsHeight} />
                   </Grid>
                 </Grid>

geppetto-ui/src/search/SearchInterfaces.ts

@@ -3,6 +3,7 @@ export interface SearchProps {
     searchConfiguration: any,
     datasourceConfiguration: any;
     searchStyle?: any;
+    filtersListener? : any;
     customDatasourceHandler?: Function
 };
 
@@ -14,7 +15,7 @@ export interface SearchState {
 
 export interface ResultsProps {
   data: Array<any>;
-  mapping: any;
+  configuration: any;
   closeHandler: Function;
   clickHandler: Function;
   topAnchor: number;
@@ -24,7 +25,8 @@ export interface ResultsProps {
 export interface FiltersProps {
     filters: Array<any>;
     searchStyle?: any;
+    filtersListener? : any;
     filters_expanded?: Boolean;
     setFilters: Function;
     openFilters?: Function;
-}
+}

geppetto-ui/src/search/style/search.less

@@ -9,6 +9,17 @@
     margin-right: -8px;
 }
 
+#searchInput{
+    display: inline-block;
+    font-size: 25px !important;
+    line-height: 18px ;
+    color: #808080;
+    border:none !important;
+    -webkit-border-radius: 0px !important;
+    -moz-border-radius: 0px !important;
+    box-shadow:  none !important
+}
+
 #paperFilters {
     user-select: none;
     -moz-user-select: none;
@@ -28,3 +39,12 @@
     display: -webkit-flex;
     display: flex;
 }
+
+.badges {
+	margin : .6rem 0 0 0 !important;
+}
+
+.searchResult {
+	display : block !important;
+	width : 100% !important;
+}