Merge pull request #1229 from FZJ-INM1-BDA/bugfix_misc

misc bug fixes

.dockerignore

+node_modules
\ No newline at end of file

.github/workflows/docker_img.yml

@@ -55,13 +55,6 @@ jobs:
 
     - name: 'Set version variable & expmt feature flag'
       run: |
-        GIT_HASH=$(git rev-parse --short HEAD)
-        echo "Setting GIT_HASH: $GIT_HASH"
-        echo "GIT_HASH=$GIT_HASH" >> $GITHUB_ENV
-
-        VERSION=$(jq -r '.version' package.json)
-        echo "Setting VERSION: $VERSION"
-        echo "VERSION=$VERSION" >> $GITHUB_ENV
         if [[ "$GITHUB_REF" == 'refs/heads/master' ]] || [[ "$GITHUB_REF" == 'refs/heads/staging' ]]
         then
           echo "prod/staging build, do not enable experimental features"
@@ -74,8 +67,6 @@ jobs:
         DOCKER_BUILT_TAG=${{ env.DOCKER_REGISTRY }}siibra-explorer:$BRANCH_NAME
         echo "Building $DOCKER_BUILT_TAG"
         docker build \
-          --build-arg GIT_HASH=$GIT_HASH \
-          --build-arg VERSION=$VERSION \
           --build-arg MATOMO_URL=$MATOMO_URL \
           --build-arg MATOMO_ID=$MATOMO_ID \
           --build-arg SIIBRA_API_ENDPOINTS=$SIIBRA_API_ENDPOINTS \

.storybook/preview-head.html

@@ -11,3 +11,4 @@
 </style>
 <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous">
 <script type="module" src="https://unpkg.com/hbp-connectivity-component@0.6.2/dist/connectivity-component/connectivity-component.js" defer></script>
+<link rel="stylesheet" href="icons/iav-icons.css">

.storybook/preview.js

@@ -4,6 +4,14 @@ setCompodocJson(docJson);
 
 import 'src/theme.scss'
 
