@abi-software/map-side-bar 2.3.0 → 2.4.0-alpha-1

package/src/flatmapQueries/flatmapQueries.js

@@ -0,0 +1,169 @@
+function transformKeyValueArrayToObject(data) {
+  return data.values.map(valueArray => 
+    data.keys.reduce((acc, key, index) => {
+      acc[key] = valueArray[index];
+      return acc;
+    }, {})
+  );
+}
+
+// remove duplicates by stringifying the objects
+const removeDuplicates = function (arrayOfAnything) {
+  if (!arrayOfAnything) return []
+  return [...new Set(arrayOfAnything.map((e) => JSON.stringify(e)))].map((e) =>
+    JSON.parse(e)
+  )
+}
+
+
+let FlatmapQueries = function () {
+  this.initialise = function (flatmapApi) {
+    this.flatmapApi = flatmapApi
+    this.features = []
+    this.limit = 10
+    this.offset = 0
+    this.numberOfHits = 0
+    this.sqlPreOffset = ''
+    this.lookup = {}
+    this.createLookup()
+  }
+
+  this.updateOffset = function (offset) {
+    this.offset = offset
+  }
+  this.updateLimit = function (limit) {
+    this.limit = limit
+  }
+
+  this.offsetText = function () {
+    return 'limit ' + this.limit + ' offset ' + this.offset
+  }
+
+  this.pmrSQL = function (terms=[], search='') {
+    let sql = 'select distinct term, score, workspace, entity, metadata from pmr_models left join pmr_metadata on pmr_models.exposure=pmr_metadata.entity where metadata is not null and exposure is not null and score > 0.99 '
+
+    // filters for the terms
+    if (terms && terms.length > 0) {
+      sql += 'and '
+      sql += `term='${terms.join("' or term='")}'`
+    }
+    
+    // set a search if there is one and no terms to filter on
+    if (search && search !== '' && terms.length == 0) {
+      sql = `select * from pmr_metadata where JSON_EXTRACT(metadata, '$.title') like '%${search}%'`
+    }
+
+    this.sqlPreOffset = sql
+
+    // add the limit and offset for pagination
+    sql += ' ' + this.offsetText() + ';'
+    return sql
+  }
+
+  this.convertTermsToIds = function (terms) {
+    return terms.map(t => this.lookUpId(t))
+  }
+
+  this.labelSQL = function (){
+    return "select entity, label from labels"
+  }
+
+  this.countSQL = function (sql) {
+    sql = `select count(*) from (${sql})`
+    return sql
+  }
+
+
+  this.flatmapQuery = function (sql) {
+    const data = { sql: sql }
+    return fetch(`${this.flatmapApi}knowledge/query/`, {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json',
+      },
+      body: JSON.stringify(data),
+    })
+    .then((response) => response.json())
+    .catch((error) => {
+      console.error('Error:', error)
+    })
+  }
+
+  this.processFilters = function (filters) {
+    let featureLabels = []
+    filters.forEach((f) => {
+      if (f.label !== 'Show all' && f.label !== 'PMR')
+        featureLabels.push(f.facet)
+    })
+    return featureLabels
+  }
+
+
+
+  this.pmrSearch = function (filters=[], search='') {
+    let features = this.processFilters(filters)
+    let featureIds = this.convertTermsToIds(features)
+    return new Promise((resolve, reject) => {
+      this.flatmapQuery(this.pmrSQL(featureIds, search))
+        .then(data => {
+          const pd = this.processFlatmapData(data)
+          this.setAvailableFeatures(pd)
+
+          // get the number of hits for pagination
+          this.flatmapQuery(this.countSQL(this.sqlPreOffset)).then(data => {
+            this.numberOfHits = data.values[0][0]
+            resolve(pd);
+          })
+        })
+        .catch(reject);
+    });
+  }
+
+  // setAvailableFeatures returns the available features in the flatmap for filtering
+  // pd is the processed data from the flatmap
+  this.setAvailableFeatures = function (pd) {
+    pd.forEach((d) => {
+      Object.keys(d).forEach((key) => {
+        if (!this.features.includes(key)) {
+          this.features.push(key)
+        }
+      })
+    })
+  }
+
+
+  this.processFlatmapData = function (data) {
+    // Convert the flatmap data into an array of objects
+    let dataObj = transformKeyValueArrayToObject(data)
+
+    // Only use the results with metadata
+    let metadataResults = dataObj.filter(d => d.metadata)
+    let metadataOnly = metadataResults.map(d => {
+      let md = JSON.parse(d.metadata)
+      md.dataSource = 'PMR'
+      return md
+    })
+
+    // Remove duplicates
+    let uniqueResults = removeDuplicates(metadataOnly)
+    return uniqueResults
+  }
+
+  this.createLookup = function () {
+    this.flatmapQuery(this.labelSQL())
+      .then(data => {
+        data.values.forEach(d => {
+          if (d[1] && (typeof d[1] === 'string' || d[1] instanceof String)) {
+            this.lookup[d[1].toLowerCase()] = d[0]
+          }
+        })
+      })
+  }
+
+  this.lookUpId = function (label) {
+    return this.lookup[label.toLowerCase()]
+  }
+
+}
+
+export default FlatmapQueries

