README.md

mapintegratedvuer

This project aims to provide an application to visually navigate anatomical entities to discover functional and physiological datasets from organ-specific neural circuitry.

Components in mapintegratedvuer

Mapintegratedvuer includes multiple components for visualising data, the list of viewers can be found below:

Flatmapvuer

Scaffoldvuer

Simulationvuer

Plotvuer

Sidebar

mapintegratedvuer on NPM

mapintegratedvuer is available on npm and can be installed into your project with the following command:

npm i @abi-software/mapintegratedvuer

Project setup

npm install

Compiles and minifies for production

npm run build-bundle

How to use

Install the package in your vue app project with the following command "npm i @abi-software/mapintegratedvuer". Import the package in your script as followed:

import '@abi-software/mapintegratedvuer';
import '@abi-software/mapintegratedvuer/dist/mapintegratedvuer.css';

The codes above register the MapContent component in the global scope. You can now use the MapContent in your vue template as followed:

<MapContent />

Project setup from Github

The source code is available from Github, it can be found here: https://github.com/ABI-Software/mapintegratedvuer .

Clone the respositroy

git clone https://github.com/ABI-Software/mapintegratedvuer

Setup

npm install

Create an instance

npm run serve

Compiles and minifies for production

npm run build-bundle

Example

The following pagedemonstrates the mapintegratedapp in action: https://mapcore-demo.org/current/sparc-app/maps

Testing mapintegratedvuer dependencies in sparc-app

We will cover three options for updating nested dependencies.

1. Copy build files from npm run build-bundle

This works by directly changing files in node-modules/, where node will look to resolve dependencies.

cd <your-dependency>
npm run build-bundle
cp /dist <mapintegratedvuer-path>/node_modules/@<your-npmhandle>/<your-dependency>/dist
cd <mapintegratedvuer-path>
npm run build-bundle
cp /dist <sparc-app-path>/node_modules/@abi-software/mapintegratedvuer/dist
yarn dev

Note: this assumes assets in the static folders shipped with the npm package will remain unchanged

2. Use yarn link

This is a variant of option 1, where we use yarn link to create a symbolic link from mapintegratedvuer->spar-app It reduces the number of copies to 1, but still requires 3 builds

cd <your-dependency>
npm run build-bundle
cp /dist <mapintegratedvuer-path>/node_modules/@<your-npmhandle>/<your-dependency>/dist
cd <mapintegratedvuer-path>
npm run build-bundle
yarn link
cd sparc-app
yarn link @abi-software/mapintegratedvuer
yarn dev

(npm link does not work without disabling es-lint, which we won't go into)

3. Publish own version of mapintegratedvuer

This method is the most time consuming and has the downside of populating the npm package's version history with builds. Since it mimics the way sparc-app will use it, it's gauranteed to work.

cd <your-dependency>
npm run build-bundle
npm publish --tag alpha
cd mapintegratedvuer
npm install @<your-npmhandle>/<your-dependency>@alpha

Edit mapintegratedvuer/package.json: Change @abi-software/mapintegratedvuer to @<your-npm-handle>/mapintegratedvuer

cd mapintegratedvuer
npm run build-bundle
npm publish --tag alpha

Edit sparc-app/pages/maps/index.vue Change @abi-software/mapintegratedvuer to @<your-npm-handle>/mapintegratedvuer

cd sparc-app
yarn add @<your-npm-handle>/mapintegratedvuer@alpha
yarn dev

API Documentation

The API documentation is developed with vitepress and vuese. The API documentation pages are in the docs folder.

To run in local development mode

npm run docs:watch

This will start the documentation server with vitepress on port :5173 and watch the FlatmapVuer and MultiFlatmapVuer components changes.

The HelpModeDialog

The HelpModeDialog is used to show help tooltips individually and one by one. This is available on Flatmap, MultiFlatmap, and Scaffold views. To use HelpModeDialog, set useHelpModeDialog to true. The default value is false.

<MapContent
  ...
  :useHelpModeDialog="true"
/>