Merge pull request #37 from felenitaribeiro/tests-flr

tests for surface and surface overlay loading

Author: korbinian90

README.md

@@ -45,15 +45,25 @@ If niivue-vscode fails to open any of these files, please create an issue.
 
 ## Developing this extension in VSCode
 
+- Fork this repository;
 - Clone [this repository](https://github.com/korbinian90/niivue-vscode) and open in VSCode
 - Run inside the `niivue-vscode` folder
 
 ### Installing
 
 ```bash
-    yarn install
+    npm install --global yarn
+    yarn install:all
 ```
 
+It might be required to update *node* first before running 'yarn install'. This can be done with the following:
+
+```bash
+    npm install --global n
+    n latest
+```
+
+
 ### Hot Reload Development in browser
 
 ```bash

niivue/src/components/Menu.ts

@@ -5,6 +5,7 @@ import { addImagesEvent, addOverlayEvent, openImageFromURL } from '../events'
 import { SLICE_TYPE } from '@niivue/niivue'
 import { ScalingBox } from './ScalingBox'
 import { getMetadataString } from '../utility'
+import { getNumberOfPoints } from '../utility'
 import {
   HeaderDialog,
   ImageSelect,
@@ -163,7 +164,7 @@ export const Menu = (props: AppProps) => {
     selectedOverlayNumber.value = nOverlays.value - (isMesh.value ? 1 : 0)
     overlayMenu.value = true
   }
-
+  
   return html`
     <div class="flex flex-wrap items-baseline gap-2">
       ${!isVscode && html`<${MenuButton} label="Home" onClick=${homeEvent} />`}
@@ -221,6 +222,7 @@ export const Menu = (props: AppProps) => {
         <${MenuEntry} label="Select All" onClick=${selectAll} />
       </${ImageSelect}>
     </div>
+    <p class="pl-2">${isMesh.value? getNumberOfPoints(nvArraySelected.value[0]): 'No mesh'}</p>
     ${isVolume.value && html`<p class="pl-2">${getMetadataString(nvArraySelected.value[0])}</p>`}
     <${ScalingBox}
         selectedOverlayNumber=${selectedOverlayNumber}

niivue/src/events.ts

@@ -130,7 +130,22 @@ function addMeshOverlay(nv: Niivue, item: any, type: string) {
   if (type === 'replaceMeshOverlay') {
     mesh.layers.pop()
   }
-  NVMesh.readLayer(
+  if (!item.data) {
+    console.log('Running loadFromURL');
+    NVMesh.loadLayer(
+      {url: item.uri, 
+      opacity:a.opacity,
+      colormap:a.colormap,
+      colormapNegative:a.colormapNegative,
+      useNegativeCmap:a.useNegativeCmap,
+      cal_min:a.calMin,
+      cal_max:a.calMax,
+      },
+      mesh,
+      )
+  } else {
+    console.log('Running readLayer');
+    NVMesh.readLayer(
     item.uri,
     item.data,
     mesh,
@@ -140,7 +155,8 @@ function addMeshOverlay(nv: Niivue, item: any, type: string) {
     a.useNegativeCmap,
     a.calMin,
     a.calMax,
-  )
+    )
+  }
   mesh.updateMesh(nv.gl)
   nv.opts.isColorbar = true
   nv.updateGLVolume()

niivue/src/utility.ts

@@ -113,3 +113,9 @@ export function getMetadataString(nv: Niivue) {
   const timeString = meta.nt > 1 ? ', timepoints: ' + meta.nt : ''
   return matrixString + ', ' + voxelString + timeString
 }
+
+export function getNumberOfPoints(nv: Niivue) {
+  const mesh = nv?.meshes?.[0]
+  const matrixString = 'Number of Points: ' + mesh.pts.length / 3
+  return matrixString
+}

niivue/tests/example.spec.ts

@@ -85,6 +85,36 @@ test.describe('app', () => {
     expect(await page.$$('canvas')).toHaveLength(2)
   })
 
+  test('loads a test surface', async ({ page }) => {
+    await page.goto(BASE_URL);
+
+    await loadTestSurfImage(page);
+    await page.waitForTimeout(1000); // wait time to work around a bug
+
+    expect(await page.waitForSelector('canvas')).toBeTruthy();
+    expect(await page.$$('canvas')).toHaveLength(1);
+
+    await loadTestSurfImage(page);
+    expect(await page.$$('canvas')).toHaveLength(2);
+
+    expect(await page.textContent('text=/Number of Points: 40962/i')).toBeTruthy();
+  });
+
+  test('loads a test image and overlay', async ({ page }) => {
+    await page.goto(BASE_URL);
+
+    await loadTestSurfImage(page);
+
+    await page.waitForTimeout(1000); // duplicated code to work around a bug
+    await loadTestSurfImage(page); // duplicated code to work around a bug
+
+    await loadTestSurfOverlay(page, 'curv');
+
+    await page.waitForTimeout(1000); // duplicated code to work around a bug
+    await loadTestSurfOverlay(page, 'curv'); // duplicated code to work around a bug
+
+  });
+
   test('loads an image and checks the menu bar', async ({ page }) => {
     await page.goto(BASE_URL)
 
@@ -125,5 +155,38 @@ async function loadTestImage(page) {
       uri: testLink,
     },
   }
-  await page.evaluate((m) => window.postMessage(m, '*'), message)
+  await page.evaluate((m) => window.postMessage(m, '*'), message);
+}
+
+async function loadTestSurfImage(page) {
+  const testLink = 'https://niivue.github.io/niivue/images/BrainMesh_ICBM152.lh.mz3';
+  // send a message to the app to load the test image
+  const message = {
+    type: 'addImage',
+    body: {
+      data: '',
+      uri: testLink,
+    },
+  }
+  await page.evaluate((m) => window.postMessage(m, '*'), message);
+}
+
+async function loadTestSurfOverlay(page, file_type) {
+  let testLink;
+
+  if (file_type === 'curv') {
+    testLink = 'https://niivue.github.io/niivue/images/BrainMesh_ICBM152.lh.curv';
+  } else if (file_type === 'other') {
+    testLink = 'https://niivue.github.io/niivue/images/BrainMesh_ICBM152.lh.motor.mz3';
+  }
+  // send a message to the app to load the test image
+  const message = {
+    type: 'addMeshOverlay',
+    body: {
+      index: 0,
+      data: '',
+      uri: String(testLink),
+    },
+  }
+  await page.evaluate((m) => window.postMessage(m, '*'), message);
 }

package.json

@@ -138,7 +138,7 @@
     "*"
   ],
   "scripts": {
-    "install": "yarn install && cd niivue && yarn install",
+    "install:all": "yarn install && cd niivue && yarn install",
     "start:webview": "cd niivue && yarn run start",
     "build:webview": "cd niivue && yarn run build",
     "test:webview": "cd niivue && yarn run test",