Merge pull request #747 from HumanBrainProject/chore_datasetPreviewCsp

fix dataset preview csp issues

README.md

@@ -96,7 +96,7 @@ It is recommended to manage your environments with `.env` file.
 | `CSP_REPORT_URI` | report uri for csp violations | `/report-violation` |
 | `NODE_ENV` | set to `production` to disable [`reportOnly`](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy-Report-Only) | `null` |
 | `SCRIPT_SRC` | `JSON.stringify`'ed array of allowed scriptSrc | `[]` |
-| `DATA_SRC` | `JSON.stringify`'ed array of allowed dataSrc | `[]` |
+| `CSP_CONNECT_SRC` | `JSON.stringify`'ed array of allowed dataSrc | `[]` |
 | `WHITE_LIST_SRC` | `JSON.stringify`'ed array of allowed src | `[]` |
 | `PROXY_HOSTNAME_WHITELIST` |
 

deploy/csp/index.js

@@ -2,7 +2,7 @@ const csp = require('helmet-csp')
 const bodyParser = require('body-parser')
 const crypto = require('crypto')
 
-let WHITE_LIST_SRC, DATA_SRC, SCRIPT_SRC
+let WHITE_LIST_SRC, CSP_CONNECT_SRC, SCRIPT_SRC
 
 // TODO bandaid solution
 // OKD/nginx reverse proxy seems to strip csp header
