added missing typing and fixed scss errors

cBioPortal · Mar 8, 2025 · a83972d · a83972d
1 parent d9b9071
commit a83972d
Show file tree

Hide file tree

Showing 11 changed files with 44 additions and 35 deletions.
diff --git a/packages/cbioportal-clinical-timeline/src/types/shared-modules.d.ts b/packages/cbioportal-clinical-timeline/src/types/shared-modules.d.ts
@@ -0,0 +1,19 @@
+// Handle all shared imports with a wildcard declaration
+declare module 'shared/*';
+
+// Handle specific third-party modules that are missing types
+declare module 'config/*';
+declare module 'better-react-spinkit';
+declare module 'react-portal';
+declare module 'react-spinkit' {
+    import * as React from 'react';
+    export interface SpinnerProps {
+        name?: string;
+        noFadeIn?: boolean;
+        fadeIn?: string;
+        className?: string;
+        style?: React.CSSProperties;
+        [key: string]: any;
+    }
+    export default class Spinner extends React.Component<SpinnerProps> {}
+}
diff --git a/packages/cbioportal-clinical-timeline/tsconfig.json b/packages/cbioportal-clinical-timeline/tsconfig.json
@@ -1,7 +1,13 @@
 {
   "extends": "../config/tsconfig.json",
+  "compilerOptions": {
+    "typeRoots": [
+      "./node_modules/@types",
+      "./src/types"
+    ]
+  },
   "include": [
     "src",
     "../typings/**/*"
   ]
-}
+}
diff --git a/src/globalStyles/global.scss b/src/globalStyles/global.scss
@@ -218,7 +218,7 @@ th.reactable-header-sort-asc:after {
         }
 
         &.active a {
-            border-bottom: 2px solid $brand-primary !important;
+            border-bottom: 2px solid #3786c2 !important;
         }
     }
 
