StatsHouse UI: fix visible preview icon by hover (#2090)

* StatsHouse UI: fix visible preview icon by hover

* StatsHouse UI: refactor

Author: vauweb

statshouse-ui/src/admin/pages/FormPage.tsx

@@ -7,7 +7,6 @@
 import { Dispatch, useCallback, useContext, useEffect, useMemo, useState } from 'react';
 import { useNavigate, useParams } from 'react-router-dom';
 import { IKind, IMetric, ITagAlias } from '../models/metric';
-import { MetricFormValuesContext, MetricFormValuesStorage } from '../storages/MetricFormValues';
 import { ReactComponent as SVGTrash } from 'bootstrap-icons/icons/trash.svg';
 import { IActions } from '../storages/MetricFormValues/reducer';
 import {
@@ -32,12 +31,12 @@ import { produce } from 'immer';
 import { TagDraft } from './TagDraft';
 import { formatInputDate } from '@/view/utils2';
 import { Select } from '@/components/Select';
-
 import { mapEditToMetric, mapMetricToEdit, resetMetricFlood } from '../api/saveMetric';
 import { ConfirmButton } from '@/components/UI/ConfirmButton';
 import { useStateBoolean } from '@/hooks';
 import { useApiMetric, useMutationMetricMeta } from '@/api/metric';
 import { useHistoricalMetricVersion } from '@/hooks/useHistoricalMetricVersion';
+import { MetricFormValuesContext, MetricFormValuesStorage } from '@/admin/storages/MetricFormValues';
 
 const METRIC_TYPE_KEYS: MetricType[] = Object.values(METRIC_TYPE);
 const METRIC_META_TAG_RAW_KIND_KEYS: MetricMetaTagRawKind[] = Object.values(METRIC_META_TAG_RAW_KIND);

statshouse-ui/src/admin/storages/MetricFormValues/MetricFormValuesContext.tsx

@@ -0,0 +1,24 @@
+// Copyright 2025 V Kontakte LLC
+//
+// This Source Code Form is subject to the terms of the Mozilla Public
+// License, v. 2.0. If a copy of the MPL was not distributed with this
+// file, You can obtain one at https://mozilla.org/MPL/2.0/.
+
+import { IMetric } from '@/admin/models/metric';
+import { createContext, Dispatch, ReactNode } from 'react';
+import { IActions, initialValues } from '@/admin/storages/MetricFormValues/reducer';
+
+export interface IMetricFormValuesProps {
+  initialMetric?: Partial<IMetric>;
+  children?: ReactNode;
+}
+
+export interface IMetricFormValuesContext {
+  values: IMetric;
+  dispatch: Dispatch<IActions>;
+}
+
+export const MetricFormValuesContext = createContext<IMetricFormValuesContext>({
+  values: initialValues,
+  dispatch: () => {},
+});

statshouse-ui/src/admin/storages/MetricFormValues/MetricFormValuesStorage.tsx

@@ -0,0 +1,23 @@
+// Copyright 2025 V Kontakte LLC
+//
+// This Source Code Form is subject to the terms of the Mozilla Public
+// License, v. 2.0. If a copy of the MPL was not distributed with this
+// file, You can obtain one at https://mozilla.org/MPL/2.0/.
+
+import { initialValues, reducer } from './reducer';
+import { FC, useEffect, useMemo, useReducer } from 'react';
+import { IMetricFormValuesProps, MetricFormValuesContext } from './MetricFormValuesContext';
+
+export const MetricFormValuesStorage: FC<IMetricFormValuesProps> = (props) => {
+  const { initialMetric, children } = props;
+
+  const initValues = useMemo(() => ({ ...initialValues, ...initialMetric }), [initialMetric]);
+
+  const [values, dispatch] = useReducer(reducer, initValues);
+
+  useEffect(() => {
+    dispatch({ type: 'reset', newState: initValues });
+  }, [initValues, initialMetric]);
+
+  return <MetricFormValuesContext value={{ values, dispatch }}>{children}</MetricFormValuesContext>;
+};

statshouse-ui/src/admin/storages/MetricFormValues/index.ts

@@ -0,0 +1,8 @@
+// Copyright 2025 V Kontakte LLC
+//
+// This Source Code Form is subject to the terms of the Mozilla Public
+// License, v. 2.0. If a copy of the MPL was not distributed with this
+// file, You can obtain one at https://mozilla.org/MPL/2.0/.
+
+export * from './MetricFormValuesContext';
+export * from './MetricFormValuesStorage';

statshouse-ui/src/admin/storages/MetricFormValues/index.tsx

@@ -56,7 +56,7 @@ export const LeftMenuPlotItem = memo(function LeftMenuPlotItem({ active }: LeftM
     [openRef, setOpen]
   );
   const visible = useIntersectionObserver(visibleRef, 0, undefined, 0);
-  const visibleBool = visible > 0;
+  const visibleBool = visible > 0 || open;
   const plotPreviewUrl = usePlotPreviewStore(useCallback((s) => s.plotPreviewUrlList[plotKey], [plotKey]));
 
   const plotType = useStatsHouse(useCallback(({ params: { plots } }) => plots[plotKey]?.type, [plotKey]));