+/**
+ * load custom icons
+ */
+import '!!file-loader?context=src/res&name=icons/iav-icons.css!src/res/icons/iav-icons.css'
+import '!!file-loader?context=src/res&name=icons/iav-icons.ttf!src/res/icons/iav-icons.ttf'
+import '!!file-loader?context=src/res&name=icons/iav-icons.woff!src/res/icons/iav-icons.woff'
+import '!!file-loader?context=src/res&name=icons/iav-icons.svg!src/res/icons/iav-icons.svg'
+
 export const parameters = {
   actions: { argTypesRegex: "^on[A-Z].*" },
   controls: {

Dockerfile

@@ -24,11 +24,6 @@ ENV EXPERIMENTAL_FEATURE_FLAG=${EXPERIMENTAL_FEATURE_FLAG:-false}
 ARG ENABLE_LEAP_MOTION
 ENV ENABLE_LEAP_MOTION=${ENABLE_LEAP_MOTION:-false}
 
-ARG GIT_HASH
-ENV GIT_HASH=${GIT_HASH:-unknownhash}
-
-ARG VERSION
-ENV VERSION=${VERSION:-unknownversion}
 
 COPY . /iv
 WORKDIR /iv

build_env.md

@@ -4,7 +4,6 @@ As interactive atlas viewer uses [webpack define plugin](https://webpack.js.org/
 
 | name | description | default | example |
 | --- | --- | --- | --- |
-| `VERSION` | printed in console on viewer startup | `GIT_HASH` \|\| unspecificed hash | v2.2.2 |
 | `PRODUCTION` | if the build is for production, toggles optimisations such as minification | `undefined` | true |
 | `BACKEND_URL` | backend that the viewer calls to fetch available template spaces, parcellations, plugins, datasets | `null` | https://interactive-viewer.apps.hbp.eu/ |
 | ~~`BS_REST_URL`~~ _deprecated. use `SIIBRA_API_ENDPOINTS` instead_ | [siibra-api](https://github.com/FZJ-INM1-BDA/siibra-api) used to fetch different resources | `https://siibra-api-stable.apps.hbp.eu/v1_0` |

common/constants.js

@@ -136,7 +136,11 @@ If you do not accept the Terms & Conditions you are not permitted to access or u
     LOADING_ANNOTATION_MSG: `Loading annotations... Please wait...`,
 
     ATLAS_SELECTOR_LABEL_SPACES: `Spaces`,
-    ATLAS_SELECTOR_LABEL_PARC_MAPS: `Parcellation maps`
+    ATLAS_SELECTOR_LABEL_PARC_MAPS: `Parcellation maps`,
+
+    TOGGLE_LAYER_VISILITY: 'Toggle layer visility',
+    ORIENT_TO_LAYER: 'Orient to layer native orientation',
+    CONFIGURE_LAYER: 'Configure layer'
   }
 
   exports.QUICKTOUR_DESC ={

common/helpOnePager.md

@@ -10,6 +10,7 @@
 | Next slice | `<ctrl>` + `[mousewheel]` | - |
 | Next 10 slice | `<ctrl>` + `<shift>` + `[mousewheel]` | - |
 | Toggle delineation | `[q]` | - |
+| Toggle cross hair | `[a]` | - |
 
 ---
 

common/util.js

@@ -239,5 +239,78 @@
   exports.isVec4 = isVec4
   exports.isMat4 = isMat4
 
+  const cipher = '0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz_-'
+  const negString = '~'
+
+  const encodeInt = (number) => {
+    if (number % 1 !== 0) { throw new Error('cannot encodeInt on a float. Ensure float flag is set') }
+    if (isNaN(Number(number)) || number === null || number === Number.POSITIVE_INFINITY) { throw new Error('The input is not valid') }
+  
+    let residual
+    let result = ''
+  
+    if (number < 0) {
+      result += negString
+      residual = Math.floor(number * -1)
+    } else {
+      residual = Math.floor(number)
+    }
+  
+    /* eslint-disable-next-line no-constant-condition */
+    while (true) {
+      result = cipher.charAt(residual % 64) + result
+      residual = Math.floor(residual / 64)
+  
+      if (residual === 0) {
+        break
+      }
+    }
+    return result
+  }
+  const decodeToInt = (encodedString) => {
+    let _encodedString
+    let negFlag = false
+    if (encodedString.slice(-1) === negString) {
+      negFlag = true
+      _encodedString = encodedString.slice(0, -1)
+    } else {
+      _encodedString = encodedString
+    }
+    return (negFlag ? -1 : 1) * [..._encodedString].reduce((acc, curr) => {
+      const index = cipher.indexOf(curr)
+      if (index < 0) { throw new Error(`Poisoned b64 encoding ${encodedString}`) }
+      return acc * 64 + index
+    }, 0)
+  }
+
+  exports.sxplrNumB64Enc = {
+    separator: ".",
+    cipher,
+    encodeNumber: (number, opts = { float: false }) => {
+      const { float } = opts
+      if (!float) {
+        return encodeInt(number)
+      } else {
+        const floatArray = new Float32Array(1)
+        floatArray[0] = number
+        const intArray = new Uint32Array(floatArray.buffer)
+        const castedInt = intArray[0]
+        return encodeInt(castedInt)
+      }
+    },
+    decodeToNumber: (encodedString, opts = { float: false }) => {
+      const { float } = opts
+      if (!float) {
+        return decodeToInt(encodedString)
+      } else {
+        const _int = decodeToInt(encodedString)
+        const intArray = new Uint32Array(1)
+        intArray[0] = _int
+        const castedFloat = new Float32Array(intArray.buffer)
+        return castedFloat[0]
+      }
+    }
+  }
+
 
 })(typeof exports === 'undefined' ? module.exports : exports)

deploy/bkwdCompat/urlState.js

 // this module is suppose to rewrite state stored in query param
 // and convert it to path based url
-const separator = '.'
+const { sxplrNumB64Enc } = require("../../common/util")
+
+const {
+  encodeNumber,
+  separator
+} = sxplrNumB64Enc
+
 const waxolmObj = {
   aId: 'minds/core/parcellationatlas/v1.0.0/522b368e-49a3-49fa-88d3-0870a307974a',
   id: 'minds/core/referencespace/v1.0.0/d5717c4a-0fa1-46e6-918c-b8003069ade8',
@@ -131,7 +137,7 @@ module.exports = (query, _warningCb) => {
     regionsSelected, // deprecating - check if any one calls this url
     cRegionsSelected,
 
-    navigation, // deprecating - check if any one calls this endpoint
+    navigation,
     cNavigation,
   } = query || {}
 
@@ -146,7 +152,6 @@ module.exports = (query, _warningCb) => {
     if (Object.values(WARNING_STRINGS).includes(arg)) _warningCb(arg)
   }
 
-  if (navigation) console.warn(`navigation has been deprecated`)
   if (regionsSelected) console.warn(`regionSelected has been deprecated`)
   if (niftiLayers) console.warn(`nifitlayers has been deprecated`)
 
@@ -160,6 +165,30 @@ module.exports = (query, _warningCb) => {
 
   // common search param & path
   let nav, dsp, r
+  if (navigation) {
+    try {
+
+      const [
+        _o, _po, _pz, _p, _z
+      ] = navigation.split("__")
+      const o = _o.split("_").map(v => Number(v))
+      const po = _po.split("_").map(v => Number(v))
+      const pz = Number(_pz)
+      const p = _p.split("_").map(v => Number(v))
+      const z = Number(_z)
+      const v = [
+        o.map(n => encodeNumber(n, {float: true})).join(separator),
+        po.map(n => encodeNumber(n, {float: true})).join(separator),
+        encodeNumber(Math.floor(pz)),
+        Array.from(p).map(v => Math.floor(v)).map(n => encodeNumber(n)).join(separator),
+        encodeNumber(Math.floor(z)),
+      ].join(`${separator}${separator}`)
+
+      nav = `/@:${encodeURI(v)}`
+    } catch (e) {
+      console.warn(`Parsing navigation param error`, e)
+    }
+  }
   if (cNavigation) nav = `/@:${encodeURI(cNavigation)}`
   if (previewingDatasetFiles) {
     try {

src/atlasComponents/sapiViews/core/parcellation/parcellationVersion.pipe.spec.ts

@@ -6,13 +6,16 @@ import { getTraverseFunctions } from "./parcellationVersion.pipe"
 describe(`parcellationVersion.pipe.ts`, () => {
   describe("getTraverseFunctions", () => {
     let julichBrainParcellations: SapiParcellationModel[] = []
+    let endpoint: string
     beforeAll(async () => {
       const bsEndPoint = await SAPI.BsEndpoint$.toPromise()
+      endpoint = bsEndPoint
       const res = await fetch(`${bsEndPoint}/atlases/${encodeURIComponent(IDS.ATLAES.HUMAN)}/parcellations`)
       const arr: SapiParcellationModel[] = await res.json()
       julichBrainParcellations = arr.filter(it => /Julich-Brain Cytoarchitectonic Maps/.test(it.name))
     })
     it("> should be at least 3 parcellations", () => {
+      console.log(`testing against endpoint: ${endpoint}`)
       expect(julichBrainParcellations.length).toBeGreaterThanOrEqual(3)
     })
 

src/atlasComponents/sapiViews/core/rich/regionsHierarchy/regionsHierarchy.stories.ts

@@ -117,10 +117,16 @@ const asyncLoader = async () => {
     const atlasDetail = await getAtlas(atlasId[species])
     regionsDict[species] = {}
     
-    for (const parc of atlasDetail.parcellations) {
-      const parcDetail = await getParc(atlasDetail['@id'], parc['@id'])
-      regionsDict[species][parcDetail.name] = await getParcRegions(atlasDetail['@id'], parc['@id'], atlasDetail.spaces[0]["@id"] )
-    }
+    await Promise.all(
+      atlasDetail.parcellations.map(async parc => {
+        try {
+          const parcDetail = await getParc(atlasDetail['@id'], parc['@id'])
+          regionsDict[species][parcDetail.name] = await getParcRegions(atlasDetail['@id'], parc['@id'], atlasDetail.spaces[0]["@id"] )
+        } catch (e) {
+          console.warn(`fetching region detail for ${parc["@id"]} failed... Skipping...`)
+        }
+      })
+    )
   }
 
   return {

src/environments/parseEnv.js

@@ -2,7 +2,24 @@ const fs = require('fs')
 const path = require('path')
 const { promisify } = require('util')
 const asyncWrite = promisify(fs.writeFile)
+const asyncReadFile = promisify(fs.readFile)
 const process = require("process")
+const { exec } = require("child_process")
+
+
+const getGitHead = () => new Promise((rs, rj) => {
+  exec(`git rev-parse --short HEAD`, (err, stdout, stderr) => {
+    if (err) return rj(err)
+    if (stderr) return rj(stderr)
+    rs(stdout)
+  })
+})
+
+const getVersion = async () => {
+  const content = await asyncReadFile("./package.json", "utf-8")
+  const { version } = JSON.parse(content)
+  return version
+}
 
 const main = async () => {
   const target = process.argv[2] || './environment.prod.ts'
@@ -13,29 +30,41 @@ const main = async () => {
     MATOMO_URL,
     MATOMO_ID,
     SIIBRA_API_ENDPOINTS,
-    VERSION,
-    GIT_HASH = 'unknown hash',
     EXPERIMENTAL_FEATURE_FLAG,
     ENABLE_LEAP_MOTION,
   } = process.env
   
+  const version = JSON.stringify(
+    await (async () => {
+      try {
+        return await getVersion()
+      } catch (e) {
+        return "unknown version"
+      }
+    })()
+  )
+  const gitHash = JSON.stringify(
+    await (async () => {
+      try {
+        return await getGitHead()
+      } catch (e) {
+        return "unknown git hash"
+      }
+    })()
+  )
+
   console.log(`[parseEnv.js] parse envvar:`, {
     BACKEND_URL,
     STRICT_LOCAL,
     MATOMO_URL,
     MATOMO_ID,
     SIIBRA_API_ENDPOINTS,
-    VERSION,
-    GIT_HASH,
     EXPERIMENTAL_FEATURE_FLAG,
     ENABLE_LEAP_MOTION,
+
+    VERSION: version,
+    GIT_HASH: gitHash,
   })
-  const version = JSON.stringify(
-    VERSION || 'unknown version'
-  )
-  const gitHash = JSON.stringify(
-    GIT_HASH || 'unknown hash'
-  )
 
   const outputTxt = `
 import { environment as commonEnv } from './environment.common'

src/plugin/request.md

@@ -9,7 +9,7 @@ Be it request the user to select a region, a point, navigate to a specific locat
 ```javascript
 
 let parentWindow
-window.addEventListener('message', ev => {
+window.addEventListener('message', msg => {
   const { source, data, origin } = msg
   const { id, method, params, result, error } = data
 

src/plugin/service.ts

@@ -6,6 +6,7 @@ import { WidgetPortal } from "src/widget/widgetPortal/widgetPortal.component";
 import { setPluginSrc, SET_PLUGIN_NAME } from "./const";
 import { PluginPortal } from "./pluginPortal/pluginPortal.component";
 import { environment } from "src/environments/environment"
+import { startWith } from "rxjs/operators";
 
 @Injectable({
   providedIn: 'root'
@@ -25,7 +26,9 @@ export class PluginService {
     'siibra-explorer': true
     name: string
     iframeUrl: string
-  }[]>(`${environment.BACKEND_URL || ''}plugins/manifests`)
+  }[]>(`${environment.BACKEND_URL || ''}plugins/manifests`).pipe(
+    startWith([])
+  )
 
   async launchPlugin(htmlSrc: string){
     if (this.loadedPlugins.includes(htmlSrc)) return

src/routerModule/cipher.ts

@@ -10,84 +10,22 @@
  * So performance is not really that important (Also, need to learn bitwise operation)
  */
 
-const cipher = '0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz_-'
-export const separator = "."
-const negString = '~'
 
-const encodeInt = (number: number) => {
-  if (number % 1 !== 0) { throw new Error('cannot encodeInt on a float. Ensure float flag is set') }
-  if (isNaN(Number(number)) || number === null || number === Number.POSITIVE_INFINITY) { throw new Error('The input is not valid') }
-
-  let residual: number
-  let result = ''
-
-  if (number < 0) {
-    result += negString
-    residual = Math.floor(number * -1)
-  } else {
-    residual = Math.floor(number)
-  }
-
-  /* eslint-disable-next-line no-constant-condition */
-  while (true) {
-    result = cipher.charAt(residual % 64) + result
-    residual = Math.floor(residual / 64)
-
-    if (residual === 0) {
-      break
-    }
-  }
-  return result
-}
-
-interface IB64EncodingOption {
-  float: boolean
+import { sxplrNumB64Enc } from "common/util"
+const {
+  separator,
+  cipher,
+  encodeNumber,
+  decodeToNumber,
+} = sxplrNumB64Enc
+
+export {
+  separator,
+  cipher,
+  encodeNumber,
+  decodeToNumber,
 }
 
-const defaultB64EncodingOption = {
-  float: false,
-}
-
-export const encodeNumber:
-  (number: number, option?: IB64EncodingOption) => string =
-  (number: number, { float = false }: IB64EncodingOption = defaultB64EncodingOption) => {
-    if (!float) { return encodeInt(number) } else {
-      const floatArray = new Float32Array(1)
-      floatArray[0] = number
-      const intArray = new Uint32Array(floatArray.buffer)
-      const castedInt = intArray[0]
-      return encodeInt(castedInt)
-    }
-  }
-
-const decodetoInt = (encodedString: string) => {
-  let _encodedString
-  let negFlag = false
-  if (encodedString.slice(-1) === negString) {
-    negFlag = true
-    _encodedString = encodedString.slice(0, -1)
-  } else {
-    _encodedString = encodedString
-  }
-  return (negFlag ? -1 : 1) * [..._encodedString].reduce((acc, curr) => {
-    const index = cipher.indexOf(curr)
-    if (index < 0) { throw new Error(`Poisoned b64 encoding ${encodedString}`) }
-    return acc * 64 + index
-  }, 0)
-}
-
-export const decodeToNumber:
-  (encodedString: string, option?: IB64EncodingOption) => number =
-  (encodedString: string, {float = false} = defaultB64EncodingOption) => {
-    if (!float) { return decodetoInt(encodedString) } else {
-      const _int = decodetoInt(encodedString)
-      const intArray = new Uint32Array(1)
-      intArray[0] = _int
-      const castedFloat = new Float32Array(intArray.buffer)
-      return castedFloat[0]
-    }
-  }
-
 /**
  * see https://stackoverflow.com/questions/53051415/can-you-disable-auxiliary-secondary-routes-in-angular
  * need to encode brackets

src/viewerModule/nehuba/ngLayerCtl/ngLayerCtrl.component.ts

 import { ChangeDetectionStrategy, Component, Inject, Input, OnChanges, OnDestroy } from "@angular/core";
 import { Store } from "@ngrx/store";
 import { isMat4 } from "common/util"
+import { CONST } from "common/constants"
 import { Observable } from "rxjs";
-import { atlasAppearance } from "src/state";
+import { atlasAppearance, atlasSelection } from "src/state";
 import { NehubaViewerUnit } from "..";
 import { NEHUBA_INSTANCE_INJTKN } from "../util";
+import { getExportNehuba } from "src/util/fn";
 
 type Vec4 = [number, number, number, number]
 type Mat4 = [Vec4, Vec4, Vec4, Vec4]
 
-const _VOL_DETAIL_MAP: Record<string, { shader: string, opacity: number }> = {
-  "PLI Fiber Orientation Red Channel": {
-    shader: "void main(){ float x = toNormalized(getDataValue()); if (x < 0.1) { emitTransparent(); } else { emitRGB(vec3(1.0 * x, x * 0., 0. * x )); } }",
-    opacity: 1
-  },
-  "PLI Fiber Orientation Green Channel": {
-    shader: "void main(){ float x = toNormalized(getDataValue()); if (x < 0.1) { emitTransparent(); } else { emitRGB(vec3(0. * x, x * 1., 0. * x )); } }",
-    opacity: 0.5
-  },
-  "PLI Fiber Orientation Blue Channel": {
-    shader: "void main(){ float x = toNormalized(getDataValue()); if (x < 0.1) { emitTransparent(); } else { emitRGB(vec3(0. * x, x * 0., 1.0 * x )); } }",
-    opacity: 0.25
-  },
-  "Blockface Image": {
-    shader: "void main(){ float x = toNormalized(getDataValue()); if (x < 0.1) { emitTransparent(); } else { emitRGB(vec3(0.8 * x, x * 1., 0.8 * x )); } }",
-    opacity: 1.0
-  },
-  "PLI Transmittance": {
-    shader: "void main(){ float x = toNormalized(getDataValue()); if (x > 0.9) { emitTransparent(); } else { emitRGB(vec3(x * 1., x * 0.8, x * 0.8 )); } }",
-    opacity: 1.0
-  },
-  "T2w MRI": {
-    shader: "void main(){ float x = toNormalized(getDataValue()); if (x < 0.1) { emitTransparent(); } else { emitRGB(vec3(0.8 * x, 0.8 * x, x * 1. )); } }",
-    opacity: 1
-  },
-  "MRI Labels": {
-    shader: null,
-    opacity: 1
-  }
-}
+export const idMat4: Mat4 = [
+  [1, 0, 0, 0],
+  [0, 1, 0, 0],
+  [0, 0, 1, 0],
+  [0, 0, 0, 1],
+]
 
 @Component({
   selector: 'ng-layer-ctl',
@@ -51,6 +29,8 @@ const _VOL_DETAIL_MAP: Record<string, { shader: string, opacity: number }> = {
 
 export class NgLayerCtrlCmp implements OnChanges, OnDestroy{
 
+  public CONST = CONST
+
   private onDestroyCb: (() => void)[] = []
   private removeLayer: () => void
 
@@ -77,7 +57,8 @@ export class NgLayerCtrlCmp implements OnChanges, OnDestroy{
     this.opacity = Number(val)
   }
   
-  transform: Mat4
+  transform: Mat4 = idMat4
+
   @Input('ng-layer-ctl-transform')
   set _transform(xform: string | Mat4) {
     const parsedResult = typeof xform === "string"
@@ -111,12 +92,6 @@ export class NgLayerCtrlCmp implements OnChanges, OnDestroy{
   }
 
   ngOnChanges(): void {
-    if (this.name in _VOL_DETAIL_MAP) {
-      const { shader, opacity } = _VOL_DETAIL_MAP[this.name]
-      this.shader = shader
-      this.opacity = opacity
-    }
-
     if (this.name && this.source) {
       const { name } = this
       if (this.removeLayer) {
@@ -145,6 +120,28 @@ export class NgLayerCtrlCmp implements OnChanges, OnDestroy{
     }
   }
 
+  setOrientation(): void {
+    const { mat4, quat, vec3 } = getExportNehuba()
+
+    /**
+     * glMatrix seems to store the matrix in transposed format
+     */
+    
+    const incM = mat4.transpose(mat4.create(), mat4.fromValues(...this.transform.reduce((acc, curr) => [...acc, ...curr], [])))
+    const scale = mat4.getScaling(vec3.create(), incM)
+    const scaledM = mat4.scale(mat4.create(), incM, vec3.inverse(vec3.create(), scale))
+    const q = mat4.getRotation(quat.create(0), scaledM)
+
+    this.store.dispatch(
+      atlasSelection.actions.navigateTo({
+        navigation: {
+          orientation: Array.from(q)
+        },
+        animation: true
+      })
+    )
+  }
+
   toggleVisibility(): void{
     this.visible = !this.visible
     this.viewer.nehubaViewer.ngviewer.layerManager.getLayerByName(this.name).setVisible(this.visible)

src/viewerModule/nehuba/ngLayerCtl/ngLayerCtrl.stories.ts

+import { idMat4, NgLayerCtrlCmp } from "./ngLayerCtrl.component"
+import { Meta, moduleMetadata, Story } from "@storybook/angular"
+import { CommonModule } from "@angular/common"
+import { MatButtonModule } from "@angular/material/button"
+import { NEHUBA_INSTANCE_INJTKN } from "../util"
+import { NEVER } from "rxjs"
+import { action } from "@storybook/addon-actions"
+import { MatTooltipModule } from "@angular/material/tooltip"
+import { Store } from "@ngrx/store"
+
+export default {
+  component: NgLayerCtrlCmp,
+  decorators: [
+    moduleMetadata({
+      imports: [
+        CommonModule,
+        MatButtonModule,
+        MatTooltipModule,
+      ],
+      providers: [
+        {
+          provide: NEHUBA_INSTANCE_INJTKN,
+          useValue: NEVER,
+        },
+        {
+          provide: Store,
+          useValue: {
+            dispatch: action('dispatch')
+          }
+        }
+      ]
+    }),
+  ]
+} as Meta
+
+
+const Template: Story<NgLayerCtrlCmp> = (args: any, { parameters }) => {
+
+  const {
+    'ng-layer-ctl-name': name,
+    'ng-layer-ctl-transform': transform
+  } = args
+
+  const {
+    pName,
+    pXform
+  } = parameters
+  
+  return {
+    props: {
+      name: name || pName || 'default name',
+      transform: transform || pXform || idMat4,
+    }
+  }
+}
+
+export const NgLayerTune = Template.bind({})
+NgLayerTune.parameters = {
+  pXform: [[-0.74000001,0,0,38134608],[0,-0.26530117,-0.6908077,13562314],[0,-0.6908077,0.26530117,-3964904],[0,0,0,1]]
+}

src/viewerModule/nehuba/ngLayerCtl/ngLayerCtrl.template.html

 <div [ngClass]="{ 'text-muted': !visible }">
 
-  <button mat-icon-button (click)="toggleVisibility()">
+  <button mat-icon-button
+    [matTooltip]="CONST.TOGGLE_LAYER_VISILITY"
+    (click)="toggleVisibility()">
     <i [ngClass]="visible ? 'fa-eye' : 'fa-eye-slash'" class="far"></i>
   </button>
   
@@ -8,7 +10,17 @@
     {{ name }}
   </span>
 
-  <button mat-icon-button (click)="showOpacityCtrl = !showOpacityCtrl">
+  <button
+    mat-icon-button
+    [matTooltip]="CONST.ORIENT_TO_LAYER"
+    (click)="setOrientation()">
+    <i class="iavic iavic-rotation"></i>
+  </button>
+
+  <button
+    mat-icon-button
+    [matTooltip]="CONST.CONFIGURE_LAYER"
+    (click)="showOpacityCtrl = !showOpacityCtrl">
     <i class="fas fa-cog"></i>
   </button>