Merge pull request #491 from VEuPathDB/426-donut-marker-config-panel

slim down donut and bar plots panels
VEuPathDB · Sep 13, 2023 · 75ff58d · 75ff58d
2 parents ebe2137 + 449958b
commit 75ff58d
Show file tree

Hide file tree

Showing 4 changed files with 105 additions and 76 deletions.
diff --git a/...ages/libs/eda/src/lib/map/analysis/MarkerConfiguration/BarPlotMarkerConfigurationMenu.tsx b/...ages/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,26 +185,31 @@ 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' }}>
+        <div style={{ fontWeight: 'bold', marginBottom: '0.5em' }}>
           Summary marker (all filtered data)
-        </span>
+        </div>
         {overlayConfiguration?.overlayType === 'categorical' ? (
           <>
             <CategoricalMarkerPreview
@@ -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,22 +246,28 @@ 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'
               ? []
               : ['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/...libs/eda/src/lib/map/analysis/MarkerConfiguration/CategoricalMarkerConfigurationTable.tsx b/...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}</>
@@ -194,14 +198,14 @@ export function CategoricalMarkerConfigurationTable<T>({
   return (
     <div
       style={{
-        padding: 15,
+        padding: 10,
         border: `1px solid rgb(204,204,204)`,
         width: 'fit-content',
       }}
     >
       <div
         style={{
-          maxWidth: '50vw',
+          maxWidth: '340px',
           maxHeight: 300,
           overflow: 'auto',
         }}
@@ -221,7 +225,7 @@ export function CategoricalMarkerConfigurationTable<T>({
         options={['filtered', 'visible']}
         optionLabels={['Filtered', 'Visible']}
         buttonColor={'primary'}
-        // margins={['0em', '0', '0', '1em']}
+        margins={['1em', '0', '0', '0em']}
         onOptionSelected={handleCountsSelection}
       />
     </div>

diff --git a/packages/libs/eda/src/lib/map/analysis/MarkerConfiguration/CategoricalMarkerPreview.tsx b/packages/libs/eda/src/lib/map/analysis/MarkerConfiguration/CategoricalMarkerPreview.tsx
@@ -19,7 +19,7 @@ type Props = {
 };
 
 export const sharedStandaloneMarkerProperties = {
-  markerScale: 3,
+  markerScale: 2.5,
   containerStyles: {
     width: 'fit-content',
     height: 'fit-content',

diff --git a/packages/libs/eda/src/lib/map/analysis/MarkerConfiguration/PieMarkerConfigurationMenu.tsx b/packages/libs/eda/src/lib/map/analysis/MarkerConfiguration/PieMarkerConfigurationMenu.tsx
@@ -17,7 +17,6 @@ import { CategoricalMarkerPreview } from './CategoricalMarkerPreview';
 import Barplot from '@veupathdb/components/lib/plots/Barplot';
 import { SubsettingClient } from '../../../core/api';
 import RadioButtonGroup from '@veupathdb/components/lib/components/widgets/RadioButtonGroup';
-import LabelledGroup from '@veupathdb/components/lib/components/widgets/LabelledGroup';
 import { useUncontrolledSelections } from '../hooks/uncontrolledSelections';
 import {
   BinningMethod,
@@ -172,26 +171,31 @@ export function PieMarkerConfigurationMenu({
       >
         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' }}>
+        <div style={{ fontWeight: 'bold', marginBottom: '0.5em' }}>
           Summary marker (all filtered data)
-        </span>
+        </div>
         {overlayConfiguration?.overlayType === 'categorical' ? (
           <CategoricalMarkerPreview
             overlayConfiguration={overlayConfiguration}
@@ -203,7 +207,7 @@ export function PieMarkerConfigurationMenu({
           continuousMarkerPreview
         )}
       </div>
-      <LabelledGroup label="Donut marker controls">
+      {overlayConfiguration?.overlayType === 'continuous' && (
         <RadioButtonGroup
           containerStyles={
             {
@@ -213,11 +217,7 @@ export function PieMarkerConfigurationMenu({
           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']}
           onOptionSelected={handleBinningMethodSelection}
@@ -227,7 +227,7 @@ export function PieMarkerConfigurationMenu({
               : ['equalInterval', 'quantile', 'standardDeviation']
           }
         />
-      </LabelledGroup>
+      )}
       {overlayConfiguration?.overlayType === 'categorical' && (
         <CategoricalMarkerConfigurationTable
           overlayValues={overlayConfiguration.overlayValues}
@@ -261,7 +261,9 @@ export function PieMarkerConfigurationMenu({
               marginBottom: 0,
             }}
             containerStyles={{
-              height: 300,
+              // set barplot maxWidth
+              height: '300px',
+              maxWidth: '360px',
             }}
           />
         </div>