Shift freezeAnimation to URL as source of truth

This commit is contained in:
Przemek Więch
2026-06-11 15:41:11 +02:00
parent e0db71c514
commit 4dd84a7375
2 changed files with 4 additions and 4 deletions

View File

@@ -94,7 +94,7 @@ We will gradually eliminate React state variables in `src/app.tsx` and derive th
* [x] **Step 3.1a:** Shift `chartType` to URL as SSOT. Derive it using `useMemo` from search parameters, replace calls to `setChartType` with URL updates, and remove the React state variable and sync effect. * [x] **Step 3.1a:** Shift `chartType` to URL as SSOT. Derive it using `useMemo` from search parameters, replace calls to `setChartType` with URL updates, and remove the React state variable and sync effect.
* [x] **Step 3.1b:** Shift `standalone` to URL as SSOT. Derive it directly from search parameters on render and remove its React state variable. * [x] **Step 3.1b:** Shift `standalone` to URL as SSOT. Derive it directly from search parameters on render and remove its React state variable.
* [x] **Step 3.1c:** Shift `showWikiTreeMenus` to URL as SSOT. Derive it directly from search parameters on render and remove its React state variable. * [x] **Step 3.1c:** Shift `showWikiTreeMenus` to URL as SSOT. Derive it directly from search parameters on render and remove its React state variable.
* [ ] **Step 3.1d:** Shift `freezeAnimation` to URL as SSOT. Derive it directly from search parameters on render and remove its React state variable. * [x] **Step 3.1d:** Shift `freezeAnimation` to URL as SSOT. Derive it directly from search parameters on render and remove its React state variable.
* [ ] **Step 3.2:** Extract `selection` and `detailIndi` state. Parse them directly from URL params (`indi`, `gen`, and `detail`); update display selectors. Remove React states. Ensure that chart selection changes (`onSelection` callback) explicitly clear or update the `detail` query parameter to match the new selection to avoid getting stuck on the old details viewport. Also update the detail-only selection handler (`onDetailSelection`) to update the `detail` query parameter in the URL. * [ ] **Step 3.2:** Extract `selection` and `detailIndi` state. Parse them directly from URL params (`indi`, `gen`, and `detail`); update display selectors. Remove React states. Ensure that chart selection changes (`onSelection` callback) explicitly clear or update the `detail` query parameter to match the new selection to avoid getting stuck on the old details viewport. Also update the detail-only selection handler (`onDetailSelection`) to update the `detail` query parameter in the URL.
* [ ] **Step 3.3:** Extract `showSidePanel` state. Derive state directly from `?sidePanel=` parameter. Remove React state. Enhance URL args helpers to allow generating path/query target objects with replaced values, and ensure layout settings (`sidePanel`) and configuration changes use `replace: true` to prevent polluting the browser history stack. * [ ] **Step 3.3:** Extract `showSidePanel` state. Derive state directly from `?sidePanel=` parameter. Remove React state. Enhance URL args helpers to allow generating path/query target objects with replaced values, and ensure layout settings (`sidePanel`) and configuration changes use `replace: true` to prevent polluting the browser history stack.
* [ ] **Step 3.4:** Extract `config` state. Parse display settings on render using `argsToConfig` helper. Remove state. In `ViewPage`, run `updateChartWithConfig(config, data)` synchronously during the render pass (e.g. in the `useMemo` that derives query parameters/config) to update the in-memory chart data before it is rendered by the `<Chart>` child component. Run E2E and visual tests to verify no rendering regressions occurred. * [ ] **Step 3.4:** Extract `config` state. Parse display settings on render using `argsToConfig` helper. Remove state. In `ViewPage`, run `updateChartWithConfig(config, data)` synchronously during the render pass (e.g. in the `useMemo` that derives query parameters/config) to update the in-memory chart data before it is rendered by the `<Chart>` child component. Run E2E and visual tests to verify no rendering regressions occurred.

View File

@@ -96,8 +96,7 @@ export function App() {
const [showErrorPopup, setShowErrorPopup] = useState(false); const [showErrorPopup, setShowErrorPopup] = useState(false);
/** Specification of the source of the data. */ /** Specification of the source of the data. */
const [sourceSpec, setSourceSpec] = useState<DataSourceSpec>(); const [sourceSpec, setSourceSpec] = useState<DataSourceSpec>();
/** Freeze animations after initial chart render. */
const [freezeAnimation, setFreezeAnimation] = useState(false);
/** Configuration settings for chart display options (e.g. colors, hiding IDs). */ /** Configuration settings for chart display options (e.g. colors, hiding IDs). */
const [config, setConfig] = useState(DEFALUT_CONFIG); const [config, setConfig] = useState(DEFALUT_CONFIG);
@@ -124,6 +123,8 @@ export function App() {
* from WikiTree. * from WikiTree.
*/ */
const showWikiTreeMenus = args.showWikiTreeMenus; const showWikiTreeMenus = args.showWikiTreeMenus;
/** Freeze animations after initial chart render. */
const freezeAnimation = args.freezeAnimation;
/** Prevents the Google Drive "Open with" state from being processed more than once. */ /** Prevents the Google Drive "Open with" state from being processed more than once. */
const stateProcessed = useRef(false); const stateProcessed = useRef(false);
@@ -354,7 +355,6 @@ export function App() {
setSourceSpec(args.sourceSpec); setSourceSpec(args.sourceSpec);
setSelection(args.selection); setSelection(args.selection);
setDetailIndi(args.selection?.id); setDetailIndi(args.selection?.id);
setFreezeAnimation(args.freezeAnimation);
setConfig(args.config); setConfig(args.config);
const currentFetchId = ++fetchIdRef.current; const currentFetchId = ++fetchIdRef.current;
setLoadingStatus('Loading…'); setLoadingStatus('Loading…');