package/src/main.js

@@ -1,9 +1,9 @@
-import { createApp } from 'vue'
-import App from './App.vue'
-import MapSideBar from './components/SideBar.vue'
-
-const app = createApp(App);
-
-app.component('MapSideBar', MapSideBar)
-
-app.mount("#app");
+import { createApp } from 'vue'
+import App from './App.vue'
+import MapSideBar from './components/SideBar.vue'
+
+const app = createApp(App);
+
+app.component('MapSideBar', MapSideBar)
+
+app.mount("#app");

package/src/mixins/S3Bucket.vue

@@ -1,37 +1,37 @@
-<script>
-export default {
-  name: "S3Bucket",
-  data() {
-    return {
-      s3Bucket: undefined,
-      s3Prefix: "",
-    };
-  },
-  methods: {
-    updateS3Bucket: function(s3uri) {
-      this.s3Bucket = undefined;
-      if (s3uri) {
-        const substring = s3uri.split("//")[1];
-        if (substring) {
-          this.s3Bucket = substring.split("/")[0];
-          const n = substring.indexOf('/');
-          this.s3Prefix = substring.substring(n + 1);
-          return;
-        }
-      }
-    },
-    getS3Args: function() {
-      if (this.s3Bucket) {
-        return `?s3BucketName=${this.s3Bucket}`
-      }
-      return "";
-    },
-    getS3Prefix: function() {
-      return this.s3Prefix;
-    }
-  },
-
-};
-</script>
-
-
+<script>
+export default {
+  name: "S3Bucket",
+  data() {
+    return {
+      s3Bucket: undefined,
+      s3Prefix: "",
+    };
+  },
+  methods: {
+    updateS3Bucket: function(s3uri) {
+      this.s3Bucket = undefined;
+      if (s3uri) {
+        const substring = s3uri.split("//")[1];
+        if (substring) {
+          this.s3Bucket = substring.split("/")[0];
+          const n = substring.indexOf('/');
+          this.s3Prefix = substring.substring(n + 1);
+          return;
+        }
+      }
+    },
+    getS3Args: function() {
+      if (this.s3Bucket) {
+        return `?s3BucketName=${this.s3Bucket}`
+      }
+      return "";
+    },
+    getS3Prefix: function() {
+      return this.s3Prefix;
+    }
+  },
+
+};
+</script>
+
+

package/src/mixins/mixedPageCalculation.vue

