@abi-software/flatmapvuer 0.5.9 → 0.6.0-vue3-0

package/src/services/flatmapQueries.js

@@ -1,46 +1,47 @@
 /* eslint-disable no-alert, no-console */
 // remove duplicates by stringifying the objects
-const removeDuplicates = function(arrayOfAnything){
-  return [...new Set(arrayOfAnything.map(e => JSON.stringify(e)))].map(e => JSON.parse(e)) 
+const removeDuplicates = function (arrayOfAnything) {
+  return [...new Set(arrayOfAnything.map((e) => JSON.stringify(e)))].map((e) =>
+    JSON.parse(e)
+  )
 }
 
-const cachedLabels = {};
+const cachedLabels = {}
 
-const findTaxonomyLabel = async function(flatmapAPI, taxonomy){
+const findTaxonomyLabel = async function (flatmapAPI, taxonomy) {
   if (cachedLabels && cachedLabels.hasOwnProperty(taxonomy)) {
-    return cachedLabels[taxonomy];
+    return cachedLabels[taxonomy]
   }
 
-  return new Promise(resolve=>{
+  return new Promise((resolve) => {
     fetch(`${flatmapAPI}knowledge/label/${taxonomy}`, {
       method: 'GET',
     })
-    .then(response => response.json())
-    .then(data => {
-      let label = data.label;
-      if (label === "Mammalia") {
-        label = "Mammalia not otherwise specified";
-      }
-      cachedLabels[taxonomy] = label;
-      resolve(label);
-    })
-    .catch((error) => {
-      console.error('Error:', error);
-      cachedLabels[taxonomy] = taxonomy;
-      resolve(taxonomy);
-    })
-  });
+      .then((response) => response.json())
+      .then((data) => {
+        let label = data.label
+        if (label === 'Mammalia') {
+          label = 'Mammalia not otherwise specified'
+        }
+        cachedLabels[taxonomy] = label
+        resolve(label)
+      })
+      .catch((error) => {
+        console.error('Error:', error)
+        cachedLabels[taxonomy] = taxonomy
+        resolve(taxonomy)
+      })
+  })
 }
 
-const inArray = function(ar1, ar2){
+const inArray = function (ar1, ar2) {
   let as1 = JSON.stringify(ar1)
   let as2 = JSON.stringify(ar2)
   return as1.indexOf(as2) !== -1
 }
 
-let FlatmapQueries = function(){
-
-  this.initialise  = function(flatmapApi){
+let FlatmapQueries = function () {
+  this.initialise = function (flatmapApi) {
     this.flatmapApi = flatmapApi
     this.destinations = []
     this.origins = []
@@ -53,21 +54,29 @@ let FlatmapQueries = function(){
 
   this.createTooltipData = async function (eventData) {
     let hyperlinks = []
-    if (eventData.feature.hyperlinks && eventData.feature.hyperlinks.length > 0) {
+    if (
+      eventData.feature.hyperlinks &&
+      eventData.feature.hyperlinks.length > 0
+    ) {
       hyperlinks = eventData.feature.hyperlinks
     } else {
-      hyperlinks = this.urls.map(url=>({url: url, id: "pubmed"}))
+      hyperlinks = this.urls.map((url) => ({ url: url, id: 'pubmed' }))
     }
-    let taxonomyLabel = undefined;
+    let taxonomyLabel = undefined
     if (eventData.provenanceTaxonomy) {
-      taxonomyLabel = [];
+      taxonomyLabel = []
       for (let i = 0; eventData.provenanceTaxonomy.length > i; i++) {
-        taxonomyLabel.push(await findTaxonomyLabel(this.flatmapAPI, eventData.provenanceTaxonomy[i]))
+        taxonomyLabel.push(
+          await findTaxonomyLabel(
+            this.flatmapAPI,
+            eventData.provenanceTaxonomy[i]
+          )
+        )
       }
     }
 
     let tooltipData = {
-      destinations: this.destinations, 
+      destinations: this.destinations,
       origins: this.origins,
       components: this.components,
       destinationsWithDatasets: this.destinationsWithDatasets,
@@ -77,48 +86,48 @@ let FlatmapQueries = function(){
       featureId: eventData.resource,
       hyperlinks: hyperlinks,
       provenanceTaxonomy: eventData.provenanceTaxonomy,
-      provenanceTaxonomyLabel: taxonomyLabel
+      provenanceTaxonomyLabel: taxonomyLabel,
     }
     return tooltipData
   }
 
-  this.createComponentsLabelList = function(components, lookUp){
+  this.createComponentsLabelList = function (components, lookUp) {
     let labelList = []
-    components.forEach(n=>{
+    components.forEach((n) => {
       labelList.push(this.createLabelFromNeuralNode(n[0]), lookUp)
-      if (n.length === 2){
+      if (n.length === 2) {
         labelList.push(this.createLabelFromNeuralNode(n[1]), lookUp)
       }
     })
     return labelList
   }
 
-  this.createLabelLookup = function(uberons) {
-    return new Promise(resolve=> {
+  this.createLabelLookup = function (uberons) {
+    return new Promise((resolve) => {
       let uberonMap = {}
       this.uberons = []
-      const data = { sql: this.buildLabelSqlStatement(uberons)}
+      const data = { sql: this.buildLabelSqlStatement(uberons) }
       fetch(`${this.flatmapApi}knowledge/query/`, {
-          method: 'POST',
-          headers: {
-            'Content-Type': 'application/json',
-          },
-          body: JSON.stringify(data),
-        })
-        .then(response => response.json())
-        .then(payload => {
-          const entity = payload.keys.indexOf("entity");
-          const label = payload.keys.indexOf("label");
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+        },
+        body: JSON.stringify(data),
+      })
+        .then((response) => response.json())
+        .then((payload) => {
+          const entity = payload.keys.indexOf('entity')
+          const label = payload.keys.indexOf('label')
           if (entity > -1 && label > -1) {
-            payload.values.forEach(pair => {
-              uberonMap[pair[entity]] = pair[label];
+            payload.values.forEach((pair) => {
+              uberonMap[pair[entity]] = pair[label]
               this.uberons.push({
                 id: pair[entity],
-                name: pair[label]
+                name: pair[label],
               })
-            });
+            })
           }
-        resolve(uberonMap)
+          resolve(uberonMap)
         })
     })
   }
@@ -151,21 +160,21 @@ let FlatmapQueries = function(){
     let dnodes = connectivity.connectivity.flat() // get nodes from edgelist
     let nodes = [...new Set(dnodes)] // remove duplicates
     let found = []
-    nodes.forEach(n => {
+    nodes.forEach((n) => {
       if (Array.isArray(n)) {
         found.push(n.flat())
       } else {
         found.push(n)
       }
     })
-    return [... new Set(found.flat())]
+    return [...new Set(found.flat())]
   }
 
   this.flattenConntectivity = function (connectivity) {
     let dnodes = connectivity.flat() // get nodes from edgelist
     let nodes = [...new Set(dnodes)] // remove duplicates
     let found = []
-    nodes.forEach(n => {
+    nodes.forEach((n) => {
       if (Array.isArray(n)) {
         found.push(n.flat())
       } else {
@@ -181,7 +190,7 @@ let FlatmapQueries = function(){
 
     let found = []
     let terminal = false
-    nodes.forEach(node => {
+    nodes.forEach((node) => {
       terminal = false
       // Check if the node is an destination or origin (note that they are labelled dendrite and axon as opposed to origin and destination)
       if (inArray(connectivity.axons, node)) {
@@ -198,34 +207,34 @@ let FlatmapQueries = function(){
     return found
   }
 
-  this.retrieveFlatmapKnowledgeForEvent = async function(eventData){
-      // check if there is an existing query
-      if (this.controller) this.controller.abort();
+  this.retrieveFlatmapKnowledgeForEvent = async function (eventData) {
+    // check if there is an existing query
+    if (this.controller) this.controller.abort()
 
-      // set up the abort controller
-      this.controller = new AbortController();
-      const signal = this.controller.signal;
+    // set up the abort controller
+    this.controller = new AbortController()
+    const signal = this.controller.signal
 
-      const keastIds = eventData.resource
-      this.destinations = []
-      this.origins = []
-      this.components = []
-      if (!keastIds || keastIds.length == 0) return
-      const data = { sql: this.buildConnectivitySqlStatement(keastIds)};
-      let prom1 = new Promise(resolve=>{
-        fetch(`${this.flatmapApi}knowledge/query/`, {
-          method: 'POST',
-          headers: {
-            'Content-Type': 'application/json',
-          },
-          body: JSON.stringify(data),
-          signal: signal
-        })
-        .then(response => response.json())
-        .then(data => {
-          if(this.connectivityExists(data)){
+    const keastIds = eventData.resource
+    this.destinations = []
+    this.origins = []
+    this.components = []
+    if (!keastIds || keastIds.length == 0) return
+    const data = { sql: this.buildConnectivitySqlStatement(keastIds) }
+    let prom1 = new Promise((resolve) => {
+      fetch(`${this.flatmapApi}knowledge/query/`, {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+        },
+        body: JSON.stringify(data),
+        signal: signal,
+      })
+        .then((response) => response.json())
+        .then((data) => {
+          if (this.connectivityExists(data)) {
             let connectivity = JSON.parse(data.values[0][0])
-            this.processConnectivity(connectivity).then(()=>{
+            this.processConnectivity(connectivity).then(() => {
               resolve(true)
             })
           } else {
@@ -233,29 +242,34 @@ let FlatmapQueries = function(){
           }
         })
         .catch((error) => {
-          console.error('Error:', error);
+          console.error('Error:', error)
           resolve(false)
         })
-      })
-      let prom2 = await this.pubmedQueryOnIds(eventData)
-      let results = await Promise.all([prom1, prom2])
-      return results
+    })
+    let prom2 = await this.pubmedQueryOnIds(eventData)
+    let results = await Promise.all([prom1, prom2])
+    return results
   }
 
-  this.connectivityExists = function(data){
-    if (data.values && data.values.length > 0 && JSON.parse(data.values[0][0]).connectivity && JSON.parse(data.values[0][0]).connectivity.length > 0) {
+  this.connectivityExists = function (data) {
+    if (
+      data.values &&
+      data.values.length > 0 &&
+      JSON.parse(data.values[0][0]).connectivity &&
+      JSON.parse(data.values[0][0]).connectivity.length > 0
+    ) {
       return true
     } else {
       return false
     }
   }
 
-  this.createLabelFromNeuralNode = function(node, lookUp){
+  this.createLabelFromNeuralNode = function (node, lookUp) {
     let label = lookUp[node[0]]
-    if (node.length === 2 && node[1].length > 0){
-      node[1].forEach(n=>{
-        if (lookUp[n] == undefined){
-          label += `, ${n}` 
+    if (node.length === 2 && node[1].length > 0) {
+      node[1].forEach((n) => {
+        if (lookUp[n] == undefined) {
+          label += `, ${n}`
         } else {
           label += `, ${lookUp[n]}`
         }
@@ -264,21 +278,26 @@ let FlatmapQueries = function(){
     return label
   }
 
-  this.flattenAndFindDatasets = function(components, axons, dendrites){
-      
+  this.flattenAndFindDatasets = function (components, axons, dendrites) {
     // process the nodes for finding datasets (Note this is not critical to the tooltip, only for the 'search on components' button)
     let componentsFlat = this.flattenConntectivity(components)
     let axonsFlat = this.flattenConntectivity(axons)
     let dendritesFlat = this.flattenConntectivity(dendrites)
 
     // Filter for the anatomy which is annotated on datasets
-    this.destinationsWithDatasets = this.uberons.filter(ub => axonsFlat.indexOf(ub.id) !== -1)
-    this.originsWithDatasets = this.uberons.filter(ub => dendritesFlat.indexOf(ub.id) !== -1)
-    this.componentsWithDatasets = this.uberons.filter(ub => componentsFlat.indexOf(ub.id) !== -1)
+    this.destinationsWithDatasets = this.uberons.filter(
+      (ub) => axonsFlat.indexOf(ub.id) !== -1
+    )
+    this.originsWithDatasets = this.uberons.filter(
+      (ub) => dendritesFlat.indexOf(ub.id) !== -1
+    )
+    this.componentsWithDatasets = this.uberons.filter(
+      (ub) => componentsFlat.indexOf(ub.id) !== -1
+    )
   }
 
-  this.processConnectivity = function(connectivity){
-    return new Promise (resolve=>{
+  this.processConnectivity = function (connectivity) {
+    return new Promise((resolve) => {
       // Filter the origin and destinations from components
       let components = this.findComponents(connectivity)
 
@@ -287,25 +306,31 @@ let FlatmapQueries = function(){
       let dendrites = removeDuplicates(connectivity.dendrites)
 
       // Create list of ids to get labels for
-      let conIds = this.findAllIdsFromConnectivity(connectivity)  
+      let conIds = this.findAllIdsFromConnectivity(connectivity)
 
       // Create readable labels from the nodes. Setting this to 'this.origins' updates the display
-      this.createLabelLookup(conIds).then(lookUp=>{
-        this.destinations = axons.map(a=>this.createLabelFromNeuralNode(a,lookUp))
-        this.origins = dendrites.map(d=>this.createLabelFromNeuralNode(d,lookUp))
-        this.components = components.map(c=>this.createLabelFromNeuralNode(c, lookUp))
+      this.createLabelLookup(conIds).then((lookUp) => {
+        this.destinations = axons.map((a) =>
+          this.createLabelFromNeuralNode(a, lookUp)
+        )
+        this.origins = dendrites.map((d) =>
+          this.createLabelFromNeuralNode(d, lookUp)
+        )
+        this.components = components.map((c) =>
+          this.createLabelFromNeuralNode(c, lookUp)
+        )
         this.flattenAndFindDatasets(components, axons, dendrites)
         resolve(true)
       })
     })
   }
 
-  this.flattenConntectivity = function(connectivity){
+  this.flattenConntectivity = function (connectivity) {
     let dnodes = connectivity.flat() // get nodes from edgelist
     let nodes = [...new Set(dnodes)] // remove duplicates
     let found = []
-    nodes.forEach(n=>{
-      if (Array.isArray(n)){
+    nodes.forEach((n) => {
+      if (Array.isArray(n)) {
         found.push(n.flat())
       } else {
         found.push(n)
@@ -314,22 +339,22 @@ let FlatmapQueries = function(){
     return found.flat()
   }
 
-  this.findComponents = function(connectivity){
+  this.findComponents = function (connectivity) {
     let dnodes = connectivity.connectivity.flat() // get nodes from edgelist
     let nodes = removeDuplicates(dnodes)
 
     let found = []
     let terminal = false
-    nodes.forEach(node=>{
+    nodes.forEach((node) => {
       terminal = false
       // Check if the node is an destination or origin (note that they are labelled dendrite and axon as opposed to origin and destination)
-      if(inArray(connectivity.axons,node)){
+      if (inArray(connectivity.axons, node)) {
         terminal = true
       }
-      if(inArray(connectivity.dendrites, node)){
+      if (inArray(connectivity.dendrites, node)) {
         terminal = true
       }
-      if (!terminal){
+      if (!terminal) {
         found.push(node)
       }
     })
@@ -337,11 +362,11 @@ let FlatmapQueries = function(){
     return found
   }
 
-  this.stripPMIDPrefix = function (pubmedId){
+  this.stripPMIDPrefix = function (pubmedId) {
     return pubmedId.split(':')[1]
   }
 
-  this.buildPubmedSqlStatement = function(keastIds) {
+  this.buildPubmedSqlStatement = function (keastIds) {
     let sql = 'select distinct publication from publications where entity in ('
     if (keastIds.length === 1) {
       sql += `'${keastIds[0]}')`
@@ -353,12 +378,12 @@ let FlatmapQueries = function(){
     return sql
   }
 
-  this.buildPubmedSqlStatementForModels = function(model) {
+  this.buildPubmedSqlStatementForModels = function (model) {
     return `select distinct publication from publications where entity = '${model}'`
   }
 
-  this.flatmapQuery = function(sql){
-    const data = { sql: sql}
+  this.flatmapQuery = function (sql) {
+    const data = { sql: sql }
     return fetch(`${this.flatmapApi}knowledge/query/`, {
       method: 'POST',
       headers: {
@@ -366,25 +391,30 @@ let FlatmapQueries = function(){
       },
       body: JSON.stringify(data),
     })
-    .then(response => response.json())
-    .catch((error) => {
-      console.error('Error:', error)
-    })
+      .then((response) => response.json())
+      .catch((error) => {
+        console.error('Error:', error)
+      })
   }
   // Note that this functin WILL run to the end, as it doesn not catch the second level of promises
-  this.pubmedQueryOnIds = function(eventData){
-    return new Promise(resolve=>{
+  this.pubmedQueryOnIds = function (eventData) {
+    return new Promise((resolve) => {
       const keastIds = eventData.resource
       const source = eventData.feature.source
-      if(!keastIds || keastIds.length === 0) return
+      if (!keastIds || keastIds.length === 0) return
       const sql = this.buildPubmedSqlStatement(keastIds)
-      this.flatmapQuery(sql).then(data=>{
+      this.flatmapQuery(sql).then((data) => {
         // Create pubmed url on paths if we have them
-        if (data.values.length > 0){
-          this.urls = [this.pubmedSearchUrl(data.values.map(id=>this.stripPMIDPrefix(id[0])))]
+        if (data.values.length > 0) {
+          this.urls = [
+            this.pubmedSearchUrl(
+              data.values.map((id) => this.stripPMIDPrefix(id[0]))
+            ),
+          ]
           resolve(true)
-        } else { // Create pubmed url on models
-          this.pubmedQueryOnModels(source).then(result=>{
+        } else {
+          // Create pubmed url on models
+          this.pubmedQueryOnModels(source).then((result) => {
             resolve(result)
           })
         }
@@ -392,19 +422,25 @@ let FlatmapQueries = function(){
     })
   }
 
-  this.pubmedQueryOnModels = function(source){
-    return this.flatmapQuery(this.buildPubmedSqlStatementForModels(source)).then(data=>{
-      if (Array.isArray(data.values) && data.values.length > 0){
-        this.urls = [this.pubmedSearchUrl(data.values.map(id=>this.stripPMIDPrefix(id[0])))]
+  this.pubmedQueryOnModels = function (source) {
+    return this.flatmapQuery(
+      this.buildPubmedSqlStatementForModels(source)
+    ).then((data) => {
+      if (Array.isArray(data.values) && data.values.length > 0) {
+        this.urls = [
+          this.pubmedSearchUrl(
+            data.values.map((id) => this.stripPMIDPrefix(id[0]))
+          ),
+        ]
         return true
       } else {
-        this.urls = [] // Clears the pubmed search button 
-      } 
+        this.urls = [] // Clears the pubmed search button
+      }
       return false
     })
   }
 
-  this.pubmedSearchUrl = function(ids) {
+  this.pubmedSearchUrl = function (ids) {
     let url = 'https://pubmed.ncbi.nlm.nih.gov/?'
     let params = new URLSearchParams()
     params.append('term', ids)
@@ -412,4 +448,4 @@ let FlatmapQueries = function(){
   }
 }
 
-export {FlatmapQueries, findTaxonomyLabel}
+export { FlatmapQueries, findTaxonomyLabel }

package/vite.config.js

@@ -0,0 +1,76 @@
+import path from "path";
+const pathSrc = path.resolve(__dirname, "./src");
+import { defineConfig } from 'vite'
+import vue from '@vitejs/plugin-vue'
+import Components from 'unplugin-vue-components/vite'
+import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'
+import Unocss from 'unocss/vite'
+import {
+  presetAttributify,
+  presetIcons,
+  presetUno,
+  transformerDirectives,
+  transformerVariantGroup,
+} from 'unocss'
+
+// https://vitejs.dev/config/
+export default defineConfig(({ command, mode }) => {
+  const config = {
+    css: {
+        preprocessorOptions: {
+          scss: {
+            additionalData: `@use '${pathSrc}/assets/styles' as *;`
+          },
+        },
+    },
+    plugins: [
+        vue({
+          template: {
+            compilerOptions: {
+              isCustomElement: (tag) => ['bx:grid'].includes(tag),
+            }
+          }
+        }),
+        Components({
+          // allow auto load markdown components under `./src/components/`
+          extensions: ['vue', 'md'],
+          // allow auto import and register components used in markdown
+          include: [/\.vue$/, /\.vue\?vue/, /\.md$/],
+          resolvers: [
+            ElementPlusResolver({
+              importStyle: 'sass',
+            }),
+          ],
+          dts: 'src/components.d.ts',
+        }),
+    
+        // https://github.com/antfu/unocss
+        // see unocss.config.ts for config
+    ],
+    build: {
+      lib: {
+        entry: path.resolve(__dirname, "./src/components/index.js"),
+        name: "FlatmapVuer",
+        fileName: 'flatmapvuer',
+      },
+      rollupOptions: {
+        external: ["vue"],
+        output: {
+          globals: {
+            vue: "Vue",
+          },
+        },
+      },
+    },
+  };
+
+  if (command === 'serve') {
+    config.server =  {
+        port: 8082,
+    };
+  } else if (command === "build-bundle") {
+
+
+  }
+  return config;
+})

package/vue.config.js

@@ -7,6 +7,7 @@ module.exports = {
     }
   },
   chainWebpack: config => {
+    config.resolve.alias.set('vue', '@vue/compat')
     const fontsRule = config.module.rule('fonts')
     fontsRule.uses.clear()
     config.module
@@ -19,6 +20,19 @@ module.exports = {
         return options
       })
       .end()
+    config.module
+      .rule('vue')
+      .use('vue-loader')
+      .tap((options) => {
+        return {
+          ...options,
+          compilerOptions: {
+            compatConfig: {
+              MODE: 3
+            }
+          }
+        }
+      })
   },
   css: {
     //Import variables into all stylesheets.