StatsHouse UI: fix style

vauweb · vauweb · commit 9061f8de998e · 2025-04-08T16:54:31.000+03:00
remove data context
diff --git a/statshouse-ui/src/components2/Plot/PlotControl/PlotControlEventOverlay.tsx b/statshouse-ui/src/components2/Plot/PlotControl/PlotControlEventOverlay.tsx
@@ -7,7 +7,7 @@
 import { memo, useCallback, useMemo } from 'react';
 import { Select, type SelectOptionProps } from '@/components/Select';
 import cn from 'classnames';
-import { isNotNil, parseURLSearchParams } from '@/common/helpers';
+import { emptyArray, isNotNil, parseURLSearchParams } from '@/common/helpers';
 import { produce } from 'immer';
 import { dequal } from 'dequal/lite';
 import { PLOT_TYPE } from '@/api/enum';
@@ -16,9 +16,10 @@ import { globalSettings } from '@/common/settings';
 import { arrToObj, type PlotKey, type PlotParams, toPlotKey, toTreeObj, urlDecode } from '@/url2';
 import { addPlot, getMetricFullName } from '@/store2/helpers';
 import { useWidgetPlotContext } from '@/contexts/useWidgetPlotContext';
-import { useWidgetPlotDataContext } from '@/contexts/useWidgetPlotDataContext';
 import { StatsHouseStore, useStatsHouse } from '@/store2';
 import { setParams } from '@/store2/methods';
