From 2cb2efc15f45cc90da5c6c6562e162873d60a15e Mon Sep 17 00:00:00 2001
From: "Dae Kun (DK) Kwon" <dkwon@nd.edu>
Date: Wed, 13 Sep 2023 14:33:13 -0400
Subject: [PATCH] address feedbacks and change bar plot panel as well

---
 .../BarPlotMarkerConfigurationMenu.tsx        | 109 +++++++++++-------
 .../CategoricalMarkerConfigurationTable.tsx   |   4 +
 .../PieMarkerConfigurationMenu.tsx            |   4 +-
 3 files changed, 72 insertions(+), 45 deletions(-)

diff --git a/packages/libs/eda/src/lib/map/analysis/MarkerConfiguration/BarPlotMarkerConfigurationMenu.tsx b/packages/libs/eda/src/lib/map/analysis/MarkerConfiguration/BarPlotMarkerConfigurationMenu.tsx
index ae67024c10..785d9295ca 100644
--- a/packages/libs/eda/src/lib/map/analysis/MarkerConfiguration/BarPlotMarkerConfigurationMenu.tsx
+++ b/packages/libs/eda/src/lib/map/analysis/MarkerConfiguration/BarPlotMarkerConfigurationMenu.tsx
@@ -16,7 +16,6 @@ import { CategoricalMarkerConfigurationTable } from './CategoricalMarkerConfigur
 import { CategoricalMarkerPreview } from './CategoricalMarkerPreview';
 import Barplot from '@veupathdb/components/lib/plots/Barplot';
 import { SubsettingClient } from '../../../core/api';
-import LabelledGroup from '@veupathdb/components/lib/components/widgets/LabelledGroup';
 import { Toggle } from '@veupathdb/coreui';
 import { SharedMarkerConfigurations } from './PieMarkerConfigurationMenu';
 import { useUncontrolledSelections } from '../hooks/uncontrolledSelections';
@@ -25,6 +24,7 @@ import {
   SelectedCountsOption,
   SelectedValues,
 } from '../appState';
