Restyle Microtrait and Biolog tooltips.

kbase · May 6, 2024 · d6a9295 · d6a9295
1 parent 38d1743
commit d6a9295
Show file tree

Hide file tree

Showing 3 changed files with 100 additions and 30 deletions.
diff --git a/src/features/collections/data_products/Biolog.tsx b/src/features/collections/data_products/Biolog.tsx
@@ -68,23 +68,41 @@ export const Biolog: FC<{
     } else {
       return (
         <>
-          Type: {column.columnDef.meta?.type}
-          <hr />
-          Row: (
-          <DataViewLink identifier={row.kbase_id}>
-            {row.kbase_id}
-          </DataViewLink>) {row.kbase_display_name}
-          <br />
-          Col: {column.columnDef.header}
-          <br />
-          Val: {`${cell.val}`}
-          <br />
-          Media: {`${cell.meta?.growth_media}`}
-          <>
+          <table>
+            <tr>
+              <th>KBase ID</th>
+              <td>
+                <DataViewLink identifier={row.kbase_id}>
+                  {row.kbase_id}
+                </DataViewLink>
+                ) {row.kbase_display_name}
+              </td>
+            </tr>
+            <tr>
+              <th>Treatment</th>
+              <td>{`${column.columnDef.header}`}</td>
+            </tr>
+            <tr>
+              <td colSpan={2}>
+                <hr />
+              </td>
+            </tr>
+            <tr>
+              <th>Type</th>
+              <td>{column.columnDef.meta?.type}</td>
+            </tr>
+            <tr>
+              <th>Value</th>
+              <td> {`${cell.val}`}</td>
+            </tr>
+            <tr>
+              <th>Media</th>
+              <td>{cell.meta?.growth_media}</td>
+            </tr>
             {data.values.map(({ id, val }) => (
               <div key={id}>{`- ${id}:${val}`}</div>
             ))}
-          </>
+          </table>
         </>
       );
     }

diff --git a/src/features/collections/data_products/HeatMap.module.scss b/src/features/collections/data_products/HeatMap.module.scss
@@ -100,6 +100,7 @@ See the mouseout handler in the <HeatMap /> component.
   color: use-color("white");
   font-size: 0.667rem;
   font-weight: bold;
+  max-width: 250px;
   padding: 4px 8px;
   position: fixed;
   z-index: 1;
@@ -113,6 +114,19 @@ See the mouseout handler in the <HeatMap /> component.
   color: use-color("accent-cool");
 }
 
+.tooltip th {
+  min-width: 4rem;
+  text-align: left;
+  vertical-align: top;
+  word-break: normal;
+  word-wrap: break-word;
+}
+
+.tooltip td {
+  text-align: left;
+  word-break: break-all;
+}
+
 .trait-names {
   display: flex;
   flex-flow: row nowrap;

diff --git a/src/features/collections/data_products/Microtrait.tsx b/src/features/collections/data_products/Microtrait.tsx
@@ -70,22 +70,60 @@ export const Microtrait: FC<{
     } else {
       return (
         <>
-          Type: {column.columnDef.meta?.type}
-          <hr />
-          Row: (
-          <DataViewLink identifier={getUPAFromEncoded(row.kbase_id)}>
-            {getUPAFromEncoded(row.kbase_id)}
-          </DataViewLink>
-          ) {row.kbase_display_name}
-          <br />
-          Col: {column.columnDef.header}
-          <br />
-          Val: {`${cell.val}`}
-          <>
-            {data.values.map(({ id, val }) => (
-              <div key={id}>{`- ${id}:${val}`}</div>
-            ))}
-          </>
+          <table>
+            <tr>
+              <th>KBase ID</th>
+              <td>
+                (
+                <DataViewLink identifier={getUPAFromEncoded(row.kbase_id)}>
+                  {getUPAFromEncoded(row.kbase_id)}
+                </DataViewLink>
+                ) {row.kbase_display_name}
+              </td>
+            </tr>
+            <tr>
+              <th>Trait</th>
+              <td>{`${column.columnDef.header}`}</td>
+            </tr>
+            <tr>
+              <td colSpan={2}>
+                <hr />
+              </td>
+            </tr>
+            <tr>
+              <th>Type</th>
+              <td>{column.columnDef.meta?.type}</td>
+            </tr>
+            <tr>
+              <th>Value</th>
+              <td> {`${cell.val}`}</td>
+            </tr>
+            {data.values.length > 0 ? (
+              <>
+                <tr>
+                  <td colSpan={2}>
+                    <hr />
+                  </td>
+                </tr>
+                <tr>
+                  <th>Genes Detected</th>
+                  <th>
+                    <abbr title="Trusted Cutoff">TC</abbr> value
+                  </th>
+                </tr>
+                <>
+                  {data.values.map(({ id, val }) => (
+                    <tr key={id}>
+                      <td>{id}</td>
+                      <td>{val}</td>
+                    </tr>
+                  ))}
+                </>
+              </>
+            ) : (
+              <></>
+            )}
+          </table>
         </>
       );
     }