+import { usePlotsDataStore } from '@/store2/plotDataStore';
+import { useShallow } from 'zustand/react/shallow';
 
 const eventPreset: (SelectOptionProps & { plot: PlotParams })[] = globalSettings.event_preset
   .map((url) => {
@@ -47,7 +48,14 @@ export const PlotControlEventOverlay = memo(function PlotControlEventOverlay({
   const {
     plot: { id, events },
   } = useWidgetPlotContext();
-  const { plotData } = useWidgetPlotDataContext();
+  const { metricName, whats } = usePlotsDataStore(
+    useShallow(
+      useCallback(
+        ({ plotsData }) => ({ metricName: plotsData[id]?.metricName ?? '', whats: plotsData[id]?.whats ?? emptyArray }),
+        [id]
+      )
+    )
+  );
 
   const onChange = useCallback(
     (value: string | string[] = []) => {
@@ -96,7 +104,7 @@ export const PlotControlEventOverlay = memo(function PlotControlEventOverlay({
       return false;
     });
     const eventPlots: SelectOptionProps[] = plotsArr.map((p) => {
-      const name = getMetricFullName(p, plotData);
+      const name = getMetricFullName(p, { metricName, whats });
       return {
         value: p.id,
         name,
@@ -107,7 +115,7 @@ export const PlotControlEventOverlay = memo(function PlotControlEventOverlay({
     }
     eventPlots.unshift(...eventPresetFilter);
     return eventPlots;
-  }, [plotData, plots]);
+  }, [metricName, plots, whats]);
 
   if (!list.length) {
     return null;
diff --git a/statshouse-ui/src/components2/Plot/PlotControl/PlotControlPromQLSwitch.tsx b/statshouse-ui/src/components2/Plot/PlotControl/PlotControlPromQLSwitch.tsx
@@ -16,7 +16,9 @@ import { getHomePlot, promQLMetric } from '@/url2';
 import { useWidgetPlotContext } from '@/contexts/useWidgetPlotContext';
 import { useMetricMeta } from '@/hooks/useMetricMeta';
 import { useMetricName } from '@/hooks/useMetricName';
-import { useWidgetPlotDataContext } from '@/contexts/useWidgetPlotDataContext';
+import { usePlotsDataStore } from '@/store2/plotDataStore';
+import { emptyArray } from '@/common/helpers';
+import { useShallow } from 'zustand/react/shallow';
 
 export type PlotControlPromQLSwitchProps = {
   className?: string;
@@ -26,9 +28,18 @@ export const PlotControlPromQLSwitch = memo(function PlotControlPromQLSwitch({
   className,
 }: PlotControlPromQLSwitchProps) {
   const { plot, setPlot } = useWidgetPlotContext();
-  const {
-    plotData: { metricName, promQL, whats },
-  } = useWidgetPlotDataContext();
+  const { metricName, promQL, whats } = usePlotsDataStore(
+    useShallow(
+      useCallback(
+        ({ plotsData }) => ({
+          metricName: plotsData[plot.id]?.metricName ?? '',
+          promQL: plotsData[plot.id]?.promQL ?? '',
+          whats: plotsData[plot.id]?.whats ?? emptyArray,
+        }),
+        [plot.id]
+      )
+    )
+  );
   const isPlotPromQL = isPromQL(plot);
   const meta = useMetricMeta(useMetricName(true));
 
diff --git a/statshouse-ui/src/components2/Plot/PlotLegend/PlotLegendMaxHost.tsx b/statshouse-ui/src/components2/Plot/PlotLegend/PlotLegendMaxHost.tsx
@@ -11,7 +11,9 @@ import { ReactComponent as SVGCopy } from 'bootstrap-icons/icons/copy.svg';
 import { debug } from '@/common/debug';
 import { Button } from '@/components/UI';
 import type { PlotKey } from '@/url2';
-import { useWidgetPlotDataContext } from '@/contexts/useWidgetPlotDataContext';
+import { usePlotsDataStore } from '@/store2/plotDataStore';
+import { useWidgetPlotContext } from '@/contexts/useWidgetPlotContext';
+import { emptyArray } from '@/common/helpers';
 
 type PlotLegendMaxHostProps = {
   value: string;
@@ -30,8 +32,12 @@ function copyItem(value?: string | string[]) {
 
 export const PlotLegendMaxHost = memo(function PlotLegendMaxHost({ value, placeholder, idx }: PlotLegendMaxHostProps) {
   const {
-    plotData: { maxHostLists },
-  } = useWidgetPlotDataContext();
+    plot: { id },
+  } = useWidgetPlotContext();
+
+  const maxHostLists = usePlotsDataStore(
+    useCallback(({ plotsData }) => plotsData[id]?.maxHostLists ?? emptyArray, [id])
+  );
   const onCopyList = useCallback(() => {
     const list: string = maxHostLists[idx - 1]?.map(({ name }) => name).join('\r\n') ?? '';
     window.navigator.clipboard.writeText(list).then(() => {
diff --git a/statshouse-ui/src/components2/Plot/PlotView/PlotEvents.tsx b/statshouse-ui/src/components2/Plot/PlotView/PlotEvents.tsx
@@ -24,8 +24,8 @@ import { formatByMetricType } from '@/common/formatByMetricType';
 import { emptyArray, isNotNil } from '@/common/helpers';
 import { freeKeyPrefix } from '@/url2';
 import { SeriesMetaTag } from '@/api/query';
-import { useWidgetPlotDataContext } from '@/contexts/useWidgetPlotDataContext';
 import { StatsHouseStore, useStatsHouseShallow } from '@/store2';
+import { usePlotsDataStore } from '@/store2/plotDataStore';
 
 export type PlotEventsProps = {
   className?: string;
@@ -60,9 +60,10 @@ const selectorStore = ({ params: { timeRange, variables } }: StatsHouseStore) =>
 
 export function PlotEvents({ className, onCursor, cursor, setTimeRange }: PlotEventsProps) {
   const { plot } = useWidgetPlotContext();
-  const {
-    plotData: { metricUnit },
-  } = useWidgetPlotDataContext();
+
+  const metricUnit = usePlotsDataStore(
+    useCallback(({ plotsData }) => plotsData[plot.id]?.metricUnit ?? METRIC_TYPE.none, [plot.id])
+  );
 
   const { timeRange, variables } = useStatsHouseShallow(selectorStore);
 
diff --git a/statshouse-ui/src/components2/Plot/PlotView/PlotHealsStatus.tsx b/statshouse-ui/src/components2/Plot/PlotView/PlotHealsStatus.tsx
@@ -14,8 +14,8 @@ import { useLiveModeStore } from '@/store2/liveModeStore';
 import { usePlotLoader } from '@/store2/plotQueryStore';
 import { useWidgetPlotContext } from '@/contexts/useWidgetPlotContext';
 import { refetchQuery } from '@/api/query';
-import { useWidgetPlotDataContext } from '@/contexts/useWidgetPlotDataContext';
 import { removePlotHeals } from '@/store2/methods';
+import { setPlotData, usePlotsDataStore } from '@/store2/plotDataStore';
 
 export type PlotHealsStatusProps = {
   className?: string;
@@ -29,10 +29,8 @@ const selectorStore = ({ params: { timeRange, timeShifts, variables } }: StatsHo
 
 export const PlotHealsStatus = memo(function PlotHealsStatus({ className }: PlotHealsStatusProps) {
   const { plot } = useWidgetPlotContext();
-  const {
-    plotData: { error },
-    setPlotData,
-  } = useWidgetPlotDataContext();
+  const setPlotDataProduce = useMemo(() => setPlotData.bind(undefined, plot.id), [plot.id]);
+  const error = usePlotsDataStore(useCallback(({ plotsData }) => plotsData[plot.id]?.error ?? '', [plot.id]));
   const { timeRange, timeShifts, variables } = useStatsHouseShallow(selectorStore);
   const id = plot.id;
   const interval = useLiveModeStore(({ interval }) => interval);
@@ -52,11 +50,11 @@ export const PlotHealsStatus = memo(function PlotHealsStatus({ className }: Plot
     return undefined;
   }, [interval, plotHealsTimeout]);
   const clearLastError = useCallback(() => {
-    setPlotData((d) => {
+    setPlotDataProduce((d) => {
       d.error = '';
     });
     removePlotHeals(id);
-  }, [id, setPlotData]);
+  }, [id, setPlotDataProduce]);
   const reload = useCallback(() => {
     refetchQuery(plot, timeRange, timeShifts, variables);
     clearLastError();
diff --git a/statshouse-ui/src/components2/PlotWidgets/EventWidget/EventWidget.tsx b/statshouse-ui/src/components2/PlotWidgets/EventWidget/EventWidget.tsx
@@ -359,7 +359,7 @@ export function EventWidget({ className, isDashboard, isEmbed, fixRatio }: PlotW
               <PlotHealsStatus />
             </div>
             {/*header*/}
-            <div className="d-flex flex-column flex-grow-1 overflow-force-wrap">
+            <div className="d-flex flex-column flex-grow-1 w-0 overflow-force-wrap">
               <PlotHeader isDashboard={isDashboard} isEmbed={isEmbed} />
               {!compact && <PlotSubMenu />}
             </div>
diff --git a/statshouse-ui/src/contexts/WidgetPlotContextProvider.tsx b/statshouse-ui/src/contexts/WidgetPlotContextProvider.tsx
@@ -7,7 +7,6 @@
 import { defaultMetric, PlotKey } from '@/url2';
 import { type ReactNode, useCallback, useMemo } from 'react';
 import { WidgetPlotContext, WidgetPlotContextProps } from '@/contexts/WidgetPlotContext';
-import { WidgetPlotDataContextProvider } from '@/contexts/WidgetPlotDataContextProvider';
 import { useStatsHouse } from '@/store2';
 import { removePlot, setPlot } from '@/store2/methods';
 
@@ -29,9 +28,5 @@ export function WidgetPlotContextProvider({ children, plotKey }: WidgetPlotConte
     }),
     [plot, removePlotMemo, setPlotMemo]
   );
-  return (
-    <WidgetPlotContext.Provider value={widgetContextValue}>
-      <WidgetPlotDataContextProvider>{children}</WidgetPlotDataContextProvider>
-    </WidgetPlotContext.Provider>
-  );
+  return <WidgetPlotContext.Provider value={widgetContextValue}>{children}</WidgetPlotContext.Provider>;
 }
diff --git a/statshouse-ui/src/contexts/WidgetPlotDataContext.tsx b/statshouse-ui/src/contexts/WidgetPlotDataContext.tsx
diff --git a/statshouse-ui/src/contexts/WidgetPlotDataContextProvider.tsx b/statshouse-ui/src/contexts/WidgetPlotDataContextProvider.tsx
diff --git a/statshouse-ui/src/contexts/useWidgetPlotDataContext.tsx b/statshouse-ui/src/contexts/useWidgetPlotDataContext.tsx
diff --git a/statshouse-ui/src/store2/helpers/lib.ts b/statshouse-ui/src/store2/helpers/lib.ts
@@ -7,16 +7,16 @@
 import { type PlotParams, promQLMetric } from '@/url2';
 import type { PlotData } from '../plotDataStore';
 import { MetricMeta } from '../metricsMetaStore';
-import { whatToWhatDesc } from '../../view/whatToWhatDesc';
+import { whatToWhatDesc } from '@/view/whatToWhatDesc';
 
-export function getMetricName(plot?: PlotParams, plotData?: PlotData) {
+export function getMetricName(plot?: PlotParams, plotData?: Pick<PlotData, 'metricName'>) {
   if (!plot) {
     return '';
   }
   return (plot.metricName !== promQLMetric ? plot.metricName : plotData?.metricName) || `plot#${plot.id}`;
 }
 
-export function getMetricWhat(plot?: PlotParams, plotData?: PlotData) {
+export function getMetricWhat(plot?: PlotParams, plotData?: Pick<PlotData, 'whats'>) {
   if (!plot) {
     return '';
   }
@@ -27,7 +27,7 @@ export function getMetricWhat(plot?: PlotParams, plotData?: PlotData) {
   );
 }
 
-export function getMetricFullName(plot?: PlotParams, plotData?: PlotData) {
+export function getMetricFullName(plot?: PlotParams, plotData?: Pick<PlotData, 'metricName' | 'whats'>) {
   if (!plot) {
     return '';
   }