+import { gray } from '@veupathdb/coreui/lib/definitions/colors';
 
 interface MarkerConfiguration<T extends string> {
   type: T;
@@ -185,22 +185,27 @@ export function BarPlotMarkerConfigurationMenu({
       >
         Color:
       </p>
-      <InputVariables
-        inputs={[
-          {
-            name: 'overlayVariable',
-            label: 'Variable',
-            titleOverride: ' ',
-            isNonNullable: true,
-          },
-        ]}
-        entities={entities}
-        selectedVariables={{ overlayVariable: configuration.selectedVariable }}
-        onChange={handleInputVariablesOnChange}
-        starredVariables={starredVariables}
-        toggleStarredVariable={toggleStarredVariable}
-        constraints={constraints}
-      />
+      {/* limit inputVariables width */}
+      <div style={{ maxWidth: '350px' }}>
+        <InputVariables
+          inputs={[
+            {
+              name: 'overlayVariable',
+              label: 'Variable',
+              titleOverride: ' ',
+              isNonNullable: true,
+            },
+          ]}
+          entities={entities}
+          selectedVariables={{
+            overlayVariable: configuration.selectedVariable,
+          }}
+          onChange={handleInputVariablesOnChange}
+          starredVariables={starredVariables}
+          toggleStarredVariable={toggleStarredVariable}
+          constraints={constraints}
+        />
+      </div>
       <div style={{ margin: '5px 0 0 0' }}>
         <span style={{ fontWeight: 'bold' }}>
           Summary marker (all filtered data)
@@ -221,7 +226,17 @@ export function BarPlotMarkerConfigurationMenu({
           continuousMarkerPreview
         )}
       </div>
-      <LabelledGroup label="Marker X-axis controls">
+      <div style={{ maxWidth: '360px', marginTop: '1em' }}>
+        <div
+          style={{
+            color: gray[900],
+            fontWeight: 500,
+            fontSize: '1.2em',
+            marginBottom: '0.5em',
+          }}
+        >
+          Marker X-axis controls
+        </div>
         <RadioButtonGroup
           containerStyles={
             {
@@ -231,13 +246,9 @@ export function BarPlotMarkerConfigurationMenu({
           label="Binning method"
           selectedOption={configuration.binningMethod ?? 'equalInterval'}
           options={['equalInterval', 'quantile', 'standardDeviation']}
-          optionLabels={[
-            'Equal interval',
-            'Quantile (10)',
-            'Standard deviation',
-          ]}
+          optionLabels={['Equal interval', 'Quantile (10)', 'Std. dev.']}
           buttonColor={'primary'}
-          // margins={['0em', '0', '0', '1em']}
+          // margins={['-1em', '0', '0', '0em']}
           onOptionSelected={handleBinningMethodSelection}
           disabledList={
             overlayConfiguration?.overlayType === 'continuous'
@@ -245,8 +256,18 @@ export function BarPlotMarkerConfigurationMenu({
               : ['equalInterval', 'quantile', 'standardDeviation']
           }
         />
-      </LabelledGroup>
-      <LabelledGroup label="Marker Y-axis controls">
+      </div>
+      <div style={{ maxWidth: '360px', marginTop: '1em', marginBottom: '1em' }}>
+        <div
+          style={{
+            color: gray[900],
+            fontWeight: 500,
+            fontSize: '1.2em',
+            marginBottom: '0.5em',
+          }}
+        >
+          Marker Y-axis controls
+        </div>
         <RadioButtonGroup
           containerStyles={
             {
@@ -258,7 +279,7 @@ export function BarPlotMarkerConfigurationMenu({
           options={['count', 'proportion']}
           optionLabels={['Count', 'Proportion']}
           buttonColor={'primary'}
-          // margins={['0em', '0', '0', '1em']}
+          // margins={['-1em', '0', '0', '1em']}
           onOptionSelected={handlePlotModeSelection}
         />
         <Toggle
@@ -267,21 +288,23 @@ export function BarPlotMarkerConfigurationMenu({
           value={configuration.dependentAxisLogScale}
           onChange={handleLogScaleChange}
         />
-      </LabelledGroup>
+      </div>
       {overlayConfiguration?.overlayType === 'categorical' && (
-        <CategoricalMarkerConfigurationTable
-          overlayValues={overlayConfiguration.overlayValues}
-          configuration={configuration}
-          onChange={onChange}
-          uncontrolledSelections={uncontrolledSelections}
-          setUncontrolledSelections={setUncontrolledSelections}
-          allCategoricalValues={
-            configuration.selectedCountsOption === 'filtered'
-              ? allFilteredCategoricalValues
-              : allVisibleCategoricalValues
-          }
-          selectedCountsOption={configuration.selectedCountsOption}
-        />
+        <div style={{ maxWidth: '360px', marginTop: '1em' }}>
+          <CategoricalMarkerConfigurationTable
+            overlayValues={overlayConfiguration.overlayValues}
+            configuration={configuration}
+            onChange={onChange}
+            uncontrolledSelections={uncontrolledSelections}
+            setUncontrolledSelections={setUncontrolledSelections}
+            allCategoricalValues={
+              configuration.selectedCountsOption === 'filtered'
+                ? allFilteredCategoricalValues
+                : allVisibleCategoricalValues
+            }
+            selectedCountsOption={configuration.selectedCountsOption}
+          />
+        </div>
       )}
       {overlayConfiguration?.overlayType === 'continuous' && barplotData.value && (
         <div style={{ margin: '5px 0 0 0' }}>
@@ -301,8 +324,8 @@ export function BarPlotMarkerConfigurationMenu({
               marginBottom: 0,
             }}
             containerStyles={{
-              height: 250,
-              width: 400,
+              height: '300px',
+              maxWidth: '360px',
             }}
           />
         </div>
diff --git a/packages/libs/eda/src/lib/map/analysis/MarkerConfiguration/CategoricalMarkerConfigurationTable.tsx b/packages/libs/eda/src/lib/map/analysis/MarkerConfiguration/CategoricalMarkerConfigurationTable.tsx
index 33013300d3..07bce43224 100644
--- a/packages/libs/eda/src/lib/map/analysis/MarkerConfiguration/CategoricalMarkerConfigurationTable.tsx
+++ b/packages/libs/eda/src/lib/map/analysis/MarkerConfiguration/CategoricalMarkerConfigurationTable.tsx
@@ -169,6 +169,10 @@ export function CategoricalMarkerConfigurationTable<T>({
          */
         key: 'label',
         name: 'Values',
+        style: {
+          wordBreak: 'break-word',
+          hyphens: 'auto',
+        },
         sortable: true,
         renderCell: (data: { row: AllValuesDefinition }) => (
           <>{data.row.label}</>
diff --git a/packages/libs/eda/src/lib/map/analysis/MarkerConfiguration/PieMarkerConfigurationMenu.tsx b/packages/libs/eda/src/lib/map/analysis/MarkerConfiguration/PieMarkerConfigurationMenu.tsx
index ac3d9bd92d..6882b618f3 100644
--- a/packages/libs/eda/src/lib/map/analysis/MarkerConfiguration/PieMarkerConfigurationMenu.tsx
+++ b/packages/libs/eda/src/lib/map/analysis/MarkerConfiguration/PieMarkerConfigurationMenu.tsx
@@ -214,10 +214,10 @@ export function PieMarkerConfigurationMenu({
               // marginTop: 20,
             }
           }
-          label="Binning method (Dev. = Deviation)"
+          label="Binning method"
           selectedOption={configuration.binningMethod ?? 'equalInterval'}
           options={['equalInterval', 'quantile', 'standardDeviation']}
-          optionLabels={['Equal interval', 'Quantile (10)', 'Standard dev.']}
+          optionLabels={['Equal interval', 'Quantile (10)', 'Std. dev.']}
           buttonColor={'primary'}
           // margins={['0em', '0', '0', '1em']}
           onOptionSelected={handleBinningMethodSelection}