Remove all css files related with GTEx component.

open-prophetdb · Apr 5, 2024 · 9ee8430 · 9ee8430
1 parent d588534
commit 9ee8430
Show file tree

Hide file tree

Showing 8 changed files with 67 additions and 28 deletions.
diff --git a/studio/package.json b/studio/package.json
@@ -37,9 +37,10 @@
     "axios": "^1.1.2",
     "biominer-components": "0.3.20",
     "biomsa": "^0.3.3",
+    "bootstrap": "^5.3.3",
     "classnames": "^2.3.0",
     "file-saver": "^2.0.5",
-    "gtex-d3": "yjcyxky/gtex-viz#58b6493a",
+    "gtex-d3": "yjcyxky/gtex-viz#09dc0705",
     "handlebars": "^4.7.7",
     "handsontable": "^12.1.3",
     "jwt-decode": "^3.1.2",

diff --git a/studio/plugin.ts b/studio/plugin.ts
@@ -4,18 +4,19 @@ export default (api: IApi) => {
     // For GTEx Components
     api.addHTMLLinks(() => {
         return [
-            {
-                rel: "stylesheet",
-                href: "https://gtexportal.org/external/bootstrap/3.3.7/bootstrap.min.css"
-            },
-            {
-                rel: "stylesheet",
-                href: "https://gtexportal.org/external/jquery-ui-1.11.4.custom/jquery-ui.css"
-            },
-            {
-                rel: "stylesheet",
-                href: "https://use.fontawesome.com/releases/v5.5.0/css/all.css"
-            }
+            // We don't like the default bootstrap style which messes up our site.
+            // {
+            //     rel: "stylesheet",
+            //     href: "https://gtexportal.org/external/bootstrap/3.3.7/bootstrap.min.css"
+            // },
+            // {
+            //     rel: "stylesheet",
+            //     href: "https://gtexportal.org/external/jquery-ui-1.11.4.custom/jquery-ui.css"
+            // },
+            // {
+            //     rel: "stylesheet",
+            //     href: "https://use.fontawesome.com/releases/v5.5.0/css/all.css"
+            // }
         ]
     })
 

diff --git a/studio/src/NodeInfoPanel/Components/GTexViewer/Components/GTexGeneViolinViewer/index.less b/studio/src/NodeInfoPanel/Components/GTexViewer/Components/GTexGeneViolinViewer/index.less
@@ -9,7 +9,7 @@
     width: 100%;
   }
 
-  .btn-group ~ div {
+  .btn-group~div {
     display: flex;
 
     div {
@@ -28,4 +28,4 @@
 
 .modal-backdrop {
   display: none;
-}
+}
diff --git a/studio/src/NodeInfoPanel/Components/GTexViewer/index.tsx b/studio/src/NodeInfoPanel/Components/GTexViewer/index.tsx
@@ -12,6 +12,41 @@ type GTexViewerProps = {
   description?: string,
 }
 
+const links = [
+  {
+    rel: "stylesheet",
+    href: "https://gtexportal.org/external/bootstrap/3.3.7/bootstrap.min.css"
+  },
+  {
+    rel: "stylesheet",
+    href: "https://gtexportal.org/external/jquery-ui-1.11.4.custom/jquery-ui.css"
+  },
+  {
+    rel: "stylesheet",
+    href: "https://use.fontawesome.com/releases/v5.5.0/css/all.css"
+  }
+]
+
+const loadStyles = (links: any) => {
+  links.forEach((link: any) => {
+    if (!document.querySelector(`link[href="${link.href}"]`)) {
+      const linkElement = document.createElement('link');
+      linkElement.rel = link.rel;
+      linkElement.href = link.href;
+      document.head.appendChild(linkElement);
+    }
+  });
+}
+
+const unloadStyles = (links: any) => {
+  links.forEach((link: any) => {
+    const existingLinkElement = document.querySelector(`link[href="${link.href}"]`);
+    if (existingLinkElement) {
+      document.head.removeChild(existingLinkElement);
+    }
+  });
+}
+
 const GTexViewer: React.FC<GTexViewerProps> = (props) => {
   const [rootId, setRootId] = useState<string>("");
   const [versionedEnsemblId, setVersionedEnsemblId] = useState<string>("");
@@ -32,6 +67,12 @@ const GTexViewer: React.FC<GTexViewerProps> = (props) => {
     } else {
       setRootId(props.rootId)
     }
+
+    loadStyles(links);
+
+    return () => {
+      unloadStyles(links);
+    };
   }, []);
 
   useEffect(() => {

diff --git a/studio/src/NodeInfoPanel/index.tsx b/studio/src/NodeInfoPanel/index.tsx
@@ -156,7 +156,7 @@ const NodeInfoPanel: React.FC<{ node?: GraphNode, hiddenItems?: string[] }> = ({
   }, [compoundInfo]);
 
   return <Tabs
-    className="plugins4kg tabs-nav-right"
+    className="plugins4kg tabs-nav-right" destroyInactiveTabPane
     items={items && items.length > 0 ? items : defaultItems}
   />
 }

diff --git a/studio/src/components/Header/index.tsx b/studio/src/components/Header/index.tsx
@@ -5,7 +5,7 @@ import { getJwtAccessToken, logoutWithRedirect } from '@/components/util';
 import { useAuth0 } from "@auth0/auth0-react";
 import type { MenuProps } from 'antd';
 import { history } from 'umi';
-import { jwtDecode } from "jwt-decode";
+import jwtDecode from "jwt-decode";
 
 import styles from './index.less';
 import './extra.less'

diff --git a/studio/yarn.lock b/studio/yarn.lock
@@ -9922,9 +9922,9 @@ grid-index@^1.1.0:
   resolved "https://registry.yarnpkg.com/grid-index/-/grid-index-1.1.0.tgz#97f8221edec1026c8377b86446a7c71e79522ea7"
   integrity sha512-HZRwumpOGUrHyxO5bqKZL0B0GlUpwtCAzZ42sgxUPniu33R1LSFH5yrIcBCHjkctCAh3mtWKcKd9J4vDDdeVHA==
 
-gtex-d3@yjcyxky/gtex-viz#58b6493a:
-  version "0.1.1"
-  resolved "https://codeload.github.com/yjcyxky/gtex-viz/tar.gz/58b6493a801d0f18847a168d0a62c32e4f069030"
+gtex-d3@yjcyxky/gtex-viz#09dc0705:
+  version "0.1.2"
+  resolved "https://codeload.github.com/yjcyxky/gtex-viz/tar.gz/09dc070591ad5497a48503da13a7f6f3b2e7cf3a"
   dependencies:
     bootstrap "^5.3.3"
     d3 "^5.0.0"
@@ -9933,14 +9933,6 @@ gtex-d3@yjcyxky/gtex-viz#58b6493a:
     jquery-ui "^1.13.2"
     popper.js "^1.14.7"
 
-gtex-d3@yjcyxky/gtex-viz#master:
-  version "0.1.0"
-  resolved "https://codeload.github.com/yjcyxky/gtex-viz/tar.gz/573dfa134ade75e1af9d6255f1e73f36530bedfb"
-  dependencies:
-    d3 "^5"
-    file-saver "^2.0.5"
-    jquery "^3.7.1"
-
 gzip-size@^6.0.0:
   version "6.0.0"
   resolved "https://registry.yarnpkg.com/gzip-size/-/gzip-size-6.0.0.tgz#065367fd50c239c0671cbcbad5be3e2eeb10e462"

diff --git a/yarn.lock b/yarn.lock
@@ -0,0 +1,4 @@
+# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY.
+# yarn lockfile v1
+
+