@abi-software/scaffoldvuer 0.2.2 → 0.2.3-alpha

package/src/scripts/search.js

@@ -1,153 +1,182 @@
-/******************************************************************************
-
-Flatmap viewer and annotation tool
-
-Copyright (c) 2019  David Brooks
-
-Licensed under the Apache License, Version 2.0 (the "License");
-you may not use this file except in compliance with the License.
-You may obtain a copy of the License at
-
-    http://www.apache.org/licenses/LICENSE-2.0
-
-Unless required by applicable law or agreed to in writing, software
-distributed under the License is distributed on an "AS IS" BASIS,
-WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-See the License for the specific language governing permissions and
-limitations under the License.
-
-******************************************************************************/
-
-
-//==============================================================================
-
-import MiniSearch from 'minisearch';
-
-//==============================================================================
-
-// The properties of a feature we index and show
-
-export const indexedProperties = [
-    'label',
-    'models',
-    'source'
-];
-
-//==============================================================================
-
-export class SearchIndex
-{
-    constructor()
-    {
-        this._searchEngine =  new MiniSearch({
-            fields: ['groupName'],
-            storeFields: ['groupName'],
-            tokenize: (string, _fieldName) => string.split('"'), // indexing tokenizer
-        });
-        this._featureIds = [];
-        this.zincObjects = [];
-    }
-
-    indexMetadata(featureId, metadata)
-    //================================
-    {
-        const textSeen = [];
-        for (const prop of indexedProperties) {
-            if (prop in metadata) {
-                const text = metadata[prop];
-                if (!textSeen.includes(text)) {
-                    this.addTerm_(featureId, text);
-                    textSeen.push(text);
-                }
-            }
-        }
-    }
-
-    addZincObject(zincObject, id)
-    //=======================
-    {
-        const item = { groupName: zincObject.groupName, id };
-        this._searchEngine.add(item, {fields: ['groupName']});
-        this.zincObjects.push(zincObject);
-    }
-
-    clearResults()
-    //============
-    {
-        this._;
-    }
-
-    removeAll()
-    //=======================
-    {
-        this._searchEngine.removeAll();
-        this.zincObjects.length = 0;
-    }
-
-    auto_suggest(text)
-    //================
-    {
-        return this._searchEngine.autoSuggest(text, {prefix: true});
-    }
-
-    search(text){
-        let results = this._searchEngine.search(text, {prefix: true});
-        let zincResults = this.zincObjects.filter(zincObject => results.map(r => r.id).includes(zincObject.searchIndexId));
-        return zincResults;
-    }
-
-    searchTerms(terms){
-      let results = [];
-      terms.forEach(term => {
-        const result = this.search(term);
-        results.push(...result);
-      });
-    
-      return results;
-    }
-
-    // search(text)
-    // //==========
-    // {
-    //     const options = {};
-    //     let results = [];
-    //     text = text.trim()
-    //     if (text.length > 2 && ["'", '"'].indexOf(text.slice(0, 1)) >= 0) {
-    //         text = text.replaceAll(text.slice(0, 1), '');
-    //         results = this._searchEngine.search(text, {prefix: true, combineWith: 'AND'});
-    //     } else if (text.length > 1) {
-    //         results = this._searchEngine.search(text, {prefix: true});
-    //     }
-    //     const featureResults = results.map(r => {
-    //         return {
-    //             featureId: this._featureIds[r.id],
-    //             score: r.score,
-    //             terms: r.terms,
-    //             text: r.text
-    //         }});
-    //     return new SearchResults(featureResults);
-    // }
-}
-
-//==============================================================================
-
-class SearchResults
-{
-    constructor(results)
-    {
-        this.__results = results.sort((a, b) => (b.score - a.score));
-        this.__featureIds = results.map(r => r.featureId);
-    }
-
-    get featureIds()
-    {
-        return this.__featureIds;
-    }
-
-    get results()
-    {
-        return this.__results;
-    }
-}
-
-//==============================================================================
+/******************************************************************************
+
+Flatmap viewer and annotation tool
+
+Copyright (c) 2019  David Brooks
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+
+******************************************************************************/
+
+
+//==============================================================================
+
+import MiniSearch from 'minisearch';
+
+import { createUnqiuesFromObjects } from './utilities';
+
+//==============================================================================
+
+// The properties of a feature we index and show
+
+export const indexedProperties = [
+    'label',
+    'models',
+    'source'
+];
+
+//==============================================================================
+
+export class SearchIndex
+{
+    constructor()
+    {
+        this._searchEngine =  new MiniSearch({
+            fields: ['path', 'name'],
+            storeFields: ['path'],
+            tokenize: (string, _fieldName) => string.split('"'), // indexing tokenizer
+        });
+        this._featureIds = [];
+        this.zincObjects = [];
+        this.regions = [];
+    }
+
+    indexMetadata(featureId, metadata)
+    //================================
+    {
+        const textSeen = [];
+        for (const prop of indexedProperties) {
+            if (prop in metadata) {
+                const text = metadata[prop];
+                if (!textSeen.includes(text)) {
+                    this.addTerm_(featureId, text);
+                    textSeen.push(text);
+                }
+            }
+        }
+    }
+
+    addZincObject(zincObject, id)
+    //=======================
+    {
+        const path = zincObject.getRegion().getFullPath();
+        const fullPath = path ? `${path}/${zincObject.groupName}` : zincObject.groupName;
+        const item = { path: fullPath, name: zincObject.groupName, id };
+        this._searchEngine.add(item, {fields: ['path', 'name']});
+        this.zincObjects.push(zincObject);
+    }
+
+    addRegion(region, id)
+    //=======================
+    {
+        const item = { path: region.getFullPath(), name: region.getName(), id };
+        this._searchEngine.add(item, {fields: ['path', 'name']});
+        this.regions.push(region);
+    }
+
+    clearResults()
+    //============
+    {
+        this._;
+    }
+
+    removeAll()
+    //=======================
+    {
+        this._searchEngine.removeAll();
+        this.zincObjects.length = 0;
+        this.regions.length = 0;
+    }
+
+    auto_suggest(text)
+    //================
+    {
+        const results = this._searchEngine.autoSuggest(text, {prefix: true});
+        return results;
+    }
+
+    processResults(zincObjects, searchText) {
+      const result = {
+        regionPath: undefined,
+        label: `Search Results for \"`,
+      };
+      if (Array.isArray(searchText)) {
+        result.label += ','.join(searchText);
+      } else {
+        result.label += searchText;
+      }
+      result.label += `\"`;
+      if (zincObjects.length === 1) {
+        if (zincObjects[0].isRegion) {
+          result.regionPath = zincObjects[0].getFullPath();
+        } else if (zincObjects[0].isZincObject) {
+          result.regionPath = zincObjects[0].getRegion().getFullPath();
+          result.label = zincObjects[0].groupName;
+        }
+      }
+      result["zincObjects"] = createUnqiuesFromObjects(zincObjects);
+      return result;
+    } 
+
+    search(text) {
+        const results = this._searchEngine.search(text, {prefix: true});
+        const zincResults = this.zincObjects.filter(zincObject => results.map(r => r.id).includes(zincObject.uuid));
+        const regionResults = this.regions.filter(region => results.map(r => r.id).includes(region.uuid));
+        zincResults.push(...regionResults);
+        return zincResults;
+    }
+
+    searchTerms(terms) {
+      let results = [];
+      terms.forEach(term => {
+        const result = this.search(term);
+        results.push(...result);
+      });
+    
+      return results;
+    }
+
+    searchAndProcessResult(terms) {
+      let zincObjectResults = [];
+      if (Array.isArray(terms)) {
+        zincObjectResults = this.searchTerms(terms);
+      } else {
+        zincObjectResults = this.search(terms);
+      }
+      return this.processResults(zincObjectResults, terms);
+    }
+
+}
+
+//==============================================================================
+
+class SearchResults
+{
+    constructor(results)
+    {
+        this.__results = results.sort((a, b) => (b.score - a.score));
+        this.__featureIds = results.map(r => r.featureId);
+    }
+
+    get featureIds()
+    {
+        return this.__featureIds;
+    }
+
+    get results()
+    {
+        return this.__results;
+    }
+}
+
+//==============================================================================

