diff --git a/README.md b/README.md index 9155523..cb894f4 100644 --- a/README.md +++ b/README.md @@ -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 @@ -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 @@ -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 ``` @@ -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)** @@ -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 diff --git a/index.js b/index.js index bcde1b9..19d6455 100644 --- a/index.js +++ b/index.js @@ -1,3 +1,36 @@ import SparcDashboard from './src/components/SparcDashboard.vue'; +import "./tailwind/output.css" -export default SparcDashboard; \ No newline at end of file +//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 diff --git a/package.json b/package.json index e567ff3..6e9c178 100644 --- a/package.json +++ b/package.json @@ -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", @@ -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", diff --git a/src/components/BiolucidaViewer.vue b/src/components/BiolucidaViewer.vue index 5fc8a2a..869810e 100644 --- a/src/components/BiolucidaViewer.vue +++ b/src/components/BiolucidaViewer.vue @@ -1,5 +1,5 @@ \ No newline at end of file diff --git a/src/components/FlatmapViewer.vue b/src/components/FlatmapViewer.vue index 485839a..007a505 100644 --- a/src/components/FlatmapViewer.vue +++ b/src/components/FlatmapViewer.vue @@ -2,7 +2,7 @@

select anatomical location

- +
@@ -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 =""; diff --git a/src/components/ImageSelector.vue b/src/components/ImageSelector.vue index d21c96c..86021d7 100644 --- a/src/components/ImageSelector.vue +++ b/src/components/ImageSelector.vue @@ -3,7 +3,7 @@
- sub 1sub 2sub 3 + sub 1 sub 2sub 3
@@ -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; @@ -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' \ No newline at end of file diff --git a/src/components/SubjectNav.vue b/src/components/SubjectNav.vue index d55fbac..6c8c7ca 100644 --- a/src/components/SubjectNav.vue +++ b/src/components/SubjectNav.vue @@ -23,10 +23,9 @@