Merge branch 'master' into feature/base64-url-encoding

Author: janvandenschilden

docs/docs/visualizations/genome-view.md

@@ -11,5 +11,5 @@ The genome view shows the selected sample in a circular visualization. This uses
 
 ## Interactions
 
-- You can move or resize an interactive brush (light blue) using the mouse. This is linked with a [variant view](./cohort-view) that is shown on the bottom of the genome view.
+- You can move or resize an interactive brush (light blue) using the mouse. This is linked with a [variant view](./variant-view) that is shown on the bottom of the genome view.
 - You can move your mouse on top of a structural variant to see detailed information on a tooltip.

package.json

@@ -22,6 +22,7 @@
         "@types/react": "^17.0.37",
         "@types/react-dom": "^17.0.11",
         "@types/react-router-dom": "^5.2.0",
+        "axios": "^1.6.8",
         "buffer": "^6.0.3",
         "gosling.js": "^0.11.0",
         "idb": "^7.0.2",
@@ -31,6 +32,7 @@
         "react": "16.13.1",
         "react-dom": "16.13.1",
         "react-router-dom": "^5.2.0",
+        "tabulator-tables": "^6.2.0",
         "uuid": "^8.3.2"
     },
     "devDependencies": {

src/App.tsx

@@ -23,6 +23,7 @@ import SampleConfigForm from './ui/sample-config-form';
 import { BrowserDatabase } from './browser-log';
 import legend from './legend.png';
 import UrlsafeCodec from './lib/urlsafe-codec';
+import GenomicTable from './ui/genomic-table';
 
 const db = new Database();
 const log = new BrowserDatabase();
@@ -509,7 +510,7 @@ function App(props: RouteComponentProps) {
         currentSpec.current = JSON.stringify(spec);
         // console.log('spec', spec);
         return (
-            <div>
+        <div>
             <GoslingComponent
                 ref={gosRef}
                 spec={spec}
@@ -518,7 +519,8 @@ function App(props: RouteComponentProps) {
                 experimental={{ reactive: true }}
                 theme={THEME}
             />
-            </div>
+            { demo.table && <GenomicTable gosRef={gosRef} demo_id={demo.id} data_url={demo.table}/>}
+        </div>
         );
         // !! Removed `demo` not to update twice since `drivers` are updated right after a demo update.
     }, [ready, xDomain, visPanelWidth, drivers, showOverview, showPutativeDriver, selectedSvId, breakpoints, svReads]);