Skip to content

Commit

Permalink
update events in all components. add functionality to open mbf viewer…
Browse files Browse the repository at this point in the history 
… on selection
  • Loading branch information
Samantha Kraft authored and Samantha Kraft committed Apr 11, 2024
1 parent 368d754 commit e1a7273
Show file tree
Hide file tree
Showing 15 changed files with 227 additions and 135 deletions.
69 changes: 61 additions & 8 deletions README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@ https://nih-sparc.github.io/TestDashboard/?path=/docs/components-biolucidaviewer

## Recommended IDE Setup

[VSCode](https://code.visualstudio.com/) + [Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar) (and disable Vetur) + [TypeScript Vue Plugin (Volar)](https://marketplace.visualstudio.com/items?itemName=Vue.vscode-typescript-vue-plugin).
[VSCode](https://code.visualstudio.com/)

## Type Support for `.vue` Imports in TS

Expand Down Expand Up @@ -48,6 +48,59 @@ Yarn run build
Yarn run lint
```

## Dependency Setup

If you are installing this project as a node module dependency you need the following installed in your project.
Vue(^3.3.4), Pinia(^2.1.7), mitt (^3.0.1), sparc-design-system-components-2 (0.0.26)

```sh
yarn add pina
yarn add vue
yarn add mitt
yarn add sparc-design-system-components-2
```
### Adding dependencies to your project

```js

import { createApp, defineAsyncComponent } from 'vue'
import mitt from 'mitt'
import DesignSystemComponentsPlugin from 'sparc-design-system-components-2'
import App from './App.vue'
//this allows for dynamically importing components
import { useGlobalVarsStore } from '../node_modules/sparc-dashboard-beta/src/stores/globalVars'
import { createPinia } from 'pinia'

const app = createApp(App);

//import mitt and set as emitter
const emitter = mitt();
app.provide('emitter', emitter);

//list whichever components you want available and import them dynamically
const componentMap = [
'SubjectNav',
'ImageSelector',
'ImageViewer',
'LocationNav',
'FlatmapViewer',
'BiolucidaViewer'
]
componentMap.forEach(comp=>{
const asyncComponent = defineAsyncComponent(() => import(`../node_modules/sparc-dashboard-beta/src/components/${comp}.vue`));
app.component(comp, asyncComponent);
})

app.use(createPinia());
//add list of components to add componet drop down
const globalVars = useGlobalVarsStore();
globalVars.componentList = componentMap;


app.use(DesignSystemComponentsPlugin);
app.mount('#app');

```

# DOCUMENTATION
- adding custom component to dashboard
Expand Down Expand Up @@ -91,8 +144,8 @@ These are passed down to the your component (SampleComponent) from its wrapper v
name of component tag. Changing this will change the title of the wrapper. If you want a display name that is different from the file name.
Set Display name (widgetName) using emit.
```
const emit = defineEmits(['setName']);
emit('setName','New Custom Component!'); //replace with component name you want shown
const emit = defineEmits(['setTitle']);
emit('setTitle','New Custom Component!'); //replace with component name you want shown
```


Expand Down Expand Up @@ -121,13 +174,13 @@ emit('SampleComponent-eventName',payload);

### OPTIONS

***setName:***
***setTitle:***
component ‘s name defaults to it’s vue tag-name. This allows you override it and add a different name

Example:
```
const emit = defineEmits(['setName']);
emit('setName','MUSE Image Viewer');
const emit = defineEmits(['setTitle']);
emit('setTitle','MUSE Image Viewer');
```

**other options to come. Examples might include a standard way of setting a filter that most widgets would find useful (age/sex/metadata for example)**
Expand Down Expand Up @@ -170,8 +223,8 @@ Here is an example of the SampleComponent.vue file as of 1/26/2024. See github f
}
})
const emit = defineEmits(['setName']);
emit('setName','New Custom Component!'); //replace with component name you want shown
const emit = defineEmits(['setTitle']);
emit('setTitle','New Custom Component!'); //replace with component name you want shown
//emit and event
Expand Down
35 changes: 34 additions & 1 deletion index.js
View file
Original file line number Diff line number Diff line change
@@ -1,3 +1,36 @@
import SparcDashboard from './src/components/SparcDashboard.vue';
import "./tailwind/output.css"

export default SparcDashboard;
//import { defineAsyncComponent } from 'vue'
//import mitt from 'mitt'
//import { useGlobalVarsStore } from './src/stores/globalVars'

export default SparcDashboard;

export function install(app) {
// Register your component globally
//app.component('SparcDashboard', SparcDashboard);

// Set up any dependencies here. Example with mitt:
//const emitter = mitt();
//app.config.globalProperties.$emitter = emitter;

// const componentMap = [
// 'SubjectNav',
// 'ImageSelector',
// 'ImageViewer',
// 'LocationNav',
// 'FlatmapViewer',
// 'BiolucidaViewer'
// ]
// componentMap.forEach(comp=>{
// const asyncComponent = defineAsyncComponent(() => import(`./components/${comp}.vue`));
// app.component(comp, asyncComponent);
// })

//add list of components to add componet drop down
//const globalVars = useGlobalVarsStore();
//globalVars.componentList = componentMap;

}
//instruct users to install
4 changes: 2 additions & 2 deletions package.json
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "sparc-dashboard-beta",
"version": "0.1.0",
"version": "0.1.4",
"author": "Sam Kraft (https://Sparc.Science)",
"private": false,
"main": "index.js",
Expand All @@ -21,7 +21,7 @@
"sparc-design-system-components-2": "0.0.26",
"@tsconfig/node21": "^21.0.1",
"axios": "^1.6.7",
"element-plus": "^2.4.3",

"gridstack": "^9.5.0",
"mitt": "^3.0.1",
"pinia": "^2.1.7",
Expand Down
64 changes: 41 additions & 23 deletions src/components/BiolucidaViewer.vue
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
<template>
<div class="flex flex-col">
<div class="flex flex-col h-full">
<div class="bv-metadata text-left p-1 text-sm">
<p><span>Dataset: </span>
Dataset Name Here </p>
Expand All @@ -11,48 +11,66 @@
</div>
</template>
<script setup>
import {ref, watch, inject} from "vue";
import {ref, onMounted, onUnmounted, inject} from "vue";
import { Api } from "../services";
import {Dataset} from '../assets/Model';
import { useOpenerStore } from "../stores/opener";
const emit = defineEmits(['setTitle','selectWidget']);
const props = defineProps({
imageID:0,
mbfLink: {type:String}
mbfLink: {type:String},
listening:{
tyep:Boolean
}
})
const emitter = inject('emitter');
let mbfURLSrc =ref(props.mbfLink);
const opener = useOpenerStore();
// watch(() => mbfLink.value, (newVal) => {
// console.log(mbfLink);
// });
onMounted(() => {
emit('setTitle','MBF Image Viewer');
opener.mbfViewerCount++;
});
onUnmounted(()=>{
opener.mbfViewerCount--;
})
emitter.on('mbf-image-selected',(img)=>{
mbfURLSrc.value=img;
});
const getImageURLByID = async(_imageId)=>{
let _biolucidaUrl = {};
let _response ={};
try{
await Api.biolucida.getBLVLink(_imageId).then(response =>{
_response = response;
if(_response.status===200){
_biolucidaUrl = response;
mbfLink.value = response.data.link;
}
})
}catch(e){
console.error("couldn't get image url by id");
}
if(opener.mbfViewerCount>1 && props.listening || opener.mbfViewerCount==1){
mbfURLSrc.value=img;
}
});
// const getImageURLByID = async(_imageId)=>{
// let _biolucidaUrl = {};
// let _response ={};
// try{
// await Api.biolucida.getBLVLink(_imageId).then(response =>{
// _response = response;
// if(_response.status===200){
// _biolucidaUrl = response;
// mbfLink.value = response.data.link;
// }
// })
// }catch(e){
// console.error("couldn't get image url by id");
// }
// }
// getImageURLByID(21572);
</script>
<style scoped lang="scss">
@import '../assets/delete-when-dsc2-imported/_variables.scss';
.bv-metadata{
span{
font-weight: bold;
}
}
.hightlight{
border:solid $lightPurple 2px !important;
}
</style>
7 changes: 4 additions & 3 deletions src/components/FlatmapViewer.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@
<div class="flatmap-viewer">
<div class="text-left pl-1"><p>select anatomical location</p></div>

<FlatmapVuer class="px-2 py-2" disableUI="true" entry="UBERON:1759" v-on:resource-selected="FlatmapSelected" v-on:ready="FlatmapReady"/>
<FlatmapVuer class="px-2 py-2" :disableUI="disableFlatmapUI" entry="UBERON:1759" v-on:resource-selected="FlatmapSelected" v-on:ready="FlatmapReady"/>

</div>

Expand All @@ -12,9 +12,10 @@
import {FlatmapVuer, MultiFlatmapVuer} from '@abi-software/flatmapvuer';
import { useOpenerStore } from "../stores/opener";
FlatmapVuer.props.flatmapAPI.default="https://mapcore-demo.org/devel/flatmap/v4/";
const disableFlatmapUI = true;
const emit = defineEmits(['setName']);
emit('setName','New Custom Component!');
const emit = defineEmits(['setTitle']);
emit('setTitle','Flatmap Vagus Selector');
const emitter = inject('emitter');
let Location ="";
Expand Down
14 changes: 3 additions & 11 deletions src/components/ImageSelector.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@
<img :src=imgPath>
</div>
<div class="p-1">
<el-select placeholder="Select Subject"><el-option>sub 1</el-option><el-option>sub 2</el-option><el-option>sub 3</el-option></el-select>
<el-select placeholder="Select Subject"><el-option :value="0">sub 1 </el-option> <el-option :value="1">sub 2</el-option><el-option :value="2">sub 3</el-option></el-select>
</div>
<el-table :data="TableData" class="table-of-images text-sm">
<el-table-column prop="name" label="Name"/>
Expand All @@ -29,8 +29,8 @@
let TableData = ref();
const emit = defineEmits(['setName'])
emit('setName','MUSE Image Selector');
const emit = defineEmits(['setTitle'])
emit('setTitle','MUSE Image Selector');
function selectImage(index){
let img = TableData.value[index].path;
Expand Down Expand Up @@ -77,14 +77,6 @@ function buildDataTable(Imgs){
imgPath2.value = "./imgs/imgSel.png";
imgPath3.value = "./imgs/imgSel2.png";
});
// onMounted(()=>{
// opener.imageSelectorOpen = true;
// })
// onUnmounted(()=>{
// opener.imageSelectorOpen = false;
// })
//'./imgs/imgInfo.png'
</script>
<style scoped>
Expand Down
35 changes: 8 additions & 27 deletions src/components/ImageViewer.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@
<div class="metadata-imgV">

</div>
<div ref="instance" @click="listening = !listening" class="viewer-img">
<div ref="instance" class="viewer-img">
<img :src=props.imageSrc>
</div>
</template>
Expand All @@ -19,44 +19,25 @@
type:String,
required:true
},
widgetID:{
type:String,
required:true
},
imageSrc:{
type:String
},
listening:{
tyep:Boolean
}
})
const listening = ref(false);
const emit = defineEmits(['setName']);
emit('setName','MUSE Image Viewer');
// emitter.on('SparcDashboard-addNewWidget', (value) => {
// if(value[0])
// if(listening.value || opener.ImageViewerCount===1){
// imgPath.value = value;
// }
// });
const emit = defineEmits(['setTitle']);
emit('setTitle','MUSE Image Viewer');
//uses widgetID to specify own wrapper
watch(() => listening.value, (newVal, oldVal) => {
emitter.emit('ImageViewwer-imageSelected-'+props.widgetID, newVal);
watch(() => props.listening, (newVal, oldVal) => {
//emitter.emit('select-widget'+props.widgetID, newVal);
});
// onMounted(()=>{
// opener.ImageViewerOpen = true;
// opener.ImageViewerCount++;
// })
// onUnmounted(()=>{
// opener.ImageViewerOpen = false;
// opener.ImageViewerCount--;
// })
//have the data on the dashboard save, not just the positions
</script>
<style scoped lang="scss">
@import '../assets/delete-when-dsc2-imported/_variables.scss';
Expand Down
Loading

0 comments on commit e1a7273

Please sign in to comment.