reduce grid spacing

datavisyn · Jun 12, 2024 · 0cc24fd · 0cc24fd
1 parent 2c018b7
commit 0cc24fd
Show file tree

Hide file tree

Showing 6 changed files with 56 additions and 38 deletions.
diff --git a/src/vis/general/layoutUtils.ts b/src/vis/general/layoutUtils.ts
@@ -1,6 +1,25 @@
 import { PlotlyTypes } from '../../plotly';
 import { ColumnInfo, PlotlyInfo, VisColumn } from '../interfaces';
-import { VIS_AXIS_LABEL_SIZE, VIS_AXIS_LABEL_SIZE_SMALL, VIS_GRID_COLOR, VIS_LABEL_COLOR, VIS_TICK_LABEL_SIZE, VIS_TICK_LABEL_SIZE_SMALL, VIS_TRACES_COLOR } from './constants';
+import {
+  VIS_AXIS_LABEL_SIZE,
+  VIS_AXIS_LABEL_SIZE_SMALL,
+  VIS_GRID_COLOR,
+  VIS_LABEL_COLOR,
+  VIS_TICK_LABEL_SIZE,
+  VIS_TICK_LABEL_SIZE_SMALL,
+  VIS_TRACES_COLOR,
+} from './constants';
+
+/**
+ *
+ * @param alpha Alpha value from 0-1 to convert to hex representation
+ * @returns Hex representation of the given alpha value
+ */
+export const alphaToHex = (alpha: number) => {
+  const alphaInt = Math.round(alpha * 255);
+  const alphaHex = alphaInt.toString(16).toUpperCase();
+  return alphaHex.padStart(2, '0');
+};
 
 /**
  * Truncate long texts (e.g., to use as axes title)

diff --git a/src/vis/scatter/ScatterVis.tsx b/src/vis/scatter/ScatterVis.tsx
@@ -221,7 +221,7 @@ export function ScatterVis({
         b: 50,
       },
       shapes: [],
-      grid: { rows: traces.rows, columns: traces.cols, xgap: 0.3, pattern: 'independent' },
+      grid: { rows: traces.rows, columns: traces.cols, xgap: 0.15, ygap: config.facets ? 0.2 : 0.15, pattern: 'independent' },
       dragmode: config.dragMode,
     };
 

diff --git a/src/vis/sidebar/SingleSelect.tsx b/src/vis/sidebar/SingleSelect.tsx
@@ -8,6 +8,7 @@ export function SingleSelect({
   currentSelected,
   columnType,
   label,
+  disabledTooltip,
   isClearable = true,
   disabled = false,
 }: {
@@ -19,6 +20,7 @@ export function SingleSelect({
   label: string;
   isClearable?: boolean;
   disabled?: boolean;
+  disabledTooltip?: string;
 }) {
   const filteredColumns = React.useMemo(() => {
     return columnType ? columns.filter((c) => c.type === columnType) : columns;
@@ -56,34 +58,36 @@ export function SingleSelect({
       }}
     >
       <Combobox.Target>
-        <InputBase
-          component="button"
-          label={
-            <Text size="sm" fw={500} c={disabled ? 'dimmed' : 'black'}>
-              {label}
-            </Text>
-          }
-          disabled={disabled}
-          type="button"
-          pointer
-          onClick={() => combobox.toggleDropdown()}
-          rightSectionPointerEvents={currentSelected === null ? 'none' : 'all'}
-          rightSection={
-            disabled ? null : currentSelected !== null && isClearable ? (
-              <CloseButton size="sm" onMouseDown={(event) => event.preventDefault()} onClick={() => callback(null)} aria-label="Clear value" />
+        <Tooltip label={disabledTooltip} disabled={!disabled} withArrow>
+          <InputBase
+            component="button"
+            label={
+              <Text size="sm" fw={500} c={disabled ? 'dimmed' : 'black'}>
+                {label}
+              </Text>
+            }
+            disabled={disabled}
+            type="button"
+            pointer
+            onClick={() => combobox.toggleDropdown()}
+            rightSectionPointerEvents={currentSelected === null ? 'none' : 'all'}
+            rightSection={
+              disabled ? null : currentSelected !== null && isClearable ? (
+                <CloseButton size="sm" onMouseDown={(event) => event.preventDefault()} onClick={() => callback(null)} aria-label="Clear value" />
+              ) : (
+                <Combobox.Chevron />
+              )
+            }
+          >
+            {currentSelected?.name ? (
+              <Text size="sm" truncate maw={120}>
+                {currentSelected?.name}
+              </Text>
             ) : (
-              <Combobox.Chevron />
-            )
-          }
-        >
-          {currentSelected?.name ? (
-            <Text size="sm" truncate maw={120}>
-              {currentSelected?.name}
-            </Text>
-          ) : (
-            <Input.Placeholder>Select a column</Input.Placeholder>
-          )}
-        </InputBase>
+              <Input.Placeholder>Select a column</Input.Placeholder>
+            )}
+          </InputBase>
+        </Tooltip>
       </Combobox.Target>
 
       <Combobox.Dropdown>

diff --git a/src/vis/violin/ViolinVis.tsx b/src/vis/violin/ViolinVis.tsx
@@ -117,7 +117,7 @@ export function ViolinVis({
       clickmode: 'event+select',
       dragmode: config.violinOverlay === EViolinOverlay.STRIP ? 'lasso' : false, // Disables zoom (makes no sense in violin plots)
       autosize: true,
-      grid: { rows: traces.rows, columns: traces.cols, xgap: 0.3, pattern: 'independent' },
+      grid: { rows: traces.rows, columns: traces.cols, xgap: 0.15, ygap: 0.15, pattern: 'independent' },
       shapes: [],
       // @ts-ignore
       violinmode: traces.violinMode,

diff --git a/src/vis/violin/ViolinVisSidebar.tsx b/src/vis/violin/ViolinVisSidebar.tsx
@@ -80,6 +80,7 @@ export function ViolinVisSidebar({
               columns={columns.filter((c) => c.info.id !== config.catColumnSelected?.id && c.info.id !== config.subCategorySelected?.id)}
               currentSelected={config.facetBy}
               disabled={config.numColumnsSelected.length > 1}
+              disabledTooltip="Facets are disabled with more than one numerical column selected."
             />
           )
         : null}

diff --git a/src/vis/violin/utils.ts b/src/vis/violin/utils.ts
@@ -2,11 +2,11 @@ import _ from 'lodash';
 import merge from 'lodash/merge';
 import { i18n } from '../../i18n';
 import { categoricalColors } from '../../utils';
+import { ESortStates } from '../general/SortIcon';
 import { NAN_REPLACEMENT, SELECT_COLOR, VIS_NEUTRAL_COLOR, VIS_UNSELECTED_OPACITY } from '../general/constants';
-import { columnNameWithDescription, resolveColumnValues, truncateText } from '../general/layoutUtils';
+import { alphaToHex, columnNameWithDescription, resolveColumnValues, truncateText } from '../general/layoutUtils';
 import { EColumnTypes, ESupportedPlotlyVis, PlotlyData, PlotlyInfo, VisCategoricalColumn, VisColumn, VisNumericalColumn } from '../interfaces';
 import { EViolinOverlay, EYAxisMode, IViolinConfig } from './interfaces';
-import { ESortStates } from '../general/SortIcon';
 
 const defaultConfig: IViolinConfig = {
   type: ESupportedPlotlyVis.VIOLIN,
@@ -47,12 +47,6 @@ interface IViolinDataRow {
 
 const concatGroup = (group: IGroupDefinition) => `${group.num.val}${group.cat?.val}${group.subCat?.val}${group.facet?.val}${group.plotId}`;
 
-const alphaToHex = (alpha: number) => {
-  const alphaInt = Math.round(alpha * 255);
-  const alphaHex = alphaInt.toString(16).toUpperCase();
-  return alphaHex.padStart(2, '0');
-};
-
 export async function createViolinTraces(
   columns: VisColumn[],
   config: IViolinConfig,