fix: iteration state error when change dimensional in high-dimensional page (#936)

frontend/packages/core/src/components/HighDimensionalPage/TSNEDetail.tsx

@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 
-import React, {FunctionComponent, useCallback, useState} from 'react';
+import React, {FunctionComponent, useCallback, useEffect, useState} from 'react';
 
 import Button from '~/components/Button';
 import Field from '~/components/Field';
@@ -33,6 +33,7 @@ export type TSNEDetailProps = {
     iteration: number;
     perplexity: number;
     learningRate: number;
+    is3D: boolean;
     onChangePerplexity?: (perplexity: number) => void;
     onChangeLearningRate?: (learningRate: number) => void;
     onPause?: () => void;
@@ -45,6 +46,7 @@ const TSNEDetail: FunctionComponent<TSNEDetailProps> = ({
     iteration,
     perplexity,
     learningRate,
+    is3D,
     onChangePerplexity,
     onChangeLearningRate,
     onPause,
@@ -98,6 +100,11 @@ const TSNEDetail: FunctionComponent<TSNEDetailProps> = ({
         });
     }, [onRerun, onStop]);
 
+    useEffect(() => {
+        setPaused(false);
+        setStopped(false);
+    }, [is3D]);
+
     return (
         <>
             <Field label={t('high-dimensional:perplexity')}>

frontend/packages/core/src/pages/high-dimensional.tsx

@@ -364,6 +364,7 @@ const HighDimensional: FunctionComponent = () => {
                         iteration={(data as TSNEResult)?.step ?? 0}
                         perplexity={perplexity}
                         learningRate={learningRate}
+                        is3D={is3D}
                         onChangePerplexity={setPerplexity}
                         onChangeLearningRate={setLearningRate}
                         onPause={chart.current?.pauseTSNE}
@@ -377,7 +378,7 @@ const HighDimensional: FunctionComponent = () => {
             default:
                 return null as never;
         }
-    }, [reduction, dimension, data, perplexity, learningRate, neighbors, runUMAP]);
+    }, [reduction, dimension, data, perplexity, learningRate, is3D, neighbors, runUMAP]);
 
     const aside = useMemo(
         () => (