Release 4.0.0 (#26)

.github/workflows/build.yml

@@ -2,6 +2,10 @@ name: build
 
 on: [push, workflow_dispatch]
 
+permissions:
+  contents: write
+  id-token: write
+
 jobs:
   build:
     uses: datavisyn/github-workflows/.github/workflows/build-node.yml@main

package.json

@@ -2,7 +2,7 @@
   "name": "coral_public",
   "description": "Coral is a web-based cohort analysis tool to interactively create, refine, and analyze patient cohorts.",
   "homepage": "https://caleydo.org",
-  "version": "3.2.0",
+  "version": "4.0.0",
   "author": {
     "name": "PatrickAdelberger",
     "email": "coral@caleydo.org",
@@ -31,7 +31,7 @@
     "dist": "mkdir lib && cd dist && tar cvzf ../lib/bundle.tar.gz *",
     "docs": "visyn_scripts docs",
     "lint:fix": "visyn_scripts lint --fix",
-    "lint": "visyn_scripts lint || true",
+    "lint": "visyn_scripts lint",
     "prepack": "yarn run build",
     "start": "visyn_scripts start --env workspace_mode=single",
     "storybook:build": "NODE_OPTIONS=--max_old_space_size=4096 build-storybook",
@@ -52,17 +52,21 @@
     "node": ">=16"
   },
   "dependencies": {
-    "canvas-confetti": "^1.4.0",
-    "coral": "git+ssh://git@github.com/Caleydo/coral#semver:^4.1.0",
-    "ordino": "git+ssh://git@github.com/Caleydo/ordino#semver:^13.0.1",
+    "canvas-confetti": "^1.5.1",
+    "coral": "git+ssh://git@github.com:Caleydo/coral#semver:^5.0.0",
+    "ordino": "git+ssh://git@github.com:Caleydo/ordino#semver:^14.0.0",
     "react": "^16.13.0",
     "react-dom": "^16.13.0",
     "react-router-dom": "^5.2.0",
-    "visyn_scripts": "^1.1.1"
+    "visyn_scripts": "^4.1.0"
+  },
+  "resolutions": {
+    "@types/react": "~18.2.0",
+    "@types/react-dom": "~18.2.0",
+    "react": "~18.2.0",
+    "react-dom": "~18.2.0"
   },
   "devDependencies": {
-    "@types/react": "^16.14.6",
-    "@types/react-dom": "^16.9.5",
     "@types/react-router-dom": "^5.1.7",
     "mkdirp": "0.5.1",
     "tslint": "~5.20.1",

src/LoginDialog.ts

@@ -6,10 +6,10 @@ export function create(_loginMenu: HTMLElement, loginDialog: HTMLElement) {
 
   if (localStorageValue !== null) {
     // check the checkbox if it was checked before
-    checkboxAcceptGenieTerms.checked = (localStorageValue === 'true');
+    checkboxAcceptGenieTerms.checked = localStorageValue === 'true';
   }
 
-  checkboxAcceptGenieTerms.addEventListener('change', function() {
+  checkboxAcceptGenieTerms.addEventListener('change', function listener() {
     localStorage.setItem(LOCALSTORAGE_ACCEPT_GENIE_TERMS, String(this.checked));
   });
 }

src/index.ts

@@ -1,11 +0,0 @@
-// export * from './data';
-// export * from './Overview';
-// export * from './Taskview';
-
-// export * from './app';
-// export * from './Cohort';
-// export * from './CohortInterfaces';
-// export * from './CohortRepresentations';
-// export * from './cohortview';
-// export * from './LoginDialog';
-// export * from './rest';

src/initialize.app.ts

@@ -2,10 +2,10 @@
  * Created by Caleydo Team on 31.08.2016.
  */
 
-import { App } from 'coral';
+import { Coral } from 'coral';
 import loginDialog from './LoginDialog.html';
 
 const APP_NAME = 'Coral';
 
 document.title = APP_NAME;
-const tdpApp = new App(APP_NAME, loginDialog); // assign to variable to avoid linting errors
+const tdpApp = new Coral(APP_NAME, loginDialog); // assign to variable to avoid linting errors

src/initialize.welcome.tsx

@@ -1,12 +1,12 @@
 import 'ordino/dist/robots.txt';
 
 import * as React from 'react';
-import * as ReactDOM from 'react-dom';
-import { HashRouter, Route, Switch } from 'react-router-dom';
+import { createRoot } from 'react-dom/client';
+import { HashRouter, Switch, Route } from 'react-router-dom';
+import { RouterScrollToTop } from 'coral';
 import { DatasetsPage, Error404Page, FeaturesPage, HelpPage, HomePage, NewsPage, PublicationPage } from './pages';
-import { RouterScrollToTop } from './utils/RouterScrollToTop';
 
-ReactDOM.render(
+createRoot(document.querySelector('#welcome')).render(
   <HashRouter>
     <RouterScrollToTop />
     {/* A <Switch> looks through its children <Route>s and
@@ -45,5 +45,4 @@ ReactDOM.render(
       </Route>
     </Switch>
   </HashRouter>,
-  document.querySelector('#welcome'),
 );

src/menu/HelpTab.tsx

@@ -1,16 +1,16 @@
-import {OrdinoFooter} from 'ordino';
+import { OrdinoFooter } from 'ordino';
 import * as React from 'react';
-import {BrowserRouter} from 'react-router-dom';
-import {DevelopedByAffiliations} from '../pages/components/DevelopedByAffiliations';
-import {CoralHelpSection} from '../pages/components/CoralHelpSection';
+import { BrowserRouter } from 'react-router-dom';
+import { DevelopedByAffiliations } from '../pages/components/DevelopedByAffiliations';
+import { CoralHelpSection } from '../pages/components/CoralHelpSection';
 
 export default function HelpTab() {
-    return <>
-        <BrowserRouter basename="/#">
-            <CoralHelpSection openInNewWindow>
-                <DevelopedByAffiliations></DevelopedByAffiliations>
-                <OrdinoFooter openInNewWindow></OrdinoFooter>
-            </CoralHelpSection>
-        </BrowserRouter>
-    </>;
+  return (
+    <BrowserRouter basename="/#">
+      <CoralHelpSection openInNewWindow>
+        <DevelopedByAffiliations />
+        <OrdinoFooter openInNewWindow />
+      </CoralHelpSection>
+    </BrowserRouter>
+  );
 }

src/pages/DatasetsPage.tsx

@@ -1,13 +1,12 @@
-import {HeaderNavigation, OrdinoFooter} from 'ordino';
+import { HeaderNavigation, OrdinoFooter } from 'ordino';
 import * as React from 'react';
 
 interface IDatasetPageCardProps {
   title: string;
   children?: React.ReactNode;
 }
 
-
-export function DatasetPageCard({title, children}: IDatasetPageCardProps) {
+export function DatasetPageCard({ title, children }: IDatasetPageCardProps) {
   return (
     <div className="card shadow-sm h-100">
       <div className="card-body">
@@ -18,30 +17,35 @@ export function DatasetPageCard({title, children}: IDatasetPageCardProps) {
   );
 }
 
-
 export function DatasetsPage() {
   return (
     <>
-      <HeaderNavigation bg="none"></HeaderNavigation>
+      <HeaderNavigation bg="none" />
       <div className="position-relative pt-6">
         <div className="ordino-container">
           <div className="dataset-page py-6 container">
             <div className="row">
               <div className="col">
-                <h4 className="text-start d-flex align-items-center mt-2 mb-3"><i className="me-2 ordino-icon-1 fas fa-chevron-circle-right" ></i> Basic Datasets</h4>
+                <h4 className="text-start d-flex align-items-center mt-2 mb-3">
+                  <i className="me-2 ordino-icon-1 fas fa-chevron-circle-right" /> Basic Datasets
+                </h4>
               </div>
             </div>
             <div className="row row-cols-md-2 row-cols-1">
               <div className="col">
                 <DatasetPageCard title="AACR Project GENIE | American Association for Cancer Research (AACR)">
                   <p className="card-text">Sample annotation and mutation data</p>
-                  <a className="card-link" href="https://www.aacr.org/professionals/research/aacr-project-genie/" target="_blank" rel="noopener">www.aacr.org/professionals/research/aacr-project-genie</a>
+                  <a className="card-link" href="https://www.aacr.org/professionals/research/aacr-project-genie/" target="_blank" rel="noopener noreferrer">
+                    www.aacr.org/professionals/research/aacr-project-genie
+                  </a>
                 </DatasetPageCard>
               </div>
               <div className="col">
                 <DatasetPageCard title="The Cancer Genome Atlas (TCGA)">
                   <p className="card-text">Sample annotation, gene expression, mutation, and copy number data </p>
-                  <a className="card-link" href="https://cancergenome.nih.gov" target="_blank" rel="noopener">cancergenome.nih.gov</a>
+                  <a className="card-link" href="https://cancergenome.nih.gov" target="_blank" rel="noopener noreferrer">
+                    cancergenome.nih.gov
+                  </a>
                 </DatasetPageCard>
               </div>
             </div>
@@ -50,35 +54,43 @@ export function DatasetsPage() {
               <div className="col">
                 <DatasetPageCard title="Cancer Cell Line Encyclopedia (CCLE)">
                   <p className="card-text">Sample annotation, gene expression, mutation, and copy number data</p>
-                  <a className="card-link" href="https://portals.broadinstitute.org/ccle" target="_blank" rel="noopener">portals.broadinstitute.org/ccle</a>
+                  <a className="card-link" href="https://portals.broadinstitute.org/ccle" target="_blank" rel="noopener noreferrer">
+                    portals.broadinstitute.org/ccle
+                  </a>
                 </DatasetPageCard>
               </div>
             </div>
             <div className="row mt-4">
               <div className="col">
-                <h4 className="text-start d-flex align-items-center mt-2 mb-3"><i className="me-2 fas ordino-icon-1 fa-chevron-circle-right" ></i> Depletion Sceen Data</h4>
+                <h4 className="text-start d-flex align-items-center mt-2 mb-3">
+                  <i className="me-2 fas ordino-icon-1 fa-chevron-circle-right" /> Depletion Sceen Data
+                </h4>
               </div>
             </div>
 
             <div className="row row-cols-md-2 row-cols-1">
               <div className="col">
                 <DatasetPageCard title="Project DRIVE">
                   <p className="card-text">RNAi depletion screen data (RSA and ATARiS)</p>
-                  <a className="card-link" href="https://doi.org/10.1016/j.cell.2017.07.005" target="_blank" rel="noopener"> McDonald III, E. R. et. al.
-                    Project DRIVE: A Compendium of Cancer Dependencies and Synthetic Lethal Relationships Uncovered by Large-Scale, Deep RNAi Screening.
-                    Cell 170, Pages 577-592.e10 (2017).</a>
+                  <a className="card-link" href="https://doi.org/10.1016/j.cell.2017.07.005" target="_blank" rel="noopener noreferrer">
+                    {' '}
+                    McDonald III, E. R. et. al. Project DRIVE: A Compendium of Cancer Dependencies and Synthetic Lethal Relationships Uncovered by Large-Scale,
+                    Deep RNAi Screening. Cell 170, Pages 577-592.e10 (2017).
+                  </a>
                 </DatasetPageCard>
               </div>
               <div className="col">
                 <DatasetPageCard title="Avana CERES">
                   <p className="card-text">CRISPR-Cas9 depletion screen data</p>
-                  <a className="card-link" href="https://doi.org/10.1038/ng.3984" target="_blank" rel="noopener">Meyers, R. M. et. al. Computational correction of copy
-                    number effect improves specificity of CRISPR–Cas9 essentiality screens in cancer cells. Nature Genetics 49, 1779–1784 (2017).</a>
+                  <a className="card-link" href="https://doi.org/10.1038/ng.3984" target="_blank" rel="noopener noreferrer">
+                    Meyers, R. M. et. al. Computational correction of copy number effect improves specificity of CRISPR–Cas9 essentiality screens in cancer
+                    cells. Nature Genetics 49, 1779–1784 (2017).
+                  </a>
                 </DatasetPageCard>
               </div>
             </div>
           </div>
-          <OrdinoFooter></OrdinoFooter>
+          <OrdinoFooter />
         </div>
       </div>
     </>

src/pages/Error404Page.tsx

@@ -1,16 +1,18 @@
 import * as React from 'react';
-import {HeaderNavigation, OrdinoFooter} from 'ordino';
+import { HeaderNavigation, OrdinoFooter } from 'ordino';
 
 export function Error404Page() {
   return (
     <>
-      <HeaderNavigation bg="none"></HeaderNavigation>
+      <HeaderNavigation bg="none" />
       <div className="container">
         <div className="row">
-          <div className="col"><h2>Page Not Found</h2></div>
+          <div className="col">
+            <h2>Page Not Found</h2>
+          </div>
         </div>
       </div>
-      <OrdinoFooter></OrdinoFooter>
+      <OrdinoFooter />
     </>
   );
 }