feat: load custom color

deploy/csp/index.js

@@ -120,7 +120,7 @@ module.exports = (app) => {
           'unpkg.com/react@16/umd/', // plugin load external lib -> react
           'unpkg.com/kg-dataset-previewer@1.2.0/', // preview component
           'cdnjs.cloudflare.com/ajax/libs/mathjax/', // math jax
-          'https://unpkg.com/three-surfer@0.0.1/dist/bundle.js', // for threeSurfer (freesurfer support in browser)
+          'https://unpkg.com/three-surfer@0.0.2/dist/bundle.js', // for threeSurfer (freesurfer support in browser)
           (req, res) => res.locals.nonce ? `'nonce-${res.locals.nonce}'` : null,
           ...SCRIPT_SRC,
           ...WHITE_LIST_SRC,

deploy/datasets/query.js

@@ -57,19 +57,24 @@ const getKgQuerySingleDatasetUrl = ({ kgId }) => {
 const fetchDatasetFromKg = async ({ user } = {}) => {
 
   const { releasedOnly, option } = await getUserKGRequestParam({ user })
-
   return await new Promise((resolve, reject) => {
-    request(`${KG_QUERY_DATASETS_URL}${releasedOnly ? '&databaseScope=RELEASED' : ''}`, option, (err, resp, body) => {
-      if (err) return reject(err)
-      if (resp.statusCode >= 400) return reject(resp.statusCode)
-      try {
-        const json = JSON.parse(body)
-        return resolve(json)
-      }catch (e) {
-        console.warn(`parsing json obj error`, body)
-        reject(e)
-      }
-    })
+    request(
+      `${KG_QUERY_DATASETS_URL}${releasedOnly ? '&databaseScope=RELEASED' : ''}`,
+      {
+        timeout: 60 * 1000,
+        ...option
+      },
+      (err, resp, body) => {
+        if (err) return reject(err)
+        if (resp.statusCode >= 400) return reject(resp.statusCode)
+        try {
+          const json = JSON.parse(body)
+          return resolve(json)
+        }catch (e) {
+          console.warn(`parsing json obj error`, body)
+          reject(e)
+        }
+      })
   })
 }
 

src/index.html

@@ -14,7 +14,7 @@
   
   <script src="https://unpkg.com/kg-dataset-previewer@1.2.0/dist/kg-dataset-previewer/kg-dataset-previewer.js" defer>
   </script>
-  <script src="https://unpkg.com/three-surfer@0.0.1/dist/bundle.js" defer></script>
+  <script src="https://unpkg.com/three-surfer@0.0.4/dist/bundle.js" defer></script>
 
   <title>Interactive Atlas Viewer</title>
   <script type="application/ld+json">

src/viewerModule/constants.ts

 import { InjectionToken } from "@angular/core";
 import { Observable } from "rxjs";
 
-export type TSupportedViewer = 'nehuba' | 'threeSurfer' | null
+export type TSupportedViewer = 'notsupported' | 'nehuba' | 'threeSurfer' | null
 
 export const VIEWERMODULE_DARKTHEME = new InjectionToken<Observable<boolean>>('VIEWERMODULE_DARKTHEME')

src/viewerModule/threeSurfer/threeSurferGlue/threeSurfer.component.ts

@@ -26,6 +26,7 @@ export class ThreeSurferGlueCmp implements IViewer, OnChanges, AfterViewInit, On
   private config: TThreeSurferConfig
   public modes: TThreeSurferMode[] = []
   public selectedMode: string
+  private colormap: Map<string, Map<number, [number, number, number]>> = new Map()
 
   constructor(
     private el: ElementRef
@@ -50,17 +51,24 @@ export class ThreeSurferGlueCmp implements IViewer, OnChanges, AfterViewInit, On
     this.selectedMode = mode.name
     const { meshes } = mode
     for (const singleMesh of meshes) {
-      const { mesh, colormap } = singleMesh
+      const { mesh, colormap, hemisphere } = singleMesh
       
       const tsM = await this.tsRef.loadMesh(
         parseContext(mesh, [this.config['@context']])
       )
+
+      const applyCM = this.colormap.get(hemisphere)
+
       this.loadedMeshes.push(tsM)
       const tsC = await this.tsRef.loadColormap(
         parseContext(colormap, [this.config['@context']])
       )
       const colorIdx = tsC[0].getData()
-      this.tsRef.applyColorMap(tsM, colorIdx)
+      this.tsRef.applyColorMap(tsM, colorIdx, 
+        {
+          custom: applyCM
+        }
+      )
     }
   }
 
@@ -79,6 +87,16 @@ export class ThreeSurferGlueCmp implements IViewer, OnChanges, AfterViewInit, On
           }
         )
       }
+
+      for (const region of this.selectedParcellation.regions) {
+        const map = new Map<number, [number, number, number]>()
+        for (const child of region.children) {
+          const color = (child.iav?.rgb as [number, number, number] ) || [200, 200, 200]
+          map.set(Number(child.grayvalue), color.map(v => v/255) as [number, number, number])
+        }
+        this.colormap.set(region.name, map)
+      }
+      
       // load mode0 by default
       this.loadMode(this.config.modes[0])
 

src/viewerModule/threeSurfer/types.ts

@@ -3,6 +3,7 @@ import { IContext } from './util'
 export type TThreeSurferMesh = {
   colormap: string
   mesh: string
+  hemisphere: 'left' | 'right'
 }
 
 export type TThreeSurferMode = {

src/viewerModule/viewerCmp/viewerCmp.component.ts

@@ -101,7 +101,7 @@ export class ViewerCmp implements OnDestroy {
       if (!t) return null
       if (!!t['nehubaConfigURL'] || !!t['nehubaConfig']) return 'nehuba'
       if (!!t['three-surfer']) return 'threeSurfer'
-      return null
+      return 'notsupported'
     })
   )
 

src/viewerModule/viewerCmp/viewerCmp.template.html

@@ -257,7 +257,11 @@
             [selectedParcellation]="parcellationSelected$ | async">
           </three-surfer-glue-cmp>
 
-          <div *ngSwitchDefault>Template not supported by any of the viewers</div>
+          <div *ngSwitchCase="'notsupported'">Template not supported by any of the viewers</div>
+          
+          <div *ngSwitchCaseDefault>
+            [ngSwitchDefault]
+          </div>
         </ng-container>
 
       </div>