From d21ca83a32d716e6ef3c12742e2c5ccc1f58dc1f Mon Sep 17 00:00:00 2001
From: Andrey Sharapov <andrey.sharapov@softwarecountry.com>
Date: Mon, 3 Feb 2025 17:37:15 +0300
Subject: [PATCH] Compute2: TreeWizard initial routing fix

---
 .../src/custom-function-view.ts               |  5 +++++
 .../src/components/RFV/RichFunctionView.tsx   |  1 -
 .../src/components/TreeWizard/TreeWizard.tsx  | 19 +++++++++++++++----
 packages/Compute2/src/package.ts              |  6 ++++--
 4 files changed, 24 insertions(+), 7 deletions(-)

diff --git a/libraries/compute-utils/function-views/src/custom-function-view.ts b/libraries/compute-utils/function-views/src/custom-function-view.ts
index f8b42a0622..3b31219294 100644
--- a/libraries/compute-utils/function-views/src/custom-function-view.ts
+++ b/libraries/compute-utils/function-views/src/custom-function-view.ts
@@ -44,6 +44,7 @@ export abstract class CustomFunctionView extends DG.ViewBase {
 
   requestFeature: (() => Promise<void>) | null = null;
 
+  // TODO: initial URL id handling
   public async init() {
     const func = DG.Func.byName(this.funcNqName);
     this.linkFunccall(func.prepare({}));
@@ -53,6 +54,10 @@ export abstract class CustomFunctionView extends DG.ViewBase {
 
   public linkFunccall(funcCall: DG.FuncCall) {
     this.funcCall = funcCall;
+    if (funcCall.id)
+      this.path = `?id=${funcCall.id}`;
+    else
+      this.path = ``;
   }
 
   public async onFuncCallReady() {
diff --git a/packages/Compute2/src/components/RFV/RichFunctionView.tsx b/packages/Compute2/src/components/RFV/RichFunctionView.tsx
index 9494d2ccd7..ec19fedbab 100644
--- a/packages/Compute2/src/components/RFV/RichFunctionView.tsx
+++ b/packages/Compute2/src/components/RFV/RichFunctionView.tsx
@@ -17,7 +17,6 @@ import {
 import './RichFunctionView.css';
 import * as Utils from '@datagrok-libraries/compute-utils/shared-utils/utils';
 import {History} from '../History/History';
-import {computedAsync, useUrlSearchParams} from '@vueuse/core';
 import {ConsistencyInfo, FuncCallStateInfo} from '@datagrok-libraries/compute-utils/reactive-tree-driver/src/runtime/StateTreeNodes';
 import {FittingView} from '@datagrok-libraries/compute-utils/function-views/src/fitting-view';
 import {SensitivityAnalysisView} from '@datagrok-libraries/compute-utils';
diff --git a/packages/Compute2/src/components/TreeWizard/TreeWizard.tsx b/packages/Compute2/src/components/TreeWizard/TreeWizard.tsx
index fea2de942a..34ef1f0978 100644
--- a/packages/Compute2/src/components/TreeWizard/TreeWizard.tsx
+++ b/packages/Compute2/src/components/TreeWizard/TreeWizard.tsx
@@ -115,6 +115,19 @@ export const TreeWizard = Vue.defineComponent({
 
     const searchParams = useUrlSearchParams<{id?: string, currentStep?: string}>('history');
 
+    Vue.watch(searchParams, (params) => {
+      console.log(params);
+      let paramsRaw = [];
+      if (params.currentStep)
+        paramsRaw.push(`currentStep=${params.currentStep.replace(' ', '+')}`);
+      if (params.id)
+        paramsRaw.push(`id=${params.id}`);
+      if (paramsRaw.length)
+        grok.shell.v.path = `?${paramsRaw.join('&')}`;
+      else
+        grok.shell.v.path = ''
+    });
+
     const isLoading = Vue.ref(false);
 
     const handleActivePanelChanged = async (newPanel: string | null, prevPanel: string | null) => {
@@ -123,7 +136,6 @@ export const TreeWizard = Vue.defineComponent({
       if (prevPanel === 'Step review')
         rfvRef.value?.savePersonalState();
 
-
       if (newPanel === 'Step review') {
         isLoading.value = true;
         await Vue.nextTick();
@@ -235,16 +247,15 @@ export const TreeWizard = Vue.defineComponent({
       else grok.shell.v.name = providerFuncName.value;
     });
 
-    let alreadyLoaded = false;
     Vue.watch(treeState, () => {
-      if (!treeState.value || alreadyLoaded) return;
+      if (!treeState.value || globalThis.initialURLHandled) return;
 
       // Getting inital URL user entered with
       const startUrl = new URL(grok.shell.startUri);
       const loadingId = startUrl.searchParams.get('id');
       if (loadingId) {
         loadPipeline(loadingId);
-        alreadyLoaded = true;
+        globalThis.initialURLHandled = true;
       }
     });
 
diff --git a/packages/Compute2/src/package.ts b/packages/Compute2/src/package.ts
index 938adb0d3a..7eaeb505aa 100644
--- a/packages/Compute2/src/package.ts
+++ b/packages/Compute2/src/package.ts
@@ -17,6 +17,10 @@ import {CustomFunctionView} from '@datagrok-libraries/compute-utils/function-vie
 import {HistoryApp} from './apps/HistoryApp';
 import {Subject} from 'rxjs';
 
+declare global {
+  var initialURLHandled: boolean;
+}
+
 export const _package = new DG.Package();
 
 //tags: init
@@ -32,8 +36,6 @@ function setViewHierarchyData(call: DG.FuncCall, view: DG.ViewBase) {
 
   if (call?.func?.name)
     view.basePath = `/${call.func.name}`;
-
-  console.log(view);
 }
 
 //name: CustomFunctionViewEditor