@@ -26,10 +26,10 @@ try {
 }
 
 try {
-  DATA_SRC = JSON.parse(process.env.DATA_SRC || '[]')
+  CSP_CONNECT_SRC = JSON.parse(process.env.CSP_CONNECT_SRC || '[]')
 } catch (e) {
-  console.warn(`parsing DATA_SRC error ${process.env.DATA_SRC}`, e)
-  DATA_SRC = []
+  console.warn(`parsing CSP_CONNECT_SRC error ${process.env.CSP_CONNECT_SRC}`, e)
+  CSP_CONNECT_SRC = []
 }
 
 const defaultAllowedSites = [
@@ -38,14 +38,15 @@ const defaultAllowedSites = [
   'stats-dev.humanbrainproject.eu'
 ]
 
-const dataSource = [
+const connectSrc = [
   "'self'",
   "blob:",
   'neuroglancer.humanbrainproject.org',
   'neuroglancer.humanbrainproject.eu',
   'connectivity-query-v1-1-connectivity.apps-dev.hbp.eu',
   'object.cscs.ch',
-  ...DATA_SRC
+  'hbp-kg-dataset-previewer.apps.hbp.eu/v2/', // required for dataset previews
+  ...CSP_CONNECT_SRC
 ]
 
 module.exports = (app) => {
@@ -74,9 +75,13 @@ module.exports = (app) => {
       ],
       connectSrc: [
         ...defaultAllowedSites,
-        ...dataSource,
+        ...connectSrc,
         ...WHITE_LIST_SRC
       ],
+      imgSrc: [
+        "'self'",
+        "hbp-kg-dataset-previewer.apps.hbp.eu/v2/"
+      ],
       scriptSrc:[
         "'self'",
         'code.jquery.com', // plugin load external library -> jquery v2 and v3
@@ -85,7 +90,7 @@ module.exports = (app) => {
         'cdn.jsdelivr.net/npm/vue@2.5.16/', // plugin load external lib -> vue 2
         'cdn.jsdelivr.net/npm/preact@8.4.2/', // plugin load external lib -> preact
         'unpkg.com/react@16/umd/', // plugin load external lib -> react
-        'unpkg.com/kg-dataset-previewer@1.1.4/', // preview component
+        'unpkg.com/kg-dataset-previewer@1.1.5/', // preview component
         'cdnjs.cloudflare.com/ajax/libs/mathjax/', // math jax
         (req, res) => res.locals.nonce ? `'nonce-${res.locals.nonce}'` : null,
         ...SCRIPT_SRC,

deploy/datasets/query.js

@@ -114,10 +114,22 @@ const getDs = ({ user }) => (user
     : getPublicDs()
   ).then(async datasets => {
     
+    /**
+     * populate the manually inserted dataset first
+     * this allows inserted dataset to overwrite the KG dataset (if needed)
+     */
     return [
-      ...datasets,
       ...(await returnAdditionalDatasets()),
+      ...datasets,
     ]
+    .reduce((acc, curr) => {
+      /**
+       * remove duplicates
+       */
+      const currSet = new Set(acc.map(v => v['fullId']))
+      if (currSet.has(curr['fullId'])) return [...acc]
+      else return acc.concat(curr)
+    }, [])
   })
 
 const getExternalSchemaDatasets = (kgId, kgSchema) => {

deploy/regionalFeatures/index.js

@@ -107,7 +107,7 @@ Promise.all(
 
   for (const [ datasetId, arrRegionIds ] of map.entries()) {
     additionalDatasets = additionalDatasets.concat({
-      fullId: datasetId,
+      fullId: `https://nexus.humanbrainproject.org/v0/data/${datasetId}`,
       parcellationRegion: arrRegionIds.map(id => ({ fullId: id })),
       species: [],
       kgReference: [

src/atlasViewer/pluginUnit/pluginFactory.directive.ts

@@ -22,7 +22,8 @@ export const SUPPORT_LIBRARY_MAP: Map<string, Map<string, string>> = new Map([
     ['8.4.2', 'https://cdn.jsdelivr.net/npm/preact@8.4.2/dist/preact.min.js']
   ])],
   ['d3', new Map([
-    ['5.7.0', 'https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js']
+    ['5.7.0', 'https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js'],
+    ['6.2.0', 'https://cdnjs.cloudflare.com/ajax/libs/d3/6.2.0/d3.min.js']
   ])],
   ['mathjax', new Map([
     ['3.1.2', 'https://cdnjs.cloudflare.com/ajax/libs/mathjax/3.1.2/es5/tex-svg.js']

src/index.html

@@ -12,7 +12,7 @@
   <link rel="stylesheet" href="theme.css">
   <link rel="stylesheet" href="version.css">
   
-  <script src="https://unpkg.com/kg-dataset-previewer@1.1.4/dist/kg-dataset-previewer/kg-dataset-previewer.js" defer>
+  <script src="https://unpkg.com/kg-dataset-previewer@1.1.5/dist/kg-dataset-previewer/kg-dataset-previewer.js" defer>
   </script>
 
   <title>Interactive Atlas Viewer</title>

src/ui/regionalFeatures/regionalFeature.service.ts

@@ -3,7 +3,7 @@ import { Inject, Injectable, OnDestroy, Optional } from "@angular/core";
 import { PureContantService } from "src/util";
 import { getIdFromFullId, getRegionHemisphere, getStringIdsFromRegion, flattenReducer } from 'common/util'
 import { forkJoin, from, Observable, of, Subject, Subscription } from "rxjs";
-import { catchError, map, mapTo, shareReplay, switchMap, tap } from "rxjs/operators";
+import { catchError, map, mapTo, shareReplay, switchMap } from "rxjs/operators";
 import { IHasId } from "src/util/interfaces";
 import { select, Store } from "@ngrx/store";
 import { viewerStateSelectedTemplateSelector } from "src/services/state/viewerState/selectors";
@@ -12,7 +12,7 @@ import { uiStateMouseoverUserLandmark } from "src/services/state/uiState/selecto
 import { APPEND_SCRIPT_TOKEN } from "src/util/constants";
 
 const libraries = [
-  'https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js',
+  'https://cdnjs.cloudflare.com/ajax/libs/d3/6.2.0/d3.min.js',
   'https://cdnjs.cloudflare.com/ajax/libs/mathjax/3.1.2/es5/tex-svg.js'
 ]
 

src/ui/regionalFeatures/singleFeatures/receptorDensity/receptorDensity/receptorDensity.style.css

@@ -3,3 +3,14 @@ kg-dataset-previewer
   display: block;
   height: 20em;
 }
+
+kg-ds-prv-regional-feature-view
+{
+  display: block;
+  min-height: 20em;
+}
+
+kg-ds-prv-regional-feature-view >>> div
+{
+  min-height: 20em;
+}

src/ui/regionalFeatures/singleFeatures/receptorDensity/receptorDensity/receptorDensity.template.html

@@ -12,7 +12,7 @@
   </ng-container>
 </ng-container>
 
-<mat-form-field class="mt-2">
+<mat-form-field class="mt-2 w-100">
   <mat-label>
     Select a receptor
   </mat-label>