refactor: Clean up

visualize-admin · Nov 25, 2024 · b51e4f7 · b51e4f7
1 parent a343e18
commit b51e4f7
Show file tree

Hide file tree

Showing 4 changed files with 27 additions and 34 deletions.
diff --git a/app/components/chart-panel-layout-grid.tsx b/app/components/chart-panel-layout-grid.tsx
@@ -32,8 +32,8 @@ const decodeLayouts = (layouts: Layouts) => {
   );
 };
 
-const ChartPanelLayoutCanvas = (props: ChartPanelLayoutTypeProps) => {
-  const { chartConfigs } = props;
+export const ChartPanelLayoutCanvas = (props: ChartPanelLayoutTypeProps) => {
+  const { chartConfigs, renderChart, className } = props;
   const [state, dispatch] = useConfiguratorState(hasChartConfigs);
   const [layouts, setLayouts] = useState<Layouts>(() => {
     assert(
@@ -69,16 +69,14 @@ const ChartPanelLayoutCanvas = (props: ChartPanelLayoutTypeProps) => {
   return (
     <ChartGridLayout
       key={state.state}
-      className={clsx(chartPanelLayoutGridClasses.root, props.className)}
+      className={clsx(chartPanelLayoutGridClasses.root, className)}
       layouts={layouts}
       resize={state.state === "LAYOUTING"}
       draggableHandle={`.${chartPanelLayoutGridClasses.dragHandle}`}
-      onLayoutChange={(_l, allLayouts) => handleChangeLayouts(allLayouts)}
+      onLayoutChange={(_, allLayouts) => handleChangeLayouts(allLayouts)}
       breakpoints={FREE_CANVAS_BREAKPOINTS}
     >
-      {chartConfigs.map((chartConfig) => props.renderChart(chartConfig))}
+      {chartConfigs.map(renderChart)}
     </ChartGridLayout>
   );
 };
-
-export default ChartPanelLayoutCanvas;
diff --git a/app/components/chart-panel.tsx b/app/components/chart-panel.tsx
@@ -3,7 +3,8 @@ import { makeStyles } from "@mui/styles";
 import clsx from "clsx";
 import React, { HTMLProps, forwardRef } from "react";
 
-import ChartPanelLayoutCanvas, {
+import {
+  ChartPanelLayoutCanvas,
   chartPanelLayoutGridClasses,
 } from "@/components/chart-panel-layout-grid";
 import { ChartPanelLayoutTall } from "@/components/chart-panel-layout-tall";

diff --git a/app/components/react-grid.tsx b/app/components/react-grid.tsx
@@ -14,7 +14,6 @@ import { getChartWrapperId } from "@/components/chart-panel";
 import {
   hasChartConfigs,
   isLayouting,
-  LayoutDashboardFreeCanvas,
   ReactGridLayoutType,
 } from "@/configurator";
 import { useTimeout } from "@/hooks/use-timeout";
@@ -227,11 +226,11 @@ export const ChartGridLayout = ({
 } & ComponentProps<typeof ResponsiveReactGridLayout>) => {
   const classes = useStyles();
   const [state, dispatch] = useConfiguratorState(hasChartConfigs);
+  const configLayout = state.layout;
   assert(
-    state.layout.type === "dashboard" && state.layout.layout === "canvas",
+    configLayout.type === "dashboard" && configLayout.layout === "canvas",
     "ChartGridLayout can only be used in a canvas layout!"
   );
-  const configLayout = state.layout as LayoutDashboardFreeCanvas;
   const allowHeightInitialization = isLayouting(state);
   const [mounted, setMounted] = useState(false);
   const mountedForSomeTime = useTimeout(500, mounted);

diff --git a/app/configurator/components/layout-configurator.tsx b/app/configurator/components/layout-configurator.tsx
@@ -243,8 +243,8 @@ const LayoutSharedFiltersConfigurator = () => {
               {/* TODO: allow TemporalOrdinalDimensions to work here */}
               {timeRange && combinedTemporalDimension.values.length ? (
                 <>
-                  <Box
-                    sx={{
+                  <div
+                    style={{
                       display: "flex",
                       justifyContent: "space-between",
                       alignItems: "center",
@@ -258,7 +258,7 @@ const LayoutSharedFiltersConfigurator = () => {
                       checked={timeRange.active}
                       onChange={handleTimeRangeFilterToggle}
                     />
-                  </Box>
+                  </div>
                   {timeRange.active ? (
                     <DashboardFiltersOptions
                       timeRangeFilter={timeRange}
@@ -270,51 +270,46 @@ const LayoutSharedFiltersConfigurator = () => {
               {dataFilters ? (
                 <>
                   {potentialDataFilterIds.map((id, i) => {
-                    const dimension = dimensions.find(
-                      (dimension) => dimension.id === id
-                    );
-                    if (!dimension) {
+                    const dim = dimensions.find((d) => d.id === id);
+
+                    if (!dim) {
                       return null;
                     }
-                    const checked = dataFilters.componentIds.includes(
-                      dimension.id
-                    );
+
+                    const checked = dataFilters.componentIds.includes(dim.id);
 
                     return (
-                      <Box
-                        key={dimension.id}
-                        sx={{ display: "flex", flexDirection: "column" }}
+                      <div
+                        key={dim.id}
+                        style={{ display: "flex", flexDirection: "column" }}
                       >
-                        <Box
-                          sx={{
+                        <div
+                          style={{
                             display: "flex",
                             justifyContent: "space-between",
                             alignItems: "center",
                           }}
                         >
-                          <Typography variant="body2">
-                            {dimension.label}
-                          </Typography>
+                          <Typography variant="body2">{dim.label}</Typography>
                           <Switch
                             checked={checked}
                             onChange={(_, checked) => {
-                              handleDataFiltersToggle(checked, dimension.id);
+                              handleDataFiltersToggle(checked, dim.id);
                             }}
                           />
-                        </Box>
+                        </div>
                         {checked ? (
                           <Box sx={{ mb: 1 }}>
                             <DataFilterSelectGeneric
-                              key={dimension.id}
-                              rawDimension={dimension}
+                              rawDimension={dim}
                               filterDimensionIds={[]}
                               index={i}
                               disabled={fetching}
                               disableLabel
                             />
                           </Box>
                         ) : null}
-                      </Box>
+                      </div>
                     );
                   })}
                 </>