@@ -0,0 +1,78 @@
+<script>
+const RatioOfPMRResults = 0.2; // Ratio of PMR results to Sparc results
+
+// The functions below are needed because the number of results shown on the page is dependent what is available from each index.
+// We fix this by calcuting how many results we have shown before the requested page and then calculating the offset based on that.
+
+export default {
+  methods: {
+    
+    // Calculate Variable Ratio is used as a number to determine how the ratio of PMR results to SPARC results
+    //   will be shown on the page. 1 means only PMR results, 0 means only SPARC results. 
+    calculateVariableRatio: function () {
+      if (this.page === 1) {
+        this.variableRatio = RatioOfPMRResults
+      } else if( this.npp_SPARC * (this.page -1) >= this.sparcNumberOfHits) {
+        this.variableRatio = 1
+        // calculate offset
+        let mixedOffest = this.page*RatioOfPMRResults
+      } else if(this.npp_PMR * (this.page - 1) >= this.pmrNumberOfHits) {
+        this.variableRatio = 0
+      } else {
+        this.variableRatio = RatioOfPMRResults
+      }
+    },
+    calculatePMROffest: function() {
+      if (this.variableRatio === RatioOfPMRResults) {
+        return (this.page-1)*this.npp_PMR
+      } else if (this.variableRatio === 1) {
+
+        // calculate how many results we showed before the requested page
+        let pageWhereSPARCResultsRanOut = Math.ceil(this.sparcNumberOfHits / this.npp_SPARC)
+        let numberOfPMRResultsShownInMixed = this.npp_PMR * pageWhereSPARCResultsRanOut
+        let numberOfPMRResultsShownInPMROnly = (this.page - 1 - pageWhereSPARCResultsRanOut) * this.numberPerPage
+        return numberOfPMRResultsShownInMixed + numberOfPMRResultsShownInPMROnly
+      }
+    },
+    calculateSPARCOffest: function() {
+      if(this.variableRatio === RatioOfPMRResults) {
+        return (this.page-1)*this.npp_SPARC
+      } else if (this.variableRatio === 0) {
+        
+        // calculate how many results we showed before the requested page
+        let pageWherePMRResultsRanOut = Math.ceil(this.pmrNumberOfHits / this.npp_PMR)
+        let numberOfSPARCResultsShownInMixed = this.npp_SPARC * pageWherePMRResultsRanOut
+        let numberOfSPARCResultsShownInSPARCOnly = (this.page - 1 - pageWherePMRResultsRanOut) * this.numberPerPage
+        let offset = numberOfSPARCResultsShownInMixed + numberOfSPARCResultsShownInSPARCOnly
+        return offset
+      }
+    },
+    PMRLimit: function(pmrResultsOnlyFlag=false) {
+      if (pmrResultsOnlyFlag) {
+        return this.numberPerPage
+      }
+      if (this.variableRatio === RatioOfPMRResults) {
+        return this.npp_PMR
+      } else if (this.variableRatio === 1) {
+        return this.numberPerPage
+      } else if (this.variableRatio === 0) {
+        return 0
+      }
+    },
+    SPARCLimit: function(pmrResultsOnlyFlag=false) {
+      if(pmrResultsOnlyFlag) {
+        return 0
+      }
+      if (this.variableRatio === RatioOfPMRResults) {
+        return this.npp_SPARC
+      } else if (this.variableRatio === 0) {
+        return this.numberPerPage
+      } else if (this.variableRatio === 1) {
+        return 0
+      }
+    },
+  }
+};
+</script>
+
+

package/static.json

@@ -1,7 +1,7 @@
-{
-    "root": "dist",
-    "clean_urls": true,
-    "routes": {
-      "/**": "index.html"
-    }
+{
+    "root": "dist",
+    "clean_urls": true,
+    "routes": {
+      "/**": "index.html"
+    }
   }

package/vite.config.js

@@ -1,56 +1,56 @@
-import { resolve } from "node:path"
-
-import { defineConfig } from 'vite'
-import vue from '@vitejs/plugin-vue'
-
-import Components from 'unplugin-vue-components/vite'
-import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'
-
-// https://vitejs.dev/config/
-export default defineConfig({
-    server: {
-        port: 8081,
-    },
-    plugins: [
-        vue(),
-        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',
-        }),
-    ],
-    resolve: {
-        alias: {
-            '@': resolve(__dirname, './src'),
-        }
-    },
-    build: {
-        lib: {
-            entry: resolve(__dirname, "./src/components/index.js"),
-            name: "MapSideBar",
-            fileName: 'map-side-bar',
-        },
-        rollupOptions: {
-            external: ["vue"],
-            output: {
-                globals: {
-                    vue: "Vue",
-                },
-            },
-        },
-    },
-    css: {
-        preprocessorOptions: {
-            scss: {
-                additionalData: `@use './src/assets/styles' as *;`
-            }
-        }
-    }
+import { resolve } from "node:path"
+
+import { defineConfig } from 'vite'
+import vue from '@vitejs/plugin-vue'
+
+import Components from 'unplugin-vue-components/vite'
+import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'
+
+// https://vitejs.dev/config/
+export default defineConfig({
+    server: {
+        port: 8081,
+    },
+    plugins: [
+        vue(),
+        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',
+        }),
+    ],
+    resolve: {
+        alias: {
+            '@': resolve(__dirname, './src'),
+        }
+    },
+    build: {
+        lib: {
+            entry: resolve(__dirname, "./src/components/index.js"),
+            name: "MapSideBar",
+            fileName: 'map-side-bar',
+        },
+        rollupOptions: {
+            external: ["vue"],
+            output: {
+                globals: {
+                    vue: "Vue",
+                },
+            },
+        },
+    },
+    css: {
+        preprocessorOptions: {
+            scss: {
+                additionalData: `@use './src/assets/styles' as *;`
+            }
+        }
+    }
 })

