initial publish

.github/workflows/deploy.yml

@@ -0,0 +1,21 @@
+name: Build and Deploy
+on:
+  push:
+    branches:
+      - main
+jobs:
+  build-and-publish-live-demo:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+
+      - name: Install and Build
+        run: |
+          npm install
+          npm run build
+      - name: Deploy
+        uses: JamesIves/github-pages-deploy-action@v4
+        with:
+          branch: demo # The branch the action should deploy to.
+          folder: dist # The folder the action should deploy.

.gitignore

@@ -0,0 +1,104 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+lerna-debug.log*
+
+# Diagnostic reports (https://nodejs.org/api/report.html)
+report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json
+
+# Runtime data
+pids
+*.pid
+*.seed
+*.pid.lock
+
+# Directory for instrumented libs generated by jscoverage/JSCover
+lib-cov
+
+# Coverage directory used by tools like istanbul
+coverage
+*.lcov
+
+# nyc test coverage
+.nyc_output
+
+# Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files)
+.grunt
+
+# Bower dependency directory (https://bower.io/)
+bower_components
+
+# node-waf configuration
+.lock-wscript
+
+# Compiled binary addons (https://nodejs.org/api/addons.html)
+build/Release
+
+# Dependency directories
+node_modules/
+jspm_packages/
+
+# TypeScript v1 declaration files
+typings/
+
+# TypeScript cache
+*.tsbuildinfo
+
+# Optional npm cache directory
+.npm
+
+# Optional eslint cache
+.eslintcache
+
+# Microbundle cache
+.rpt2_cache/
+.rts2_cache_cjs/
+.rts2_cache_es/
+.rts2_cache_umd/
+
+# Optional REPL history
+.node_repl_history
+
+# Output of 'npm pack'
+*.tgz
+
+# Yarn Integrity file
+.yarn-integrity
+
+# dotenv environment variables file
+.env
+.env.test
+
+# parcel-bundler cache (https://parceljs.org/)
+.cache
+
+# Next.js build output
+.next
+
+# Nuxt.js build / generate output
+.nuxt
+dist
+
+# Gatsby files
+.cache/
+# Comment in the public line in if your project uses Gatsby and *not* Next.js
+# https://nextjs.org/blog/next-9-1#public-directory-support
+# public
+
+# vuepress build output
+.vuepress/dist
+
+# Serverless directories
+.serverless/
+
+# FuseBox cache
+.fusebox/
+
+# DynamoDB Local files
+.dynamodb/
+
+# TernJS port file
+.tern-port

LICENSE

@@ -0,0 +1,25 @@
+BSD 2-Clause License
+
+Copyright (c) 2022, Niivue
+All rights reserved.
+
+Redistribution and use in source and binary forms, with or without
+modification, are permitted provided that the following conditions are met:
+
+1. Redistributions of source code must retain the above copyright notice, this
+   list of conditions and the following disclaimer.
+
+2. Redistributions in binary form must reproduce the above copyright notice,
+   this list of conditions and the following disclaimer in the documentation
+   and/or other materials provided with the distribution.
+
+THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS"
+AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE
+IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE
+DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT HOLDER OR CONTRIBUTORS BE LIABLE
+FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL
+DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR
+SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER
+CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY,
+OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
+OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.

README.md

