Towards hexagon cells in Gridded Glyphs

src/components/DemographicsDashboard/shared/geoMapLayers/=griddedGlyphs/GriddedGlyphsLayerPanel.tsx

@@ -1,4 +1,3 @@
-import InfoIcon from "@mui/icons-material/Info";
 import GeoMapLayerPanelEssentials from "../shared/GeoMapLayerPanelEssentials";
 import { GeoMapLayerPanel } from "../types";
 import * as React from "react";
@@ -10,7 +9,6 @@ import {
   FormGroup,
   Slider,
   SliderProps,
-  Tooltip,
   Typography,
 } from "@mui/material";
 import { GriddedGlyphsLayerConfig } from "./types";
@@ -22,6 +20,8 @@ import {
   aggregateDistanceSetup,
   gridPixelSizeSetup,
 } from "./shared/helpersForConfig";
+import { GridConfig } from "./shared/grid/blueprints";
+import GridPanel from "./shared/grid/GridPanel";
 
 const GriddedGlyphsLayerPanel: GeoMapLayerPanel<GriddedGlyphsLayerConfig> = ({
   layerConfig,
@@ -48,17 +48,17 @@ const GriddedGlyphsLayerPanel: GeoMapLayerPanel<GriddedGlyphsLayerConfig> = ({
     });
   };
 
-  const handleGridSizeChange: SliderProps["onChange"] = (event, value) => {
+  const handleShowGridChange = () => {
     onLayerConfigChange?.({
       ...layerConfig,
-      gridPixelSize: Array.isArray(value) ? value[0] : value,
+      showGridOutline: !layerConfig.showGridOutline,
     });
   };
 
-  const handleSmoothCheckboxChange = () => {
+  const handleGridConfigChange = (gridConfig: GridConfig) => {
     onLayerConfigChange?.({
       ...layerConfig,
-      smooth: !layerConfig.smooth,
+      grid: gridConfig,
     });
   };
 
@@ -80,28 +80,31 @@ const GriddedGlyphsLayerPanel: GeoMapLayerPanel<GriddedGlyphsLayerConfig> = ({
         Math.max(gridPixelSizeSetup.min, newValue),
       );
 
-      if (cappedValue !== layerConfig.gridPixelSize) {
+      if (cappedValue !== layerConfig.grid.pixelSize) {
         onLayerConfigChange?.({
           ...layerConfig,
-          gridPixelSize: cappedValue,
+          grid: {
+            ...layerConfig.grid,
+            pixelSize: cappedValue,
+          },
         });
       }
     };
     return {
       ArrowLeft: (event) => {
-        applyGridPixelSize(layerConfig.gridPixelSize - 1);
+        applyGridPixelSize(layerConfig.grid.pixelSize - 1);
         event.preventDefault();
       },
       "Shift+ArrowLeft": (event) => {
-        applyGridPixelSize(layerConfig.gridPixelSize - 5);
+        applyGridPixelSize(layerConfig.grid.pixelSize - 5);
         event.preventDefault();
       },
       ArrowRight: (event) => {
-        applyGridPixelSize(layerConfig.gridPixelSize + 1);
+        applyGridPixelSize(layerConfig.grid.pixelSize + 1);
         event.preventDefault();
       },
       "Shift+ArrowRight": (event) => {
-        applyGridPixelSize(layerConfig.gridPixelSize + 5);
+        applyGridPixelSize(layerConfig.grid.pixelSize + 5);
         event.preventDefault();
       },
       g: (event) => {
@@ -150,30 +153,21 @@ const GriddedGlyphsLayerPanel: GeoMapLayerPanel<GriddedGlyphsLayerConfig> = ({
           label="show data points"
         />
       </FormGroup>
-      <Divider sx={{ marginTop: 2, marginBottom: 3 }}>Gridding</Divider>
-
-      <FormGroup sx={{ marginTop: 2 }}>
-        <FormControl>
-          <Typography gutterBottom>
-            grid size in pixels: {layerConfig.gridPixelSize}
-          </Typography>
-          <Slider
-            disabled={disabled}
-            value={layerConfig.gridPixelSize}
-            step={5}
-            min={gridPixelSizeSetup.min}
-            max={gridPixelSizeSetup.max}
-            onChange={handleGridSizeChange}
-          />
-        </FormControl>
+      <Divider sx={{ marginTop: 2, marginBottom: 1 }}>Gridding</Divider>
+      <FormControlLabel
+        sx={{ marginBottom: 2 }}
+        control={
+          <Checkbox checked={layerConfig.showGridOutline} disabled={disabled} />
+        }
+        onChange={handleShowGridChange}
+        label="show grid outline"
+      />
+      <GridPanel
+        disabled={disabled}
+        gridConfig={layerConfig.grid}
+        onGridConfigChange={handleGridConfigChange}
+      />
 
-        <FormControlLabel
-          control={<Checkbox checked={layerConfig.smooth} />}
-          onChange={handleSmoothCheckboxChange}
-          label={<>smooth </>}
-          disabled={disabled}
-        />
-      </FormGroup>
       <Divider sx={{ marginTop: 3, marginBottom: 2 }}>Glyph</Divider>
       <GlyphPanel
         disabled={disabled}

src/components/DemographicsDashboard/shared/geoMapLayers/=griddedGlyphs/GriddedGlyphsLayerView.tsx

@@ -46,7 +46,7 @@ const GriddedGlyphsLayerView: GeoMapLayerView<GriddedGlyphsLayerConfig> = ({
 
   const {
     dataAggregateDistance,
-    gridPixelSize,
+    grid: { pixelSize: gridPixelSize },
     glyph: glyphConfig,
     showDataPoints,
     smooth,

src/components/DemographicsDashboard/shared/geoMapLayers/=griddedGlyphs/griddedGlyphsLayerBlueprint.ts

@@ -2,18 +2,21 @@ import { GeoMapLayerBlueprint } from "../types";
 import GriddedGlyphsLayerPanel from "./GriddedGlyphsLayerPanel";
 import GriddedGlyphsLayerView from "./GriddedGlyphsLayerView";
 import { glyphBlueprintLookup } from "./shared/glyphs";
+import { gridBlueprintLookup } from "./shared/grid/blueprints";
 import { GriddedGlyphsLayerConfig } from "./types";
 
 export const griddedGlyphsLayerBlueprint: GeoMapLayerBlueprint<GriddedGlyphsLayerConfig> =
   {
     generateDefaultConfig: () => ({
       geoMapLayerType: "griddedGlyphs",
-      visible: true,
+
       dataAggregateDistance: 2000,
-      gridPixelSize: 40,
+      glyph: glyphBlueprintLookup.heatmap.generateDefaultConfig(),
+      grid: gridBlueprintLookup.square.generateDefaultConfig(),
       showDataPoints: false,
+      showGridOutline: false,
       smooth: false,
-      glyph: glyphBlueprintLookup.heatmap.generateDefaultConfig(),
+      visible: true,
     }),
     Panel: GriddedGlyphsLayerPanel,
     View: GriddedGlyphsLayerView,

src/components/DemographicsDashboard/shared/geoMapLayers/=griddedGlyphs/shared/grid/=hexagon/HexagonGridPanel.tsx

@@ -0,0 +1,49 @@
+import { HexagonGridConfig } from "./types";
+import { GridPanel } from "../types";
+import { ToggleButton, ToggleButtonGroup } from "@mui/material";
+import { HexagonOutlined } from "@mui/icons-material";
+import { HexagonGridOrientation } from ".";
+
+const HexagonGridPanel: GridPanel<HexagonGridConfig> = ({
+  disabled,
+  gridConfig,
+  onGridConfigChange,
+}) => {
+  const handleOrientationChange = (
+    event: unknown,
+    value: HexagonGridOrientation,
+  ) => {
+    onGridConfigChange?.({ ...gridConfig, orientation: value });
+  };
+
+  return (
+    <>
+      <ToggleButtonGroup
+        value={gridConfig.orientation}
+        color={disabled ? undefined : "primary"}
+        exclusive
+        size="small"
+        sx={{
+          marginTop: 1,
+          display: "flex",
+          button: { flexGrow: 1 },
+        }}
+        onChange={handleOrientationChange}
+      >
+        <ToggleButton disabled={disabled} value="vertical">
+          <HexagonOutlined
+            fontSize="small"
+            sx={{ marginRight: 0.5, transform: "rotate(90deg)" }}
+          />
+          vertical
+        </ToggleButton>
+        <ToggleButton disabled={disabled} value="horizontal">
+          <HexagonOutlined fontSize="small" sx={{ marginRight: 0.5 }} />
+          horizontal
+        </ToggleButton>
+      </ToggleButtonGroup>
+    </>
+  );
+};
+
+export default HexagonGridPanel;

src/components/DemographicsDashboard/shared/geoMapLayers/=griddedGlyphs/shared/grid/=hexagon/generateHexagonGridCells.ts

@@ -0,0 +1,8 @@
+import { HexagonGridConfig } from "./types";
+import { GenerateGridCells } from "../types";
+
+export const generateHexagonGridCells: GenerateGridCells<
+  HexagonGridConfig
+> = () => {
+  return [];
+};

src/components/DemographicsDashboard/shared/geoMapLayers/=griddedGlyphs/shared/grid/=hexagon/hexagonGridBlueprint.ts

@@ -0,0 +1,14 @@
+import { HexagonGridConfig } from ".";
+import { GridBlueprint } from "../types";
+import HexagonGridPanel from "./HexagonGridPanel";
+
+export const hexagonGridBlueprint: GridBlueprint<HexagonGridConfig> = {
+  name: "hexagon",
+  generateGridCells: () => [],
+  generateDefaultConfig: () => ({
+    gridType: "hexagon",
+    pixelSize: 30,
+    orientation: "vertical",
+  }),
+  Panel: HexagonGridPanel,
+};

src/components/DemographicsDashboard/shared/geoMapLayers/=griddedGlyphs/shared/grid/=hexagon/index.ts

@@ -0,0 +1,2 @@
+export * from "./hexagonGridBlueprint";
+export * from "./types";

src/components/DemographicsDashboard/shared/geoMapLayers/=griddedGlyphs/shared/grid/=hexagon/types.ts

@@ -0,0 +1,8 @@
+import { BaseGridConfig } from "../types";
+
+export type HexagonGridOrientation = "vertical" | "horizontal";
+
+export interface HexagonGridConfig extends BaseGridConfig {
+  gridType: "hexagon";
+  orientation: HexagonGridOrientation;
+}

src/components/DemographicsDashboard/shared/geoMapLayers/=griddedGlyphs/shared/grid/=square/SquareGridPanel.tsx

@@ -0,0 +1,8 @@
+import { SquareGridConfig } from "./types";
+import { GridPanel } from "../types";
+
+const SquareGridPanel: GridPanel<SquareGridConfig> = () => {
+  return <>{/* square-specific controls go here */}</>;
+};
+
+export default SquareGridPanel;

src/components/DemographicsDashboard/shared/geoMapLayers/=griddedGlyphs/shared/grid/=square/generateSquareGridCells.ts

@@ -0,0 +1,8 @@
+import { SquareGridConfig } from "./types";
+import { GenerateGridCells } from "../types";
+
+export const generateSquareGridCells: GenerateGridCells<
+  SquareGridConfig
+> = () => {
+  return [];
+};

src/components/DemographicsDashboard/shared/geoMapLayers/=griddedGlyphs/shared/grid/=square/index.ts

@@ -0,0 +1,2 @@
+export * from "./squareGridBlueprint";
+export * from "./types";

src/components/DemographicsDashboard/shared/geoMapLayers/=griddedGlyphs/shared/grid/=square/squareGridBlueprint.ts

@@ -0,0 +1,13 @@
+import { SquareGridConfig } from ".";
+import { GridBlueprint } from "../types";
+import SquareGridPanel from "./SquareGridPanel";
+
+export const squareGridBlueprint: GridBlueprint<SquareGridConfig> = {
+  name: "square",
+  generateGridCells: () => [],
+  generateDefaultConfig: () => ({
+    gridType: "square",
+    pixelSize: 30,
+  }),
+  Panel: SquareGridPanel,
+};

src/components/DemographicsDashboard/shared/geoMapLayers/=griddedGlyphs/shared/grid/=square/types.ts

@@ -0,0 +1,5 @@
+import { BaseGridConfig } from "../types";
+
+export interface SquareGridConfig extends BaseGridConfig {
+  gridType: "square";
+}

src/components/DemographicsDashboard/shared/geoMapLayers/=griddedGlyphs/shared/grid/GridPanel.tsx

@@ -0,0 +1,96 @@
+import {
+  Checkbox,
+  FormControl,
+  FormControlLabel,
+  FormGroup,
+  InputLabel,
+  MenuItem,
+  Select,
+  SelectProps,
+  Slider,
+  SliderProps,
+  Typography,
+} from "@mui/material";
+import * as React from "react";
+import { gridPixelSizeSetup } from "../helpersForConfig";
+import {
+  GridConfig,
+  GridType,
+  gridBlueprintLookup,
+  getGridBlueprint,
+} from "./blueprints";
+
+export interface GridPanelProps {
+  gridConfig: GridConfig;
+  disabled?: boolean;
+  onGridConfigChange: (value: GridConfig) => void;
+}
+
+const GridPanel: React.VoidFunctionComponent<GridPanelProps> = ({
+  disabled,
+  gridConfig,
+  onGridConfigChange,
+}) => {
+  const handleGridTypeChange: SelectProps["onChange"] = (event) => {
+    const gridType = event.target.value as GridType;
+    onGridConfigChange?.({
+      ...getGridBlueprint(gridType).generateDefaultConfig(),
+      pixelSize: gridConfig.pixelSize,
+    });
+  };
+
+  const gridBlueprint = getGridBlueprint(gridConfig.gridType);
+
+  const handlePixelSizeChange: SliderProps["onChange"] = (event, value) => {
+    onGridConfigChange?.({
+      ...gridConfig,
+      pixelSize: Array.isArray(value) ? value[0] : value,
+    });
+  };
+
+  return (
+    <>
+      <FormControl fullWidth sx={{ marginBottom: 1 }}>
+        <InputLabel id="grid-type-label">type</InputLabel>
+        <Select
+          disabled={disabled}
+          labelId="grid-type-label"
+          id="grid-type"
+          value={gridConfig.gridType}
+          label="type"
+          onChange={handleGridTypeChange}
+          size="small"
+        >
+          {Object.entries(gridBlueprintLookup).map(([gridType, { name }]) => (
+            <MenuItem key={gridType} value={gridType}>
+              {name}
+            </MenuItem>
+          ))}
+        </Select>
+      </FormControl>
+      <FormGroup sx={{ marginTop: 2 }}>
+        <FormControl>
+          <Typography gutterBottom>
+            grid size in pixels: {gridConfig.pixelSize}
+          </Typography>
+          <Slider
+            disabled={disabled}
+            value={gridConfig.pixelSize}
+            step={5}
+            min={gridPixelSizeSetup.min}
+            max={gridPixelSizeSetup.max}
+            onChange={handlePixelSizeChange}
+          />
+        </FormControl>
+      </FormGroup>
+
+      <gridBlueprint.Panel
+        disabled={disabled}
+        gridConfig={gridConfig}
+        onGridConfigChange={onGridConfigChange}
+      />
+    </>
+  );
+};
+
+export default GridPanel;