make tooltip width larger

databio · Oct 14, 2024 · f11a67c · f11a67c
1 parent 305f514
commit f11a67c
Show file tree

Hide file tree

Showing 5 changed files with 22 additions and 5 deletions.
diff --git a/ui/package-lock.json b/ui/package-lock.json
diff --git a/ui/package.json b/ui/package.json
@@ -22,6 +22,7 @@
     "chart.js": "^4.4.2",
     "chartjs-chart-error-bars": "^4.4.0",
     "framer-motion": "^11.0.20",
+    "js-yaml": "^4.1.0",
     "react": "^18.2.0",
     "react-bootstrap": "^2.10.1",
     "react-chartjs-2": "^5.2.0",
@@ -31,10 +32,10 @@
     "react-hot-toast": "^2.4.1",
     "react-markdown": "^9.0.1",
     "react-router-dom": "^6.22.3",
-    "rehype-highlight": "^7.0.0",
-    "js-yaml": "^4.1.0"
+    "rehype-highlight": "^7.0.0"
   },
   "devDependencies": {
+    "@types/js-yaml": "^4.0.9",
     "@types/node": "^20.11.27",
     "@types/react": "^18.2.64",
     "@types/react-dom": "^18.2.21",

diff --git a/ui/src/components/search/search-results-table.tsx b/ui/src/components/search/search-results-table.tsx
@@ -54,8 +54,13 @@ export const SearchResultsTable = (props: Props) => {
               <OverlayTrigger
                 placement="auto"
                 overlay={
-                  <Tooltip id={`tooltip-${result.id}`}>
-                    {YAML.dump(result?.metadata?.annotation, null, 4) || 'No description'}
+                  <Tooltip id={`tooltip-${result.id}`} className="moreinfo-tooltip">
+                    <pre className="text-start">
+                      {YAML.dump(result?.metadata, {
+                        indent: 2,
+                        noRefs: true,
+                      }) || 'No description'}
+                    </pre>
                   </Tooltip>
                 }
               >

diff --git a/ui/src/custom.scss b/ui/src/custom.scss
@@ -291,3 +291,7 @@ a {
     opacity: 0.5;
   }
 }
+
+.moreinfo-tooltip > .tooltip-inner {
+  max-width: none;
+}
diff --git a/ui/src/pages/bed-splash.tsx b/ui/src/pages/bed-splash.tsx
@@ -97,7 +97,7 @@ export const BedSplash = () => {
         </Layout>
       );
     } else {
-      return <ErrorPage title={`BEDbase | ${bedId}`} error={error} />;
+      return <ErrorPage title={`BEDbase | ${bedId}`} error={error as AxiosError} />;
     }
   } else {
     return (