[Platform]: styles vis controls (#560)

opentargets · Nov 26, 2024 · fcf8f1d · fcf8f1d
1 parent 683d665
commit fcf8f1d
Show file tree

Hide file tree

Showing 2 changed files with 34 additions and 13 deletions.
diff --git a/packages/sections/src/variant/GWASCredibleSets/Body.tsx b/packages/sections/src/variant/GWASCredibleSets/Body.tsx
@@ -165,7 +165,8 @@ function getColumns({ id, referenceAllele, alternateAllele }: getColumnsType) {
     {
       id: "confidence",
       label: "Fine-mapping confidence",
-      tooltip: "Fine-mapping confidence based on the suitability of the linkage-desequilibrium information and fine-mapping method",
+      tooltip:
+        "Fine-mapping confidence based on the suitability of the linkage-desequilibrium information and fine-mapping method",
       sortable: true,
       renderCell: ({ confidence }) => {
         if (!confidence) return naLabel;
@@ -260,14 +261,18 @@ function Body({ id, entity }: BodyProps) {
           alternateAllele={request.data?.variant.alternateAllele}
         />
       )}
+      renderChart={() => {
+        return (
+          <PheWasPlot
+            loading={request.loading}
+            data={request.data?.variant.gwasCredibleSets.rows}
+            id={id}
+          />
+        );
+      }}
       renderBody={() => {
         return (
           <>
-            <PheWasPlot
-              loading={request.loading}
-              data={request.data?.variant.gwasCredibleSets.rows}
-              id={id}
-            />
             <OtTable
               dataDownloader
               showGlobalFilter

diff --git a/packages/ui/src/components/Section/SectionViewToggle.tsx b/packages/ui/src/components/Section/SectionViewToggle.tsx
@@ -1,9 +1,12 @@
 import { faChartPie, faTableColumns } from "@fortawesome/free-solid-svg-icons";
-import { FormControl, MenuItem, Select, SelectChangeEvent } from "@mui/material";
+import { FormControl, MenuItem, Select, SelectChangeEvent, Box } from "@mui/material";
 import { ReactElement, useState } from "react";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { VIEW } from "../../constants";
 
+const menuItemStyles = { display: "flex", gap: 1 };
+const menuActiveStyles = { display: "flex", gap: 1, alignItems: "center" };
+
 type SectionViewToggleProps = {
   defaultValue: string;
   viewChange: (s: string) => void;
@@ -23,13 +26,26 @@ function SectionViewToggle({
   };
 
   return (
-    <FormControl sx={{ m: 1, minWidth: 120 }} size="small">
-      <Select sx={{ typography: "body2" }} value={alignment} onChange={handleAlignment}>
-        <MenuItem value={VIEW.table}>
-          <FontAwesomeIcon icon={faTableColumns} /> {VIEW.table} View
+    <FormControl size="small">
+      <Select
+        sx={{ typography: "body2" }}
+        value={alignment}
+        onChange={handleAlignment}
+        renderValue={view => {
+          const iconView = VIEW.table ? faTableColumns : faChartPie;
+          return (
+            <Box sx={menuActiveStyles}>
+              <FontAwesomeIcon icon={iconView} /> {view} view
+            </Box>
+          );
+        }}
+      >
+        <MenuItem value={VIEW.table} sx={menuItemStyles}>
+          <FontAwesomeIcon icon={faTableColumns} />
+          {VIEW.table}
         </MenuItem>
-        <MenuItem value={VIEW.chart}>
-          <FontAwesomeIcon icon={faChartPie} /> {VIEW.chart} View
+        <MenuItem value={VIEW.chart} sx={menuItemStyles}>
+          <FontAwesomeIcon icon={faChartPie} /> {VIEW.chart}
         </MenuItem>
       </Select>
     </FormControl>