@abi-software/map-side-bar 1.5.0 → 1.5.2

package/package.json

@@ -1,75 +1,75 @@
-{
-  "name": "@abi-software/map-side-bar",
-  "version": "1.5.0",
-  "main": "./dist/map-side-bar.common.js",
-  "files": [
-    "dist/*",
-    "src/*",
-    "public/*",
-    "*.json",
-    "*.js"
-  ],
-  "scripts": {
-    "serve": "vue-cli-service serve --port 8081",
-    "build-bundle": "vue-cli-service build --target lib --name map-side-bar ./src/components/index.js ",
-    "build": "vue-cli-service build",
-    "lint": "vue-cli-service lint",
-    "start": "vue-cli-service serve",
-    "release:beta": "npm version prerelease --preid=beta; npm publish --tag beta",
-    "release:minor": "npm version minor; npm publish",
-    "release:patch": "npm version patch;  npm publish",
-    "changelog": "auto-changelog -p --output CHANGELOG.md --template keepachangelog",
-    "version": "npm run build-bundle;npm run changelog; git add CHANGELOG.md"
-  },
-  "dependencies": {
-    "@abi-software/gallery": "^0.4.1-beta.1",
-    "@abi-software/svg-sprite": "^0.2.0",
-    "algoliasearch": "^4.10.5",
-    "element-ui": "^2.13.0",
-    "marked": "^4.1.1",
-    "vue": "^2.6.10",
-    "xss": "^1.0.14"
-  },
-  "devDependencies": {
-    "@vue/cli-plugin-babel": "^4.0.0",
-    "@vue/cli-plugin-eslint": "^4.0.0",
-    "@vue/cli-service": "^4.0.0",
-    "auto-changelog": "^2.4.0",
-    "babel-eslint": "^10.0.3",
-    "babel-plugin-component": "^1.1.1",
-    "eslint": "^5.16.0",
-    "eslint-plugin-vue": "^5.0.0",
-    "file-loader": "^5.0.2",
-    "node-sass": "^4.14.1",
-    "raw-loader": "^0.5.1",
-    "sass-loader": "^8.0.2",
-    "transform-loader": "^0.2.4",
-    "typescript": "^4.4.3",
-    "vue-custom-element": "^3.3.0",
-    "vue-template-compiler": "^2.6.10",
-    "webpack-node-externals": "^2.5.2"
-  },
-  "eslintConfig": {
-    "root": true,
-    "env": {
-      "node": true
-    },
-    "extends": [
-      "plugin:vue/essential",
-      "eslint:recommended"
-    ],
-    "rules": {},
-    "parserOptions": {
-      "parser": "babel-eslint"
-    }
-  },
-  "postcss": {
-    "plugins": {
-      "autoprefixer": {}
-    }
-  },
-  "browserslist": [
-    "> 1%",
-    "last 2 versions"
-  ]
-}
+{
+  "name": "@abi-software/map-side-bar",
+  "version": "1.5.2",
+  "main": "./dist/map-side-bar.common.js",
+  "files": [
+    "dist/*",
+    "src/*",
+    "public/*",
+    "*.json",
+    "*.js"
+  ],
+  "scripts": {
+    "serve": "vue-cli-service serve --port 8081",
+    "build-bundle": "vue-cli-service build --target lib --name map-side-bar ./src/components/index.js ",
+    "build": "vue-cli-service build",
+    "lint": "vue-cli-service lint",
+    "start": "vue-cli-service serve",
+    "release:beta": "npm version prerelease --preid=beta; npm publish --tag beta",
+    "release:minor": "npm version minor; npm publish",
+    "release:patch": "npm version patch;  npm publish",
+    "changelog": "auto-changelog -p --output CHANGELOG.md --template keepachangelog",
+    "version": "npm run build-bundle;npm run changelog; git add CHANGELOG.md"
+  },
+  "dependencies": {
+    "@abi-software/gallery": "^0.4.1-beta.1",
+    "@abi-software/svg-sprite": "^0.2.0",
+    "algoliasearch": "^4.10.5",
+    "element-ui": "^2.13.0",
+    "marked": "^4.1.1",
+    "vue": "^2.6.10",
+    "xss": "^1.0.14"
+  },
+  "devDependencies": {
+    "@vue/cli-plugin-babel": "^4.0.0",
+    "@vue/cli-plugin-eslint": "^4.0.0",
+    "@vue/cli-service": "^4.0.0",
+    "auto-changelog": "^2.4.0",
+    "babel-eslint": "^10.0.3",
+    "babel-plugin-component": "^1.1.1",
+    "eslint": "^5.16.0",
+    "eslint-plugin-vue": "^5.0.0",
+    "file-loader": "^5.0.2",
+    "node-sass": "^4.14.1",
+    "raw-loader": "^0.5.1",
+    "sass-loader": "^8.0.2",
+    "transform-loader": "^0.2.4",
+    "typescript": "^4.4.3",
+    "vue-custom-element": "^3.3.0",
+    "vue-template-compiler": "^2.6.10",
+    "webpack-node-externals": "^2.5.2"
+  },
+  "eslintConfig": {
+    "root": true,
+    "env": {
+      "node": true
+    },
+    "extends": [
+      "plugin:vue/essential",
+      "eslint:recommended"
+    ],
+    "rules": {},
+    "parserOptions": {
+      "parser": "babel-eslint"
+    }
+  },
+  "postcss": {
+    "plugins": {
+      "autoprefixer": {}
+    }
+  },
+  "browserslist": [
+    "> 1%",
+    "last 2 versions"
+  ]
+}

