fix: Tackled bartosz's recommendations

app/charts/chart-config-ui-options.ts

@@ -1,5 +1,6 @@
 import { t } from "@lingui/macro";
 import { group } from "d3-array";
+import { schemeCategory10 } from "d3-scale-chromatic";
 import get from "lodash/get";
 import setWith from "lodash/setWith";
 import unset from "lodash/unset";
@@ -568,8 +569,8 @@ const chartConfigOptionsUISpec: ChartSpecs = {
         options: {
           colorPalette: {
             type: "single",
-            paletteId: "dimension",
-            color: theme.palette.primary.main,
+            paletteId: "schemaCategory10",
+            color: schemeCategory10[0],
           },
         },
       },

app/config-types.ts

@@ -483,8 +483,9 @@ const SequentialPaletteType = t.union([
 ]);
 export type SequentialPaletteType = t.TypeOf<typeof SequentialPaletteType>;
 
+const DimensionPaletteType = t.literal("dimension");
 const CategoricalPaletteType = t.union([
-  t.literal("dimension"),
+  DimensionPaletteType,
   t.literal("accent"),
   t.literal("category10"),
   t.literal("dark2"),
@@ -505,7 +506,6 @@ const DivergingPalette = t.type({
   name: DivergingPaletteType,
 });
 
-// Define the Sequential Palette Structure
 const SequentialPalette = t.type({
   type: t.literal("sequential"),
   paletteId: SequentialPaletteType,
@@ -885,7 +885,7 @@ export const fieldHasComponentId = (chartConfig: ChartConfig) => {
       }
       return acc;
     },
-    {} as { [key: string]: { componentId: string; useAbbreviations?: boolean } }
+    {} as { [key: string]: GenericField }
   );
 
   return validFields as {

app/configurator/components/chart-controls/color-picker.tsx

@@ -129,7 +129,7 @@ export const ColorPickerMenu = (props: Props) => {
   const buttonRef = useRef(null);
   const popoverRef = useRef<HTMLDivElement>(null);
 
-  const initalSelected = useMemo(
+  const initialSelected = useMemo(
     () => hexToHsva(selectedColor),
     [selectedColor]
   );
@@ -174,7 +174,7 @@ export const ColorPickerMenu = (props: Props) => {
       >
         <Box ref={popoverRef}>
           <CustomColorPicker
-            defaultSelection={initalSelected}
+            defaultSelection={initialSelected}
             onChange={handleColorChange}
             colorSwatches={props.colors}
           />

app/configurator/components/color-picker.tsx

@@ -1,4 +1,3 @@
-"use client";
 import { Box } from "@mui/material";
 import { makeStyles } from "@mui/styles";
 import {
@@ -9,15 +8,11 @@ import {
   Saturation,
 } from "@uiw/react-color";
 import dynamic from "next/dynamic";
-import {
-  ChangeEvent,
-  useCallback,
-  useEffect,
-  useState
-} from "react";
+import { ChangeEvent, useCallback, useEffect, useState } from "react";
 
 import Flex from "@/components/flex";
 import { Input } from "@/components/form";
+
 import { Swatch } from "./chart-controls/color-picker";
 
 const ChromePicker = dynamic(
@@ -141,16 +136,3 @@ const CustomColorPicker = ({
 };
 
 export default CustomColorPicker;
-
-const useStyles = makeStyles(() => ({
-  swatch: {
-    width: "1rem",
-    height: "1rem",
-    borderWidth: 1,
-    borderStyle: "solid",
-    borderColor: "transparent",
-    borderRadius: 1.5,
-    padding: 0,
-    cursor: "pointer",
-  },
-}));

app/configurator/components/filters.tsx

@@ -334,7 +334,7 @@ const MultiFilterContent = ({
   useEnsureUpToDateColorMapping({
     colorComponentValues: colorComponent?.values,
     colorMapping:
-      colorConfig?.type !== "single" ? colorConfig?.colorMapping : {},
+      colorConfig?.type !== "single" ? colorConfig?.colorMapping : undefined,
   });
 
   const interactiveFilterProps = useInteractiveFiltersToggle("legend");

app/login/components/profile-content-tabs.tsx

@@ -68,7 +68,7 @@ export const ProfileContentTabs = (props: ProfileContentTabsProps) => {
 
   return (
     <TabContext value={value}>
-      <Box className={clsx(rootClasses.section)}>
+      <Box className={clsx(rootClasses.section, classes.section)}>
         <Box className={rootClasses.sectionContent}>
           <Box className={classes.section}>
             <TabList className={classes.tabList} onChange={handleChange}>

app/utils/chart-config/versioning.ts

@@ -2,11 +2,7 @@ import { schemeCategory10 } from "d3-scale-chromatic";
 import stringSimilarity from "string-similarity-js";
 
 import { DEFAULT_OTHER_COLOR_FIELD_OPACITY } from "@/charts/map/constants";
-import {
-  ChartConfig,
-  ConfiguratorState,
-  isNotTableOrMap,
-} from "@/config-types";
+import { ChartConfig, ConfiguratorState } from "@/config-types";
 import { mapValueIrisToColor } from "@/configurator/components/ui-helpers";
 import { FIELD_VALUE_NONE } from "@/configurator/constants";
 import {
@@ -1317,7 +1313,7 @@ export const chartConfigMigrations: Migration[] = [
         version: "4.1.0",
       };
 
-      if (!isNotTableOrMap(newConfig)) {
+      if (newConfig.chartType === "table" || newConfig.chartType === "map") {
         return newConfig;
       }
 
@@ -1380,7 +1376,7 @@ export const chartConfigMigrations: Migration[] = [
         version: "4.0.0",
       };
 
-      if (!isNotTableOrMap(oldConfig)) {
+      if (oldConfig.chartType === "table" || oldConfig.chartType === "map") {
         return oldConfig;
       }
 
@@ -2026,7 +2022,7 @@ export const configuratorStateMigrations: Migration[] = [
       for (const chartConfig of newConfig.chartConfigs) {
         const migratedChartConfig = await migrateChartConfig(chartConfig, {
           migrationProps: newConfig,
-          toVersion: "3.8.0",
+          toVersion: "4.0.0",
         });
         chartConfigs.push(migratedChartConfig);
       }