From 640ea0f08c50b79d2149aed910194d38606a42f3 Mon Sep 17 00:00:00 2001
From: Samantha Kraft <kraftsam@gmail.com>
Date: Fri, 5 Jul 2024 14:08:43 -0400
Subject: [PATCH] added all calls for image selector. made model for image
 selector and build table functionality

---
 src/assets/Model.js                           |  5 +-
 src/components/FlatmapViewer.vue              | 49 ++++++++++-
 src/components/ImageSelector.vue              | 18 +++--
 src/components/QDBGraph.vue                   |  1 +
 src/devComponents/ImageSelector/ImageModel.js | 37 +++++++++
 src/services/qdb.js                           |  4 +-
 src/stores/locationSelect.js                  | 81 +++++++++++++++++++
 7 files changed, 181 insertions(+), 14 deletions(-)
 create mode 100644 src/devComponents/ImageSelector/ImageModel.js
 create mode 100644 src/stores/locationSelect.js

diff --git a/src/assets/Model.js b/src/assets/Model.js
index 488800a..c768dcb 100644
--- a/src/assets/Model.js
+++ b/src/assets/Model.js
@@ -13,8 +13,9 @@ class Img
 export class Dataset
 {
     constructor(dataset){
-        this.Imgs = [];
-        dataset.forEach((img)=>this.Imgs.push(new Img(img)));
+        this.name = dataset.ImgName,
+        this.size = "...",
+        this.path = dataset.Path
     }
 }
 
diff --git a/src/components/FlatmapViewer.vue b/src/components/FlatmapViewer.vue
index 83c6c02..6d2c537 100644
--- a/src/components/FlatmapViewer.vue
+++ b/src/components/FlatmapViewer.vue
@@ -13,11 +13,13 @@
   import { ref, inject, nextTick} from "vue";
   import {FlatmapVuer, MultiFlatmapVuer} from '@abi-software/flatmapvuer';
   import { useOpenerStore } from "../stores/opener";
+  import { useLocationStore} from "../stores/locationSelect";
   FlatmapVuer.props.flatmapAPI.default="https://mapcore-demo.org/devel/flatmap/v4/";
   const disableFlatmapUI = true;
   let FlatmapReady = false;
 
-
+  const locationStore = useLocationStore();
+  locationStore.init()
 
   const emit = defineEmits(['setTitle']);
   emit('setTitle','Flatmap Selector'); 
@@ -31,11 +33,50 @@ function FlatmapSelected(data){
     if(locationId===data.feature.featureId){return;}
     locationId = data.feature.featureId;
     locationLabel.value = data.label;
+    const locationMinMax = tempMapToMinMax(locationId);
     //send to image selector
-    emitter.emit("anatomical-location-selected",locationId)
+    emitter.emit("anatomical-location-selected",locationMinMax)
+}
+//this function is my temp work around to not having the map return anything useful
+function tempMapToMinMax(id){
+    switch(id) {
+            case 3:
+                return {
+                    min: 0.0,
+                    max: 0.1
+                }
+            case 6:
+                return {
+                    min: 0.1,
+                    max: 0.2
+                }
+            case 11:
+                return {
+                    min: 0.2,
+                    max: 0.3
+                }
+            case 11:
+                return {
+                    min: 0.3,
+                    max: 0.4
+                }
+            case 14:
+                return {
+                    min: 0.4,
+                    max: 0.5
+                }
+            case 50:
+                return {
+                    min: 0.5,
+                    max: 0.7
+                }
+            default:
+                return {
+                    min:0.7,
+                    max:0.8
+                };
+        }
 }
-
-
 
 </script>
 <style scoped lang="scss">
diff --git a/src/components/ImageSelector.vue b/src/components/ImageSelector.vue
index a63c00a..451635b 100644
--- a/src/components/ImageSelector.vue
+++ b/src/components/ImageSelector.vue
@@ -20,7 +20,7 @@
 <script setup>
     import { ref, inject, nextTick } from "vue";
     import { useOpenerStore } from "../stores/opener";