package/src/scripts/utilities.js

@@ -1,43 +1,146 @@
-export const createListFromPrimitives = (primitives, list) => {
-  if (primitives) {
-    primitives.forEach(primitive => {
-      if (primitive && primitive.getVisibility()) {
-        list.push({
-          group: primitive.groupName,
-          regionPath: primitive.region.getFullPath()
-        });
-      }
-    });
-  }
-  return list;
-}
-
-export const extractAllIds = (item, list) => {
-  list.push(item.id);
-  if (item.children)
-    item.children.forEach(child => extractAllIds(child, list));
-}
-
-export const findObjectsWithNames = (rootRegion, names, regionPath, transverse) => {
-  let targetRegion = rootRegion;
-  const targetObjects = [];
-  if (regionPath)
-    targetRegion = rootRegion.findChildFromPath(regionPath);
-  if (targetRegion) {
-    const isArray = Array.isArray(names);
-    let array = names;
-    if (!isArray)
-      array = [array];
-      array.forEach(name => {
-      const temp = targetRegion.findObjectsWithGroupName(name, transverse);
-      targetObjects.push(...temp);
-    });
-  }
-  return targetObjects;
-}
-
-export const getAllObjects = (scene) => {
-  let objects = scene.getRootRegion().getAllObjects(true);
-  let id = 1;
-  return objects.map(object => Object.assign(object, { id: id++ })); // Add id to each object
-}
+export const createListFromPrimitives = (primitives, list) => {
+  if (primitives) {
+    let id = "";
+    primitives.forEach(primitive => {
+      id = primitive.uuid;
+      if (primitive.region) {
+        id = primitive.region.uuid + "/" + id;
+      }
+      if (primitive && primitive.getVisibility()) {
+        list.push(id);
+      }
+    });
+  }
+  return list;
+}
+
+export const extractAllFullPaths = (item, list) => {
+  let nodeName = "";
+  if (item.isRegion) {
+    nodeName = `__r${item.regionPath}`;
+  }
+  if (item.isPrimitives) {
+    nodeName = `${item.regionPath}/${item.label}`;
+  }
+  list.push(nodeName);
+  if (item.children)
+    item.children.forEach(child => extractAllFullPaths(child, list));
+}
+
+export const findObjectsWithNames = (rootRegion, names, regionPath, transverse) => {
+  let targetRegion = rootRegion;
+  const targetObjects = [];
+  if (regionPath)
+    targetRegion = rootRegion.findChildFromPath(regionPath);
+  if (targetRegion) {
+    const isArray = Array.isArray(names);
+    let array = names;
+    if (!isArray) {
+      array = [array];
+    }
+    array.forEach(name => {
+      const temp = targetRegion.findObjectsWithGroupName(name, transverse);
+      targetObjects.push(...temp);
+    });
+  }
+  return targetObjects;
+}
+
+export const getAllObjects = (scene) => {
+  let objects = scene.getRootRegion().getAllObjects(true);
+  let id = 1;
+  return objects.map(object => Object.assign(object, { id: id++ })); // Add id to each object
+}
+
+const findObjectWithUUID = (objects, uuid, remove) => {
+  const index = objects.findIndex(obj => obj.uuid === uuid);
+  let object = undefined;
+  if (index > -1) {
+    object = objects[index];
+    if (remove) {
+      objects.splice(i, 1);
+    }
+  }
+  return object;
+}
+
+export const convertUUIDsToFullPaths = (rootRegion, IDs) => {
+  const results = [];
+  if (rootRegion && IDs && IDs.length > 0) {
+    //a region to primitivs map list
+    const rpLists = {};
+    const reIDToPath = {};
+    const allRegions = [rootRegion, ...rootRegion.getChildRegions(true)];
+    let region = undefined;
+    let primitive = undefined;
+    let regionID = undefined;
+    
+    IDs.forEach(id => {
+      const uuids = id.split("/");
+      regionID = uuids[0];
+      region = findObjectWithUUID(allRegions, regionID, false);
+      if (region) {
+        if (!reIDToPath[regionID]) {
+          reIDToPath[regionID] = region.getFullPath();
+        }
+        if (uuids[1]) {
+          if (!rpLists[regionID]) {
+            rpLists[regionID] = region.getAllObjects(false);
+          }
+          primitive = findObjectWithUUID(rpLists[regionID], uuids[1], true);
+          if (primitive) {
+            results.push(`${reIDToPath[regionID]}/${primitive.groupName}`);
+          }
+        } else {
+          results.push(`__r/${reIDToPath[regionID]}`);
+        }
+      }
+    });
+  }
+  return results;
+}
+
+export const createUnqiuesFromObjects = (zincObjects) => {
+  if (zincObjects) {
+    const expanded = [];
+    zincObjects.forEach(obj => {
+      if (obj.isZincObject) {
+        expanded.push(obj);
+      } else if (obj.isRegion) {
+        expanded.push(...obj.getAllObjects(true));
+      }
+    });
+    const uniq = Object.values(
+      expanded.reduce((acc, obj) => ({ ...acc, [obj.uuid]: obj }), {})
+    );
+    return uniq;
+  }
+  return [];
+}
+
+export const getObjectsFromAnnotations = (scene, annotations) => {
+  const returned = {label: "Multiple selections", regionPath: "", objects: []};
+  if (annotations && scene) {
+    const rpList = {};
+    const rootRegion = scene.getRootRegion();
+    if (annotations.length > 0) {
+      returned.regionPath = annotations[0].data.region;
+      returned.label = annotations[0].data.group;
+    }
+    annotations.forEach(annotation => {
+      if (!annotation.data.region.includes(returned.regionPath)) {
+        returned.regionPath = "";
+      }
+      if (returned.label !== annotation.data.group) {
+        returned.label = "Multiple selections";
+      }
+      const region = rootRegion.findChildFromPath(annotation.data.region);
+      if (!rpList[region.uuid]) {
+        rpList[region.uuid] = region.getAllObjects(false);
+      }
+      const obj = findObjectWithUUID(rpList[region.uuid], annotation.data.uuid);
+      if (obj) returned.objects.push(obj);
+    });
+  }
+  return returned;
+}

