From 9ac5242fc02ef2ebfbf31934ce81e35b477f07c7 Mon Sep 17 00:00:00 2001
From: Peyton Lee <peyton.lee@alleninstitute.org>
Date: Tue, 1 Oct 2024 10:24:06 -0700
Subject: [PATCH] fix: Moved check for initializing scatterplot axes to
 ScatterPlotTab to handle loading from URL parameters

---
 src/Viewer.tsx                         | 17 +----------------
 src/components/Tabs/ScatterPlotTab.tsx | 11 ++++++++++-
 2 files changed, 11 insertions(+), 17 deletions(-)

diff --git a/src/Viewer.tsx b/src/Viewer.tsx
index 647c87da9..8b1cdc58e 100644
--- a/src/Viewer.tsx
+++ b/src/Viewer.tsx
@@ -362,21 +362,6 @@ function Viewer(): ReactElement {
     [featureThresholds, config.keepRangeBetweenDatasets]
   );
 
-  /** Handle startup behaviors for tabs when changed. */
-  const onTabChanged = useCallback(
-    (key: string) => {
-      if (key === TabType.SCATTER_PLOT) {
-        // When opening scatterplot tab, plot the current feature against
-        // time if no x/y axis is set.
-        if (!scatterPlotConfig.xAxis && !scatterPlotConfig.yAxis) {
-          updateScatterPlotConfig({ xAxis: SCATTERPLOT_TIME_FEATURE.key, yAxis: featureKey });
-        }
-      }
-      updateConfig({ openTab: key as TabType });
-    },
-    [updateConfig, featureKey]
-  );
-
   // DATASET LOADING ///////////////////////////////////////////////////////
 
   const handleProgressUpdate = useCallback((complete: number, total: number): void => {
@@ -1070,7 +1055,7 @@ function Viewer(): ReactElement {
                 style={{ marginBottom: 0, width: "100%" }}
                 size="large"
                 activeKey={config.openTab}
-                onChange={onTabChanged}
+                onChange={(key) => updateConfig({ openTab: key as TabType })}
                 items={[
                   {
                     label: "Track plot",
diff --git a/src/components/Tabs/ScatterPlotTab.tsx b/src/components/Tabs/ScatterPlotTab.tsx
index 7fb8060d9..81d6f4bc5 100644
--- a/src/components/Tabs/ScatterPlotTab.tsx
+++ b/src/components/Tabs/ScatterPlotTab.tsx
@@ -1,7 +1,7 @@
 import { Button, Tooltip } from "antd";
 import { MenuItemType } from "antd/es/menu/hooks/useItems";
 import Plotly, { PlotData, PlotMarker } from "plotly.js-dist-min";
-import React, { memo, ReactElement, useContext, useEffect, useRef, useState, useTransition } from "react";
+import React, { memo, ReactElement, useContext, useEffect, useMemo, useRef, useState, useTransition } from "react";
 import styled from "styled-components";
 import { Color, ColorRepresentation, HexColorString } from "three";
 
@@ -128,6 +128,15 @@ export default memo(function ScatterPlotTab(props: ScatterPlotTabProps): ReactEl
   const colorRampMin = useDebounce(props.colorRampMin, 100);
   const colorRampMax = useDebounce(props.colorRampMax, 100);
 
+  useMemo(() => {
+    if (props.scatterPlotConfig.xAxis === null && props.scatterPlotConfig.yAxis === null && props.selectedFeatureKey) {
+      props.updateScatterPlotConfig({
+        yAxis: props.selectedFeatureKey,
+        xAxis: SCATTERPLOT_TIME_FEATURE.key,
+      });
+    }
+  }, [props.selectedFeatureKey]);
+
   // Trigger render spinner when playback starts, but only if the render is being delayed.
   // If a render is allowed to happen (such as in the current-track- or current-frame-only
   // range types), `isRendering` will be set to false immediately and the spinner will be hidden again.