package/public/index.html

@@ -1,17 +1,17 @@
-<!DOCTYPE html>
-<html lang="en">
-  <head>
-    <meta charset="utf-8">
-    <meta http-equiv="X-UA-Compatible" content="IE=edge">
-    <meta name="viewport" content="width=device-width,initial-scale=1.0">
-    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
-    <title>Map Sidebar</title>
-  </head>
-  <body>
-    <noscript>
-      <strong>We're sorry but scaffoldvuer doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
-    </noscript>
-    <map-side-bar></map-side-bar>
-    <!-- built files will be auto injected -->
-  </body>
-</html>
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width,initial-scale=1.0">
+    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
+    <title>Map Sidebar</title>
+  </head>
+  <body>
+    <noscript>
+      <strong>We're sorry but scaffoldvuer doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
+    </noscript>
+    <map-side-bar></map-side-bar>
+    <!-- built files will be auto injected -->
+  </body>
+</html>

package/src/App.vue

@@ -1,164 +1,164 @@
-<template>
-  <div id="app">
-    <link rel="stylesheet"
-      href="https://fonts.googleapis.com/css?family=Asap:400,400i,500,600,700&display=swap">
-    Click arrow to open sidebar
-    <el-button @click="openSearch">search Uberon from refs</el-button>
-    <el-button @click="singleFacets">Add heart to Filter</el-button>
-    <el-button @click="addStomach">Add stomach to Filter</el-button>
-    <el-button @click="addInvalidTerm">Add invalid term to Filter</el-button>
-    <el-button @click="multiFacets">multiple facets</el-button>
-    <el-button @click="neuronSearch">open neuron search</el-button>
-    <el-button @click="keywordSearch">keyword search</el-button>
-    <el-button @click="getFacets">Get facets</el-button>
-    <SideBar :envVars="envVars" class="side-bar" ref="sideBar" :visible="sideBarVisibility"
-      :tabs="tabs" :activeId="activeId" @tabClicked="tabClicked"
-      @search-changed="searchChanged($event)" @actionClick="action"/>
-  </div>
-</template>
-
-<script>
-/* eslint-disable no-alert, no-console */
-// optionally import default styles
-import SideBar from './components/SideBar'
-import EventBus from './components/EventBus'
-
-// let testContext = {
-//   "description": "3D digital tracings of the enteric plexus obtained from seven subjects (M11, M16, M162, M163, M164, M168) are mapped randomly on mouse proximal colon. The data depicts individual neural wiring patterns in enteric microcircuits, and revealed both neuron and fiber units wired in a complex organization.",
-//   "heading": "Digital tracings of enteric plexus",
-//   "id": "sparc.science.context_data",
-//   "samples": [
-//     {
-//       "annotation": "",
-//       "description": "Neuronal soma and fibers in a myenteric ganglion in this subject are annotated into the following groups to highlight their interactions:\n\nNeuron1,2,3 Connex: Connections between 3 neurons and cross-ganglionic fibers\n\nNeuron4_Connex: A small neuron contacts fibers passing the ganglion\n\nNeuron5: Multiple projections of a neuron in an myenteric ganglion\n\nNeuron5,3,7 Connex: Connections between 3 neurons, nerve fibers, IGNEx (complex type of intraganglionic nerve endings) and fibers in the circular muscles.\n\nNeuron8,9,10 Connex: Connections of 3 neurons with each other and with long passing fibers. \n\nIntraganglionic Nerve Ending (IGNE): Digital traces of neurites consist of complex intraganglionic nerve endings. The blue fiber has branched terminals, more likely the afferent nerve endings; the violet and cyan terminals also interweave into the fiber nest; the orange, pink and peach fibers and one process of the neuron cross the IGNE to make 1-2 conjunctions. \n",
-//       "doi": "",
-//       "heading": "Digital tracing for subject M11",
-//       "id": "Sample 1",
-//       "path": "files/derivative/sub-M11/sam-pCm11/digital-traces/pC PHPS XFP M11 20XZ 180425_180713_2_NL_20.xml",
-//       "view": "View 1"
-//     },
-//     {
-//       "annotation": "",
-//       "description": "This digital trace demonstrates some types of wiring. A long process of the green neuron terminates in the intraganglionic nerve endings (IGNE) while in contact with a nerve fiber (cyan),  soma of a neuron (peach) and processes of 3 neurons (magenta, yellow and red). Two neurons and one fiber are traced to an IGNE. ",
-//       "doi": "",
-//       "heading": "Digital tracing for subject M16",
-//       "id": "Sample 2",
-//       "path": "files/derivative/sub-M16/sam-pCm16/digital-traces/pC PHPS XFP M16 20XZ 180425_180524.xml",
-//       "view": "View 2"
-//     }
-//   ],
-//   "version": "0.1.0",
-//   "views": [
-//     {
-//       "annotation": "--",
-//       "description": "Digital tracing of neurons for subject M11.",
-//       "id": "View 1",
-//       "path": "files/derivative/Scaffolds/M11_view.json",
-//       "sample": "Sample 1",
-//       "thumbnail": "files/derivative/Scaffolds/M11_thumbnail.jpeg"
-//     },
-//     {
-//       "annotation": "--",
-//       "description": "Digital tracing of neurons for subject M16.",
-//       "id": "View 2",
-//       "path": "files/derivative/Scaffolds/M16_view.json",
-//       "sample": "Sample 2",
-//       "thumbnail": "files/derivative/Scaffolds/M16_thumbnail.jpeg"
-//     }
-//   ]
-// }
-export default {
-  name: 'app',
-  components: {
-    SideBar
-  },
-  computed: {
-    tabs: function(){
-      let temp = [...this.tabArray]
-      for(let i in this.tabArray){
-        temp[i].contextCard = this.contextArray[i]
-      }
-      return temp
-    }
-  },
-  data: function(){
-    return {
-      tabArray: [{title: 'Flatmap', id:1}],
-      contextArray: [null,null,null],
-      sideBarVisibility: true,
-      envVars: {
-        API_LOCATION: process.env.VUE_APP_API_LOCATION,
-        ALGOLIA_KEY: process.env.VUE_APP_ALGOLIA_KEY,
-        ALGOLIA_ID: process.env.VUE_APP_ALGOLIA_ID,
-        ALGOLIA_INDEX: process.env.VUE_APP_ALGOLIA_INDEX,
-        PENNSIEVE_API_LOCATION: process.env.VUE_APP_PENNSIEVE_API_LOCATION,
-        BL_SERVER_URL: process.env.VUE_APP_BL_SERVER_URL,
-        NL_LINK_PREFIX: process.env.VUE_APP_NL_LINK_PREFIX,
-        ROOT_URL: process.env.VUE_APP_ROOT_URL,
-      },
-      activeId: 1,
-    }
-  },
-  methods:{
-    searchChanged: function(data){
-      console.log(data);
-    },
-    tabClicked: function(id){
-      this.activeId = id
-    },
-    action: function(val){
-      console.log("action fired: ", val)
-    },
-    openSearch: function(){
-      this.$refs.sideBar.openSearch([], 'http://purl.obolibrary.org/obo/UBERON_0001103')
-    },
-    singleFacets: function(){
-      this.$refs.sideBar.addFilter({facet: 'Heart', term:'Anatomical structure', facetPropPath: 'anatomy.organ.name', AND: true})
-    },
-    addStomach: function(){
-      this.$refs.sideBar.addFilter({facet: 'Stomach', term:'Anatomical structure', facetPropPath: 'anatomy.organ.name', AND: false})
-    },
-    addInvalidTerm: function(){
-      this.$refs.sideBar.addFilter({facet: 'Invalid', term:'Anatomical structure', facetPropPath: 'anatomy.organ.name', AND: true})
-    },
-    multiFacets: function(){
-      this.$refs.sideBar.openSearch([{facet: 'Male', term:'Sex', facetPropPath:'attributes.subject.sex.value'}, {facet: 'Heart', term:'Anatomical structure', facetPropPath: 'anatomy.organ.name'},
-        {facet: 'Not correct', term:'Anatomical structure', facetPropPath: 'anatomy.organ.name'}], '')
-    },
-    keywordSearch: function(){
-      this.$refs.sideBar.addFilter({type: 'Facet', label: undefined, facet: '3d model', facetPropPath: 'item.keywords.keyword', term: 'Keywords', AND: true})
-    },
-    markerFromFlatmap: function(){
-      this.$refs.sideBar.openSearch([{facet: 'http://purl.obolibrary.org/obo/UBERON_0001103', term:'Keywords', facetPropPath:'item.keywords.keyword'}])
-    },
-    neuronSearch: function(){
-      this.$refs.sideBar.openNeuronSearch('ilxtr:neuron-type-keast-10')
-    },
-    getFacets: async function(){
-      let facets = await this.$refs.sideBar.getAlgoliaFacets()
-      console.log('Algolia facets:', facets)
-    }
-  },
-  mounted: function() {
-    console.log("mounted app")
-    EventBus.$on("contextUpdate", (payLoad) => {
-      console.log("contextUpdate", payLoad)
-    })
-  },
-}
-</script>
-
-<style lang="scss">
-#app {
-  height:100%;
-  width: 100%;
-  position:absolute;
-  font-family: "Asap",sans-serif;
-}
-body {
-  margin:0px;
-}
-.map-icon {
-  color: $app-primary-color;
-}
-</style>
+<template>
+  <div id="app">
+    <link rel="stylesheet"
+      href="https://fonts.googleapis.com/css?family=Asap:400,400i,500,600,700&display=swap">
+    Click arrow to open sidebar
+    <el-button @click="openSearch">search Uberon from refs</el-button>
+    <el-button @click="singleFacets">Add heart to Filter</el-button>
+    <el-button @click="addStomach">Add stomach to Filter</el-button>
+    <el-button @click="addInvalidTerm">Add invalid term to Filter</el-button>
+    <el-button @click="multiFacets">multiple facets</el-button>
+    <el-button @click="neuronSearch">open neuron search</el-button>
+    <el-button @click="keywordSearch">keyword search</el-button>
+    <el-button @click="getFacets">Get facets</el-button>
+    <SideBar :envVars="envVars" class="side-bar" ref="sideBar" :visible="sideBarVisibility"
+      :tabs="tabs" :activeId="activeId" @tabClicked="tabClicked"
+      @search-changed="searchChanged($event)" @actionClick="action"/>
+  </div>
+</template>
+
+<script>
+/* eslint-disable no-alert, no-console */
+// optionally import default styles
+import SideBar from './components/SideBar'
+import EventBus from './components/EventBus'
+
+// let testContext = {
+//   "description": "3D digital tracings of the enteric plexus obtained from seven subjects (M11, M16, M162, M163, M164, M168) are mapped randomly on mouse proximal colon. The data depicts individual neural wiring patterns in enteric microcircuits, and revealed both neuron and fiber units wired in a complex organization.",
+//   "heading": "Digital tracings of enteric plexus",
+//   "id": "sparc.science.context_data",
+//   "samples": [
+//     {
+//       "annotation": "",
+//       "description": "Neuronal soma and fibers in a myenteric ganglion in this subject are annotated into the following groups to highlight their interactions:\n\nNeuron1,2,3 Connex: Connections between 3 neurons and cross-ganglionic fibers\n\nNeuron4_Connex: A small neuron contacts fibers passing the ganglion\n\nNeuron5: Multiple projections of a neuron in an myenteric ganglion\n\nNeuron5,3,7 Connex: Connections between 3 neurons, nerve fibers, IGNEx (complex type of intraganglionic nerve endings) and fibers in the circular muscles.\n\nNeuron8,9,10 Connex: Connections of 3 neurons with each other and with long passing fibers. \n\nIntraganglionic Nerve Ending (IGNE): Digital traces of neurites consist of complex intraganglionic nerve endings. The blue fiber has branched terminals, more likely the afferent nerve endings; the violet and cyan terminals also interweave into the fiber nest; the orange, pink and peach fibers and one process of the neuron cross the IGNE to make 1-2 conjunctions. \n",
+//       "doi": "",
+//       "heading": "Digital tracing for subject M11",
+//       "id": "Sample 1",
+//       "path": "files/derivative/sub-M11/sam-pCm11/digital-traces/pC PHPS XFP M11 20XZ 180425_180713_2_NL_20.xml",
+//       "view": "View 1"
+//     },
+//     {
+//       "annotation": "",
+//       "description": "This digital trace demonstrates some types of wiring. A long process of the green neuron terminates in the intraganglionic nerve endings (IGNE) while in contact with a nerve fiber (cyan),  soma of a neuron (peach) and processes of 3 neurons (magenta, yellow and red). Two neurons and one fiber are traced to an IGNE. ",
+//       "doi": "",
+//       "heading": "Digital tracing for subject M16",
+//       "id": "Sample 2",
+//       "path": "files/derivative/sub-M16/sam-pCm16/digital-traces/pC PHPS XFP M16 20XZ 180425_180524.xml",
+//       "view": "View 2"
+//     }
+//   ],
+//   "version": "0.1.0",
+//   "views": [
+//     {
+//       "annotation": "--",
+//       "description": "Digital tracing of neurons for subject M11.",
+//       "id": "View 1",
+//       "path": "files/derivative/Scaffolds/M11_view.json",
+//       "sample": "Sample 1",
+//       "thumbnail": "files/derivative/Scaffolds/M11_thumbnail.jpeg"
+//     },
+//     {
+//       "annotation": "--",
+//       "description": "Digital tracing of neurons for subject M16.",
+//       "id": "View 2",
+//       "path": "files/derivative/Scaffolds/M16_view.json",
+//       "sample": "Sample 2",
+//       "thumbnail": "files/derivative/Scaffolds/M16_thumbnail.jpeg"
+//     }
+//   ]
+// }
+export default {
+  name: 'app',
+  components: {
+    SideBar
+  },
+  computed: {
+    tabs: function(){
+      let temp = [...this.tabArray]
+      for(let i in this.tabArray){
+        temp[i].contextCard = this.contextArray[i]
+      }
+      return temp
+    }
+  },
+  data: function(){
+    return {
+      tabArray: [{title: 'Flatmap', id:1}],
+      contextArray: [null,null,null],
+      sideBarVisibility: true,
+      envVars: {
+        API_LOCATION: process.env.VUE_APP_API_LOCATION,
+        ALGOLIA_KEY: process.env.VUE_APP_ALGOLIA_KEY,
+        ALGOLIA_ID: process.env.VUE_APP_ALGOLIA_ID,
+        ALGOLIA_INDEX: process.env.VUE_APP_ALGOLIA_INDEX,
+        PENNSIEVE_API_LOCATION: process.env.VUE_APP_PENNSIEVE_API_LOCATION,
+        BL_SERVER_URL: process.env.VUE_APP_BL_SERVER_URL,
+        NL_LINK_PREFIX: process.env.VUE_APP_NL_LINK_PREFIX,
+        ROOT_URL: process.env.VUE_APP_ROOT_URL,
+      },
+      activeId: 1,
+    }
+  },
+  methods:{
+    searchChanged: function(data){
+      console.log(data);
+    },
+    tabClicked: function(id){
+      this.activeId = id
+    },
+    action: function(val){
+      console.log("action fired: ", val)
+    },
+    openSearch: function(){
+      this.$refs.sideBar.openSearch([], 'http://purl.obolibrary.org/obo/UBERON_0001103')
+    },
+    singleFacets: function(){
+      this.$refs.sideBar.addFilter({facet: 'Heart', term:'Anatomical structure', facetPropPath: 'anatomy.organ.name', AND: true})
+    },
+    addStomach: function(){
+      this.$refs.sideBar.addFilter({facet: 'Stomach', term:'Anatomical structure', facetPropPath: 'anatomy.organ.name', AND: false})
+    },
+    addInvalidTerm: function(){
+      this.$refs.sideBar.addFilter({facet: 'Invalid', term:'Anatomical structure', facetPropPath: 'anatomy.organ.name', AND: true})
+    },
+    multiFacets: function(){
+      this.$refs.sideBar.openSearch([{facet: 'Male', term:'Sex', facetPropPath:'attributes.subject.sex.value'}, {facet: 'Heart', term:'Anatomical structure', facetPropPath: 'anatomy.organ.name'},
+        {facet: 'Not correct', term:'Anatomical structure', facetPropPath: 'anatomy.organ.name'}], '')
+    },
+    keywordSearch: function(){
+      this.$refs.sideBar.addFilter({type: 'Facet', label: undefined, facet: '3d model', facetPropPath: 'item.keywords.keyword', term: 'Keywords', AND: true})
+    },
+    markerFromFlatmap: function(){
+      this.$refs.sideBar.openSearch([{facet: 'http://purl.obolibrary.org/obo/UBERON_0001103', term:'Keywords', facetPropPath:'item.keywords.keyword'}])
+    },
+    neuronSearch: function(){
+      this.$refs.sideBar.openNeuronSearch('ilxtr:neuron-type-keast-10')
+    },
+    getFacets: async function(){
+      let facets = await this.$refs.sideBar.getAlgoliaFacets()
+      console.log('Algolia facets:', facets)
+    }
+  },
+  mounted: function() {
+    console.log("mounted app")
+    EventBus.$on("contextUpdate", (payLoad) => {
+      console.log("contextUpdate", payLoad)
+    })
+  },
+}
+</script>
+
+<style lang="scss">
+#app {
+  height:100%;
+  width: 100%;
+  position:absolute;
+  font-family: "Asap",sans-serif;
+}
+body {
+  margin:0px;
+}
+.map-icon {
+  color: $app-primary-color;
+}
+</style>