fix: Datasets count

Author: bprusinowski

…onfigurator/components/filters-badge.tsx app/configurator/components/badges.tsxapp/configurator/components/filters-badge.tsx renamed to app/configurator/components/badges.tsx app/configurator/components/filters-badge.tsx renamed to app/configurator/components/badges.tsx

@@ -24,3 +24,19 @@ export const FiltersBadge = ({ sx }: { sx?: BadgeProps["sx"] }) => {
     />
   );
 };
+
+export const DatasetsBadge = ({ sx }: { sx?: BadgeProps["sx"] }) => {
+  const ctx = useControlSectionContext();
+  const [state] = useConfiguratorState(isConfiguring);
+  const chartConfig = getChartConfig(state);
+  const datasetsCount = chartConfig.cubes.length;
+
+  return (
+    <Badge
+      invisible={ctx.isOpen}
+      badgeContent={datasetsCount}
+      color="secondary"
+      sx={{ display: "block", ...sx }}
+    />
+  );
+};

app/configurator/components/chart-configurator.tsx

@@ -54,8 +54,8 @@ import {
   ControlTabField,
   DataFilterSelect,
   DataFilterTemporal,
-  dimensionToFieldProps,
   OnOffControlTabField,
+  dimensionToFieldProps,
 } from "@/configurator/components/field";
 import { canRenderDatePickerField } from "@/configurator/components/field-date-picker";
 import {
@@ -66,14 +66,14 @@ import {
 } from "@/configurator/configurator-state";
 import { useInteractiveDataFilterToggle } from "@/configurator/interactive-filters/interactive-filters-config-state";
 import {
-  InteractiveFiltersConfigurator,
   InteractiveFilterToggle,
+  InteractiveFiltersConfigurator,
 } from "@/configurator/interactive-filters/interactive-filters-configurator";
 import {
   Dimension,
+  Measure,
   isStandardErrorDimension,
   isTemporalDimension,
-  Measure,
 } from "@/domain/data";
 import { isMostRecentValue } from "@/domain/most-recent-value";
 import { truthy } from "@/domain/types";
@@ -91,8 +91,8 @@ import { useLocale } from "@/locales/use-locale";
 import { InteractiveFiltersChartProvider } from "@/stores/interactive-filters";
 import useEvent from "@/utils/use-event";
 
+import { FiltersBadge } from "./badges";
 import { DatasetsControlSection } from "./dataset-control-section";
-import { FiltersBadge } from "./filters-badge";
 
 type DataFilterSelectGenericProps = {
   rawDimension: Dimension;

app/configurator/components/dataset-control-section.tsx

@@ -15,6 +15,8 @@ import { useEffect, useMemo, useRef, useState } from "react";
 
 import { useMetadataPanelStoreActions } from "@/components/metadata-panel-store";
 import useDisclosure from "@/components/use-disclosure";
+import { DatasetDialog } from "@/configurator/components/add-dataset-dialog";
+import { DatasetsBadge } from "@/configurator/components/badges";
 import { BetaTag } from "@/configurator/components/beta-tag";
 import {
   ControlSection,
@@ -35,9 +37,6 @@ import { useLocale } from "@/locales/use-locale";
 import { useEventEmitter } from "@/utils/eventEmitter";
 import { MaybeTooltip } from "@/utils/maybe-tooltip";
 
-import { DatasetDialog } from "./add-dataset-dialog";
-import { FiltersBadge } from "./filters-badge";
-
 const useStyles = makeStyles((theme: Theme) => ({
   row: {
     borderLeft: "0.25rem solid transparent",
@@ -215,7 +214,7 @@ export const DatasetsControlSection = () => {
             },
           }}
         />
-        <FiltersBadge sx={{ ml: "auto", mr: 4 }} />
+        <DatasetsBadge sx={{ ml: "auto", mr: 4 }} />
       </SubsectionTitle>
       <ControlSectionContent
         aria-labelledby="controls-data"