package/vuese-generator.js

@@ -1,65 +1,65 @@
-/**
- * Vuese Generator
- *
- * To generate markdown files from Vue components
- * To watch components changes for Vitepress on Dev Mode
- */
-
-import fs from 'fs'
-import path from 'path'
-import chokidar from 'chokidar'
-import { parser } from '@vuese/parser'
-import { Render } from '@vuese/markdown-render'
-
-const watchMode = process.argv.find((argv) => argv === 'watch')
-
-const componentsDir = 'src/components'
-const components = ['SideBar.vue']
-const outputDir = 'docs/components'
-
-function generateMarkdown(file) {
-  const fileWithPath = `${componentsDir}/${file}`
-  const fileContent = fs.readFileSync(fileWithPath, 'utf-8')
-
-  try {
-    const parserResult = parser(fileContent)
-    const r = new Render(parserResult)
-    const renderResult = r.render()
-    const markdownResult = r.renderMarkdown()
-    const markdownContent = markdownResult.content
-    const componentName = path.basename(fileWithPath, '.vue')
-
-    if (!fs.existsSync(outputDir)) {
-      fs.mkdirSync(outputDir)
-    }
-
-    fs.writeFile(`${outputDir}/${componentName}.md`, markdownContent, (err) => {
-      if (err) {
-        console.error(`Error writing markdown file for ${componentName}`, err)
-      } else {
-        console.log(`Markdown file for ${componentName} is generated!`)
-      }
-    })
-  } catch(e) {
-    console.error(e)
-  }
-}
-
-// To generate markdown files - one time
-components.forEach((component) => {
-  console.log(`Write markdown file for ${component} on first load.`)
-  generateMarkdown(component)
-})
-
-// To watch component changes and generate markdown files
-if (watchMode) {
-  const watcher = chokidar.watch(components, {
-    cwd: componentsDir,
-    ignoreInitial: true,
-  })
-
-  watcher.on('change', (file) => {
-    console.log(`The component ${file} has changed!`)
-    generateMarkdown(file)
-  })
-}
+/**
+ * Vuese Generator
+ *
+ * To generate markdown files from Vue components
+ * To watch components changes for Vitepress on Dev Mode
+ */
+
+import fs from 'fs'
+import path from 'path'
+import chokidar from 'chokidar'
+import { parser } from '@vuese/parser'
+import { Render } from '@vuese/markdown-render'
+
+const watchMode = process.argv.find((argv) => argv === 'watch')
+
+const componentsDir = 'src/components'
+const components = ['SideBar.vue']
+const outputDir = 'docs/components'
+
+function generateMarkdown(file) {
+  const fileWithPath = `${componentsDir}/${file}`
+  const fileContent = fs.readFileSync(fileWithPath, 'utf-8')
+
+  try {
+    const parserResult = parser(fileContent)
+    const r = new Render(parserResult)
+    const renderResult = r.render()
+    const markdownResult = r.renderMarkdown()
+    const markdownContent = markdownResult.content
+    const componentName = path.basename(fileWithPath, '.vue')
+
+    if (!fs.existsSync(outputDir)) {
+      fs.mkdirSync(outputDir)
+    }
+
+    fs.writeFile(`${outputDir}/${componentName}.md`, markdownContent, (err) => {
+      if (err) {
+        console.error(`Error writing markdown file for ${componentName}`, err)
+      } else {
+        console.log(`Markdown file for ${componentName} is generated!`)
+      }
+    })
+  } catch(e) {
+    console.error(e)
+  }
+}
+
+// To generate markdown files - one time
+components.forEach((component) => {
+  console.log(`Write markdown file for ${component} on first load.`)
+  generateMarkdown(component)
+})
+
+// To watch component changes and generate markdown files
+if (watchMode) {
+  const watcher = chokidar.watch(components, {
+    cwd: componentsDir,
+    ignoreInitial: true,
+  })
+
+  watcher.on('change', (file) => {
+    console.log(`The component ${file} has changed!`)
+    generateMarkdown(file)
+  })
+}