From 259ad5f80f4dc5cb09c413dc93192146b7d7d7d1 Mon Sep 17 00:00:00 2001
From: Toyo <udosent2@nih.gov>
Date: Fri, 13 Dec 2024 15:49:20 +0100
Subject: [PATCH] sample profile x-axis fix

---
 src/bento/studyDetailsData.tsx                | 12 +++++++++---
 src/pages/study/views/SampleProfile.tsx       |  2 +-
 .../study/views/sample-profile-madal.tsx      | 19 ++++++++++++-------
 .../study/views/sample-profile-modal-store.ts | 11 ++++++++++-
 4 files changed, 32 insertions(+), 12 deletions(-)

diff --git a/src/bento/studyDetailsData.tsx b/src/bento/studyDetailsData.tsx
index d9308b16..3a1b6322 100644
--- a/src/bento/studyDetailsData.tsx
+++ b/src/bento/studyDetailsData.tsx
@@ -36,16 +36,22 @@ export const sampleProfile = {
     {
       index: 0,
       label: <div style={sampleProfileTabTextStyle}>SITE</div>,
+      xAxisLabel: 'Sample site',
+      yAxisLabel: 'Sample count',
       value: 'studySampleSiteCount',
     },
     {
       index: 1,
       label: <div style={sampleProfileTabTextStyle}>TYPE</div>,
+      xAxisLabel: 'Sample type',
+      yAxisLabel: 'Sample count',
       value: 'studySampleTypeCount',
     },
     {
       index: 2,
       label: <div style={sampleProfileTabTextStyle}>PATHOLOGY</div>,
+      xAxisLabel: 'Sample pathology',
+      yAxisLabel: 'Sample count',
       value: 'studySamplePathologyCount',
     },
   ],
@@ -74,13 +80,13 @@ export const palette = [
   '#02ad0f',
 ];
 
-export const argumentConfiguration = {
+export const argumentConfiguration = (text: string) => ({
   field: 'group',
   visible: false,
   position: 'inside',
   size: 12,
   title: {
-    text: 'Sample site',
+    text,
     size: 14,
     family: 'Inter',
     weight: '500',
@@ -91,7 +97,7 @@ export const argumentConfiguration = {
     position: 'inside',
     staggeringSpacing: 10,
   },
-};
+});
 export const valueConfiguration = {
   field: 'count',
   size: 12,
diff --git a/src/pages/study/views/SampleProfile.tsx b/src/pages/study/views/SampleProfile.tsx
index 81f68a92..ef41cbb8 100644
--- a/src/pages/study/views/SampleProfile.tsx
+++ b/src/pages/study/views/SampleProfile.tsx
@@ -149,7 +149,7 @@ const SampleProfile: React.FC<SampleProfileProps> = ({ data }) => {
                       data={data[item.value as keyof StudyQuery]}
                       palette={palette}
                       tooltipContent={tooltipContent}
-                      argument={argumentConfiguration}
+                      argument={argumentConfiguration(item.xAxisLabel)}
                       value={valueConfiguration}
                     />
                   </div>
diff --git a/src/pages/study/views/sample-profile-madal.tsx b/src/pages/study/views/sample-profile-madal.tsx
index 5414fc2d..b87b5e00 100644
--- a/src/pages/study/views/sample-profile-madal.tsx
+++ b/src/pages/study/views/sample-profile-madal.tsx
@@ -1,3 +1,4 @@
+/* eslint-disable @typescript-eslint/no-unsafe-assignment */
 /* eslint-disable @typescript-eslint/no-misused-promises */
 import React from 'react';
 import { BarChartV2 } from '../../../components/BarChartV2';
@@ -39,13 +40,17 @@ const SampleProfileModal: React.FC<SampleProfileModalProps> = ({
   studyCode,
   accessionId,
 }) => {
-  const [{ isModalOpen }, { setIsModalOpen }] = useSampleProfileModal();
-  const [value, setValue] = React.useState('1');
+  const [{ isModalOpen, currentTab }, { setIsModalOpen, setCurrentTab }] =
+    useSampleProfileModal();
+
   const [, actions] = useDashboardTabs();
   const filterStudy = `${studyCode} (${accessionId})`;
 
-  const handleTabChange = (event: React.SyntheticEvent, newValue: string) => {
-    setValue(newValue);
+  const handleTabChange = async (
+    event: React.SyntheticEvent,
+    newValue: string
+  ) => {
+    await setCurrentTab(newValue);
   };
 
   const showModal = async () => {
@@ -87,7 +92,7 @@ const SampleProfileModal: React.FC<SampleProfileModalProps> = ({
           </IconButton>
         </StyledDialogTitle>
         <StyledDialogContent>
-          <TabContext value={value}>
+          <TabContext value={currentTab}>
             <Box sx={{ height: '100%' }}>
               <Box
                 sx={{
@@ -198,8 +203,8 @@ const SampleProfileModal: React.FC<SampleProfileModalProps> = ({
                       <BarChartV2
                         chartData={data[item.value as keyof StudyQuery]}
                         palette={palette}
-                        yAxisLabel="Sample count"
-                        xAxisLabel="Sample site"
+                        yAxisLabel={item.yAxisLabel}
+                        xAxisLabel={item.xAxisLabel}
                       />
                     </StyledTabPanel>
                   );
diff --git a/src/pages/study/views/sample-profile-modal-store.ts b/src/pages/study/views/sample-profile-modal-store.ts
index 18765796..056a2e1f 100644
--- a/src/pages/study/views/sample-profile-modal-store.ts
+++ b/src/pages/study/views/sample-profile-modal-store.ts
@@ -2,10 +2,12 @@ import { createStore, createHook, Action } from 'react-sweet-state';
 
 type State = {
   isModalOpen: boolean;
+  currentTab: string;
 };
 
 const initialState: State = {
   isModalOpen: false,
+  currentTab: '1',
 };
 
 const actions = {
@@ -13,7 +15,14 @@ const actions = {
     (isModalOpen: boolean): Action<State> =>
     ({ setState }) => {
       setState({
-        isModalOpen: isModalOpen,
+        isModalOpen,
+      });
+    },
+  setCurrentTab:
+    (currentTab: string): Action<State> =>
+    ({ setState }) => {
+      setState({
+        currentTab,
       });
     },
 };