From fcf8f1d279c6573f32a444ee9c5b485838b1e7ef Mon Sep 17 00:00:00 2001
From: Carlos Cruz <me@carcruzcast.com>
Date: Tue, 26 Nov 2024 10:50:15 +0000
Subject: [PATCH] [Platform]: styles vis controls  (#560)

---
 .../src/variant/GWASCredibleSets/Body.tsx     | 17 +++++++----
 .../components/Section/SectionViewToggle.tsx  | 30 ++++++++++++++-----
 2 files changed, 34 insertions(+), 13 deletions(-)

diff --git a/packages/sections/src/variant/GWASCredibleSets/Body.tsx b/packages/sections/src/variant/GWASCredibleSets/Body.tsx
index 38d591c7b..700c4f3c1 100644
--- 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
index fedea64e9..7f60e6358 100644
--- 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>