@@ -0,0 +1,40 @@
+# NiiNav
+
+NiiNav is a tool for estimating scalp coordinates, such as those in the [10–20 EEG system](https://en.wikipedia.org/wiki/10%E2%80%9320_system_(EEG)), relative to MRI scans. This can be particularly useful for visualizing electrode positions for brain stimulation in scientific and clinical research.
+
+Recent research, including studies from [our team](https://pubmed.ncbi.nlm.nih.gov/30128538/), has shown that brain stimulation can support recovery from stroke (source). In prior work, we used functional MRI (fMRI) to identify optimal locations for brain stimulation. However, fMRI can be challenging for individuals with aphasia due to its acquisition requirements and signal variability.
+
+NiiNav addresses these limitations by allowing researchers to approximate brain stimulation sites using a standard anatomical MRI scan instead of fMRI. Although the effects of brain stimulation are broad and do not require high spatial precision, this tool helps ensure that stimulation targets healthy cortical areas. Since the stimulation effects are very broad, we do not need high spatial precision, but we do want to make sure that the stimulation is over healthy cortex. Therefore, this tool uses a simple anatomical scan to visualize brain injury and electrode positions.
+
+### Live Demo
+
+Try out [this repository in a live demo](https://neurolabusc.github.io/niinav/)
+
+Using this tool is simple:
+
+ 1. Drag and drop an anatomical scan (in NIfTI format) onto the live demo web page. 
+  - If your image is in DICOM format, you can convert it to NIfTI with [this web page](https://niivue.github.io/niivue-dcm2niix/).
+  - If you do not have an image, you can use the default image provided with the web page.
+ 2. Adjust the position of the [fiducial locations](https://eeglab.org/tutorials/ConceptsGuide/coordinateSystem.html) by double-clicking on the rendering.
+ 3. Once you are happy with the position of the fiducial markers (nasion, inion and helix-tragus junctions), uses the "Double Click" pull-down menu to switch to "Move Stimulation Site" - the position of a few standard electrodes as well as a suggested brain stimulation target are shown.
+ 4. At the stage, you can double-click to adjust the position of the "Target" node. You can use the "clip plane" check box to show or hide a clipping plane to visualize brain injury.
+ 5. These coordinates can be copied to a 10-20 swimming cap.
+ 6. You can press the "Save" button to save the scene.
+
+![NiiNav](NiiNav.png)
+
+### Compiling
+
+You can host your own instance locally, allowing you to extend this distribution.
+
+```
+git clone https://github.com/neurolabusc/niinav
+cd niinav
+npm install
+npm run dev
+```
+
+### Links
+
+ - NiiNav uses [NiiVue](https://github.com/niivue/niivue) for visualization.
+ - NiiNav uses [niimath WebAssembly](https://github.com/niivue/niivue-niimath) as described in [this article](https://apertureneuro.org/article/94384-niimath-and-fslmaths-replication-as-a-method-to-enhance-popular-neuroimaging-tools).

eslint.config.mjs

@@ -0,0 +1,16 @@
+import globals from "globals";
+
+import path from "path";
+import { fileURLToPath } from "url";
+import { FlatCompat } from "@eslint/eslintrc";
+import pluginJs from "@eslint/js";
+
+// mimic CommonJS variables -- not needed if using CommonJS
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__filename);
+const compat = new FlatCompat({baseDirectory: __dirname, recommendedConfig: pluginJs.configs.recommended});
+
+export default [
+  {languageOptions: { globals: globals.browser }},
+  ...compat.extends("airbnb-base"),
+];

index.html

@@ -0,0 +1,30 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" href="./favicon.ico" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width,initial-scale=1.0" />
+    <title>NiiNav</title>
+    <link rel="stylesheet" href="./niivue.css" />
+  </head>
+  <body>
+    <header>
+      <label for="meshLevel">Double Click</label>
+      <select id="meshLevel" disabled>
+        <option>Move Fiducials</option>
+        <option>Move Stimulation Site</option>
+      </select>
+      <button id="saveButton">Save</button>
+      <label for="clipCheck">Clip Plane</label>
+      <input type="checkbox" id="clipCheck" unchecked />
+      <button id="aboutButton">About</button>
+      <div id="loadingCircle" class="loading-circle hidden"></div>
+    </header>
+    <main>
+      <canvas id="gl"></canvas>
+    </main>
+    <footer id="intensity">&nbsp;</footer>
+    <script type="module" src="./main.js"></script>
+    </body>
+</html>