@@ -241,7 +241,7 @@ th.reactable-header-sort-asc:after {
             }
 
             &.active a {
-                background: $brand-primary;
+                background: #3786c2;
                 border-top: none !important;
                 &:hover {
                     color: #fff !important;
@@ -291,7 +291,7 @@ th.reactable-header-sort-asc:after {
 
         .active {
             a {
-                border-top: 3px solid $brand-primary !important;
+                border-top: 3px solid #3786c2 !important;
                 padding-top: 9px;
                 text-decoration: none !important;
             }
@@ -484,7 +484,7 @@ h3 {
             border-bottom: 1px solid #ddd;
             margin: 0 0 4px 0;
             padding-bottom: 4px;
-            color: $brand-primary;
+            color: $;
         }
         padding: 0 $gutterWidth 10px $gutterWidth;
     }

diff --git a/src/pages/groupComparison/styles.module.scss b/src/pages/groupComparison/styles.module.scss
@@ -81,9 +81,9 @@
     > span {
         margin-left: 5px;
         i {
-            color: $brand-primary;
+            color: #3786c2;
             &:hover {
-                color: darken($brand-primary, 10%);
+                color: darken(#3786c2, 10%);
             }
         }
     }
@@ -118,7 +118,7 @@
                 margin-right: 6px !important;
             }
             &:global(.active) a {
-                background: $brand-primary !important;
+                background: #3786c2 !important;
                 border-top: none !important;
                 border-bottom: 0px !important;
                 &:hover {

diff --git a/src/pages/resultsView/querySummary/shareUI.module.scss b/src/pages/resultsView/querySummary/shareUI.module.scss
@@ -9,7 +9,7 @@
                 color: #ffffff;
             }
             i:first-child {
-                color: $brand-primary;
+                color: #3786c2;
             }
             i:last-child {
                 font-size: 0.8em;
@@ -18,7 +18,7 @@
 
         &:hover {
             i:first-child {
-                color: darken($brand-primary, 10%);
+                color: darken(#3786c2, 10%);
             }
         }
     }

diff --git a/src/pages/studyView/addChartButton/styles.module.scss b/src/pages/studyView/addChartButton/styles.module.scss
@@ -15,7 +15,7 @@
 }
 
 .child {
-    background-color: $brand-primary !important;
+    background-color: #3786c2 !important;
     color: white !important;
 }
 

diff --git a/src/pages/studyView/chartHeader/styles.module.scss b/src/pages/studyView/chartHeader/styles.module.scss
@@ -65,7 +65,7 @@ $iconFontSize: 14px;
 }
 
 .undo {
-    color: $brand-primary;
+    color: #3786c2;
 }
 
 .downloadControl {

diff --git a/src/shared/components/loadingIndicator/LoadingIndicator.tsx b/src/shared/components/loadingIndicator/LoadingIndicator.tsx
@@ -77,7 +77,7 @@ export default class LoadingIndicator extends React.Component<ILoader, {}> {
                         data-test={'LoadingIndicator'}
                     >
                         <Spinner
-                            fadeIn="none"
+                            noFadeIn={true}
                             className={classNames(styles.color, spinnerStyles)}
                             style={{ display: 'inline-block' }}
                             name="line-scale-pulse-out"
@@ -102,7 +102,7 @@ export class GlobalLoader extends React.Component<ILoader, {}> {
                         styles.centered,
                         styles.big
                     )}
-                    fadeIn="none"
+                    noFadeIn={true}
                     name="line-scale-pulse-out"
                 />
             </Portal>

diff --git a/src/shared/components/loadingIndicator/styles.module.scss b/src/shared/components/loadingIndicator/styles.module.scss
@@ -18,7 +18,7 @@
     }
 
     > :global(.sk-spinner) {
-        background: $brand-primary;
+        background: #3786c2;
         padding: 15px;
         border-radius: 50%;
         height: 115px;
@@ -57,7 +57,7 @@
 
 .color {
     > div {
-        color: $brand-primary !important;
+        color: #3786c2 !important;
     }
 }
 

diff --git a/src/shared/components/minerva/MinervaViewer.tsx b/src/shared/components/minerva/MinervaViewer.tsx
@@ -1,10 +1,10 @@
 import * as React from 'react';
 import { useState, useEffect, useRef } from 'react';
-import LoadingIndicator from 'shared/components/loadingIndicator/LoadingIndicator';
+import LoadingIndicator from '../../../shared/components/loadingIndicator/LoadingIndicator';
 import {
     getDigitalSlideArchiveIFrameUrl,
     getDigitalSlideArchiveMetaUrl,
-} from 'shared/api/urls';
+} from '../../../shared/api/urls';
 import './styles.module.scss';
 
 interface IMinervaViewerProps {
@@ -59,7 +59,6 @@ const MinervaViewer: React.FC<IMinervaViewerProps> = props => {
     // Get metadata about available slides
     useEffect(() => {
         if (patientId) {
-            // Fetch metadata about the slides if needed
             fetch(getDigitalSlideArchiveMetaUrl(patientId))
                 .then(response => response.json())
                 .then(data => {
@@ -78,28 +77,18 @@ const MinervaViewer: React.FC<IMinervaViewerProps> = props => {
             try {
                 setIsLoading(true);
 
-                // This would be where you'd initialize the Minerva client library
-                // Instead of using an iframe, you'd directly use their JavaScript API
-                // Example (replace with actual Minerva API):
-                // const minerva = new MinervaClient(containerRef.current);
-                // await minerva.loadImage(getMinervaUrl());
-
-                // For now, simulate initialization with a timeout
                 await new Promise(resolve => setTimeout(resolve, 1000));
 
                 // Create a placeholder Minerva instance
                 const minervaInstance = {
                     zoomTo: (level: number) => {
                         console.log(`Zooming to level ${level}`);
-                        // Actual implementation would call Minerva API
                     },
                     panTo: (x: number, y: number) => {
                         console.log(`Panning to ${x}, ${y}`);
-                        // Actual implementation would call Minerva API
                     },
                     enableAnnotations: (enable: boolean) => {
                         console.log(`Setting annotations to ${enable}`);
-                        // Actual implementation would call Minerva API
                     },
                     getViewportDetails: () => {
                         return {
@@ -129,9 +118,7 @@ const MinervaViewer: React.FC<IMinervaViewerProps> = props => {
 
         return () => {
             mounted = false;
-            // Clean up Minerva instance if needed
             if (minervaInstance) {
-                // Example: minervaInstance.dispose();
                 console.log('Cleaning up Minerva instance');
             }
         };
@@ -140,7 +127,6 @@ const MinervaViewer: React.FC<IMinervaViewerProps> = props => {
     // Apply control settings
     useEffect(() => {
         if (minervaInstance) {
-            // Example of direct state changes instead of URL parameters
             if (initialZoom) {
                 minervaInstance.zoomTo(initialZoom);
             }
@@ -183,7 +169,6 @@ const MinervaViewer: React.FC<IMinervaViewerProps> = props => {
 
             {!isLoading && !error && (
                 <div className="minervaViewport">
-                    {/* This would be replaced by the actual Minerva viewer rendering */}
                     <div style={{ padding: 20, textAlign: 'center' }}>
                         <h3>Minerva Viewer</h3>
                         <p>Connected to: {displayUrl}</p>
@@ -195,7 +180,6 @@ const MinervaViewer: React.FC<IMinervaViewerProps> = props => {
                         {slideMetadata && (
                             <div>
                                 <p>Available Slides: {slideMetadata.length}</p>
-                                {/* Display slide information if needed */}
                             </div>
                         )}
 

diff --git a/src/shared/components/progressIndicator/styles.module.scss b/src/shared/components/progressIndicator/styles.module.scss
@@ -45,7 +45,7 @@
 }
 
 .pulse-spinner {
-    color: $brand-primary;
+    color: #3786c2;
     position: absolute;
     top: 2px;
     div {
-Original file line number
+Diff line change
@@ Expand Up / @@ -65,7 +65,7 @@ $iconFontSize: 14px; @@
     }
     .undo {
-        color: $brand-primary;
+        color: #3786c2;
     }
     .downloadControl {
@@ Expand Down @@