package/src/searchControls.vue

@@ -0,0 +1,122 @@
+<template>
+  <div class="search-container">
+    <div class="text search-text">
+      Search within display
+    </div>
+    <el-autocomplete class="search-box" placeholder="Search"
+      v-model="searchText"
+      :fetch-suggestions="fetchSuggestions"
+      @keyup.enter.native="$emit('search', searchText)"
+      @select="$emit('search', $event.value)"
+      :popper-append-to-body=false
+      popper-class="autocomplete-popper">
+    </el-autocomplete>
+    <map-svg-icon icon="magnifyingGlass" class="magnify"
+      @click.native="$emit('search', searchText)"/>
+    <div v-if="failedSearch" class="text not-found-text">
+      '{{failedSearch}}' not found
+    </div>
+  </div>
+</template>
+
+<script>
+/* eslint-disable no-alert, no-console */
+import Vue from "vue";
+import { MapSvgIcon } from '@abi-software/svg-sprite';
+import { Autocomplete } from "element-ui";
+import lang from "element-ui/lib/locale/lang/en";
+import locale from "element-ui/lib/locale";
+
+locale.use(lang);
+Vue.use(Autocomplete);
+
+export default {
+  name: "SearchControls",
+  props: {
+    failedSearch: undefined,
+  },
+  components: {
+    MapSvgIcon,
+  },
+  methods: {
+    fetchSuggestions: function(term, cb) {
+      if (term === "") {
+        cb([]);
+      } else {
+        this.$emit('fetch-suggestions', { term, cb });
+      }
+    },
+  },
+  data: function () {
+    return {
+      searchText: "",
+    };
+  },
+};
+</script>
+
+<!-- Add "scoped" attribute to limit CSS to this component only -->
+<style scoped lang="scss">
+@import "~element-ui/packages/theme-chalk/src/autocomplete";
+
+.search-container {
+  display:flex;
+  flex-direction: row;
+
+  .text {
+    margin-left: 8px;
+    margin-top: 7px;
+    font-weight: 500;
+    -moz-user-select: none;
+    -webkit-user-select: none;
+    -ms-user-select: none;
+    user-select: none;
+    line-height:18px;
+  }
+  .search-text {
+    margin-top: 8px;
+    color: $grey;
+    font-size: 14px;
+    margin-left: 1rem;
+  }
+  .not-found-text {
+    margin-top: 8px;
+    color: $warning;
+    font-size: 0.8rem;
+    margin-left: 0.5rem;
+  }
+  .search-box {
+    margin-top: 2px;
+    margin-left:0.5rem;
+    height:28px;
+    width:137px;
+    ::v-deep .el-input__inner {
+      background-color: $background;
+      height:28px;
+      line-height:28px;
+      border: 1px solid rgb(144, 147, 153);
+      border-radius: 4px;
+      &:focus {
+        border-color: $app-primary-color;
+      }
+    }
+  }
+  .magnify {
+    margin-top: 2px;
+    margin-left:0.5rem;
+    background: $app-primary-color;
+    border-radius: 4px;
+    height:28px;
+    width:28px;
+    cursor: pointer;
+    &:hover {
+      box-shadow: -3px 2px 4px 0 rgba(0,0,0,0.25);
+    }
+  }
+  ::v-deep .autocomplete-popper {
+    min-width:137px!important;
+    width: auto!important;
+  }
+}
+
+</style>