-    import {Dataset} from '../assets/Model';
+    import { TableObject} from "../devComponents/ImageSelector/ImageModel"
     import { Api } from "../services";
     const emitter = inject('emitter');
 
@@ -29,9 +29,10 @@
     })    
     
     import imageMod from "../assets/imgs/imgInfo.png"
-    let imgPath = ref(null);
-
-    let TableData = ref();
+    const imgPath = ref(null);
+    const imageArray = ref(null);
+    const imageType = ref("");
+    const TableData = ref();
 
     const emit = defineEmits(['setTitle'])
     emit('setTitle','MUSE Image Selector');
@@ -39,11 +40,13 @@
 function selectImage(index){
     let img = TableData.value[index].path;
     emitter.emit("mbf-image-selected",img);
-//  opener.openWidget("BiolucidaViewer", [{key:"mbfLink",value:img}])
 }
 
-emitter.on('anatomical-location-selected',(location)=>{
-    getImagesFromDataset(location);
+emitter.on('MBFImageArray-Update',(imageArray)=>{
+    //buildDataTable
+    imageArray.value = new TableObject(imageArray);
+
+    TableData.value = imageArray.value.buildTableMBF();
 });
 //on update
 const getImagesFromDataset = async (datasetId)=>{
@@ -57,6 +60,7 @@ const getImagesFromDataset = async (datasetId)=>{
                 })
                 if (_response.status === 200) {
                 _biolucidaImageData = _response;
+                //buildTable needs to belong to ImageModel/s 
                 buildDataTable(Object.assign(new Dataset(_biolucidaImageData.data.dataset_images)).Imgs);
                 }
             }catch(e){
diff --git a/src/components/QDBGraph.vue b/src/components/QDBGraph.vue
index acc29b0..2532f7f 100644
--- a/src/components/QDBGraph.vue
+++ b/src/components/QDBGraph.vue
@@ -48,6 +48,7 @@
 
 //called by Graph Settings component
 function updateChart(data){
+  //graphSettingsObject needs to be entirely new obj in order for chartData to update on the DOM
   graphSettingsObject = data.clone();
   chartData.value = graphSettingsObject.returnSettingsData();
   visualizationComponent.value=VisualizationMap.get(graphSettingsObject.visualization);
diff --git a/src/devComponents/ImageSelector/ImageModel.js b/src/devComponents/ImageSelector/ImageModel.js
new file mode 100644
index 0000000..9f816b0
--- /dev/null
+++ b/src/devComponents/ImageSelector/ImageModel.js
@@ -0,0 +1,37 @@
+class MBFImageObject {
+    constructor(imageObj = {}){
+        this.id = imageObj.id || "";
+    }
+
+    clone() {
+        const clonedObject = new MBFImageObject();
+        clonedObject.id = this.id;
+        return clonedObject;
+      }
+}
+ class SparcImageObject
+{
+    constructor(data){
+        this.id = data.id;
+    }
+}
+export class TableObject{
+    constructor(array = {}){
+        this.SparcImageArray = [];
+        array.forEach((img)=>this.SparcImageArray.push(new SparcImageObject(img)))
+        this.MBFImageObject = [];
+        array.forEach((img)=>this.MBFImageObject.push(new MBFImageObject(img)))
+    }
+    buildTableMBF(){
+        let _tempArr=[];
+        this.MBFImageObject.forEach((img)=>{
+            let column = {
+                name:img.id,
+                size: "...",
+                path: ""
+            }
+            _tempArr.push(column);
+        })
+        return _tempArr;
+    }
+}
\ No newline at end of file
diff --git a/src/services/qdb.js b/src/services/qdb.js
index 0f33f9e..a641743 100644
--- a/src/services/qdb.js
+++ b/src/services/qdb.js
@@ -6,7 +6,9 @@ const CreateBaseApiService = () => {
     // Get a list of classes qdb contains
     getClasses: () => axios.get(`${base}classes`),
     getAspectsFromMetric: (metric) => axios.get(`${base}aspects?desc-inst=${metric}`),
-    getDataByAspect: (metric, aspect)=> axios.get(`${base}values/quant?aspect=${aspect}&desc-inst=${metric}`)
+    getDataByAspect: (metric, aspect)=> axios.get(`${base}values/quant?aspect=${aspect}&desc-inst=${metric}`),
+    getLocationMinMax:(min, max, subject)=>axios.get(`${base}values/quant?aspect=distance-via-reva-ft-sample-id-normalized-v1&subject=${subject}&value-quant-min=${min}&value-quant-max=${max}`),
+    getImagesByInstance:(dataset,instance)=>axios.get(`${base}objects?dataset=${dataset}&inst=${instance}`)
   };
 };
 
diff --git a/src/stores/locationSelect.js b/src/stores/locationSelect.js
new file mode 100644
index 0000000..35f31b8
--- /dev/null
+++ b/src/stores/locationSelect.js
@@ -0,0 +1,81 @@
+import { ref, inject } from 'vue'
+import { defineStore } from 'pinia'
+import { Api } from "../services";
+
+
+export const useLocationStore = defineStore('locationSelected', () => {
+  const emitter = inject('emitter');
+    function init(){
+
+      emitter.on('anatomical-location-selected',(location)=>{
+        if(location && location.min && location.max){
+          getRegionMinMax(location.min,location.max);
+        }
+      });
+    }
+
+//call for min/max
+const getRegionMinMax = async(min, max, subject)=>{
+    subject = "sub-f001";
+    let _instance_list = {};
+    let _response = {};
+    try{
+        await Api.qdb.getLocationMinMax(min,max,subject).then(response =>{
+            _response = response;
+        })
+        if (_response.status === 200) {
+          _instance_list = _response.data.result;
+          handleMinMaxRequest(_instance_list);
+        }
+    }catch(e){
+        console.error("couldn't get min max region "+subject+" from QDB /n min: "+min +" max: "+ max);
+        console.log(e)
+    }
+}
+function handleMinMaxRequest(results){
+    const instances =results.filter(y => y.agg_type ==="instance");
+    getPackageIds(instances)
+}
+
+//call for min/max
+
+const getPackageIds = async(instances)=>{
+  let ImagesArray = [];
+  for(var i=0;i<instances.length;i++){
+      let _image_list = {};
+      let _response = {};
+      const instance = instances[i].inst || null;
+      const dataset = instances[i].dataset || null;
+      try{
+          await Api.qdb.getImagesByInstance(dataset,instance).then(response =>{
+              _response = response;
+          })
+          if (_response.status === 200) {
+            _image_list = _response.data.result;
+            ImagesArray = [...ImagesArray, ..._image_list]
+          }
+      }catch(e){
+          console.error("couldn't get images from instance "+instance+" and dataset "+dataset+" from QDB");
+          console.log(e)
+    }
+  }
+  ImagesArray = ImagesArray.filter(x=>x.id_type!=="quantdb"&& x.id);
+  emitter.emit('MBFImageArray-Update',ImagesArray);
+}
+//https://services.scicrunch.io/quantdb/api/1/values/quant?aspect=distance-via-reva-ft-sample-id-normalized-v1&subject=sub-f001&value-quant-min=0.0&value-quant-max=0.1
+
+// call for each dataset and instance/segment
+//https://services.scicrunch.io/quantdb/api/1/objects?dataset=aa43eda8-b29a-4c25-9840-ecbd57598afc&inst=sam-c-seg-15c
+//check for unique inst and dataset... and later clarify what the min/max ones are
+
+//if you get all of those then you will have a package id for each one that is associated with one jpg2000 (hopefully)
+//user clicks on image
+//that's when you need this call to get an image
+//https://sparc.biolucida.net/api/v1/imagemap/sharelink/N:package:ad977506-77bf-4f3b-93b3-41f6426c0b44/268
+//package id and dataset id... but need to clarify dataset id. 
+//then you get biolucida image path... uhg. 
+
+  const componentList = ref([""]);
+  const navigatorType = ref("LocationNav");//default 
+  return { init, navigatorType }
+})