Add in-progress UI state for modeling methods (#2675)

extensions/ql-vscode/src/common/interface-types.ts

@@ -510,6 +510,11 @@ interface AddModeledMethodsMessage {
   modeledMethods: Record<string, ModeledMethod>;
 }
 
+interface SetInProgressMethodsMessage {
+  t: "setInProgressMethods";
+  inProgressMethods: string[];
+}
+
 interface SwitchModeMessage {
   t: "switchMode";
   mode: Mode;
@@ -556,7 +561,8 @@ export type ToDataExtensionsEditorMessage =
   | SetExtensionPackStateMessage
   | SetExternalApiUsagesMessage
   | LoadModeledMethodsMessage
-  | AddModeledMethodsMessage;
+  | AddModeledMethodsMessage
+  | SetInProgressMethodsMessage;
 
 export type FromDataExtensionsEditorMessage =
   | ViewLoadedMsg

extensions/ql-vscode/src/view/data-extensions-editor/DataExtensionsEditor.tsx

@@ -91,6 +91,10 @@ export function DataExtensionsEditor({
     new Set(),
   );
 
+  const [inProgressSignatures, setInProgressSignatures] = useState<Set<string>>(
+    new Set(),
+  );
+
   const [hideModeledApis, setHideModeledApis] = useState(true);
 
   const [modeledMethods, setModeledMethods] = useState<
@@ -135,6 +139,9 @@ export function DataExtensionsEditor({
                 ]),
             );
             break;
+          case "setInProgressMethods":
+            setInProgressSignatures(new Set(msg.inProgressMethods));
+            break;
           default:
             assertNever(msg);
         }
@@ -330,6 +337,7 @@ export function DataExtensionsEditor({
           externalApiUsages={externalApiUsages}
           modeledMethods={modeledMethods}
           modifiedSignatures={modifiedSignatures}
+          inProgressSignatures={inProgressSignatures}
           viewState={viewState}
           hideModeledApis={hideModeledApis}
           onChange={onChange}

extensions/ql-vscode/src/view/data-extensions-editor/InProgressDropdown.tsx

@@ -0,0 +1,23 @@
+import * as React from "react";
+import { Dropdown } from "../common/Dropdown";
+
+export const InProgressDropdown = () => {
+  const options: Array<{ label: string; value: string }> = [
+    {
+      label: "Thinking...",
+      value: "Thinking...",
+    },
+  ];
+  const noop = () => {
+    // Do nothing
+  };
+
+  return (
+    <Dropdown
+      value="Thinking..."
+      options={options}
+      disabled={false}
+      onChange={noop}
+    />
+  );
+};

extensions/ql-vscode/src/view/data-extensions-editor/LibraryRow.tsx

@@ -72,6 +72,7 @@ type Props = {
   externalApiUsages: ExternalApiUsage[];
   modeledMethods: Record<string, ModeledMethod>;
   modifiedSignatures: Set<string>;
+  inProgressSignatures: Set<string>;
   viewState: DataExtensionEditorViewState;
   hideModeledApis: boolean;
   onChange: (
@@ -97,6 +98,7 @@ export const LibraryRow = ({
   externalApiUsages,
   modeledMethods,
   modifiedSignatures,
+  inProgressSignatures,
   viewState,
   hideModeledApis,
   onChange,
@@ -209,6 +211,7 @@ export const LibraryRow = ({
             externalApiUsages={externalApiUsages}
             modeledMethods={modeledMethods}
             modifiedSignatures={modifiedSignatures}
+            inProgressSignatures={inProgressSignatures}
             mode={viewState.mode}
             hideModeledApis={hideModeledApis}
             onChange={onChangeWithModelName}

extensions/ql-vscode/src/view/data-extensions-editor/MethodRow.tsx

@@ -2,6 +2,7 @@ import {
   VSCodeDataGridCell,
   VSCodeDataGridRow,
   VSCodeLink,
+  VSCodeProgressRing,
 } from "@vscode/webview-ui-toolkit/react";
 import * as React from "react";
 import { ChangeEvent, useCallback, useMemo } from "react";
@@ -23,6 +24,7 @@ import {
   ModelingStatus,
   ModelingStatusIndicator,
 } from "./ModelingStatusIndicator";
+import { InProgressDropdown } from "./InProgressDropdown";
 
 const ApiOrMethodCell = styled(VSCodeDataGridCell)`
   display: flex;
@@ -43,6 +45,12 @@ const ViewLink = styled(VSCodeLink)`
   white-space: nowrap;
 `;
 
+const ProgressRing = styled(VSCodeProgressRing)`
+  width: 16px;
+  height: 16px;
+  margin-left: auto;
+`;
+
 const modelTypeOptions: Array<{ value: ModeledMethodType; label: string }> = [
   { value: "none", label: "Unmodeled" },
   { value: "source", label: "Source" },
@@ -55,6 +63,7 @@ type Props = {
   externalApiUsage: ExternalApiUsage;
   modeledMethod: ModeledMethod | undefined;
   methodIsUnsaved: boolean;
+  modelingInProgress: boolean;
   mode: Mode;
   hideModeledApis: boolean;
   onChange: (
@@ -216,38 +225,59 @@ function ModelableMethodRow(props: Props) {
           </UsagesButton>
         )}
         <ViewLink onClick={jumpToUsage}>View</ViewLink>
+        {props.modelingInProgress && <ProgressRing />}
       </ApiOrMethodCell>
-      <VSCodeDataGridCell gridColumn={2}>
+      {props.modelingInProgress && (
-        <Dropdown
+        <>
-          value={modeledMethod?.type ?? "none"}
+          <VSCodeDataGridCell gridColumn={2}>
-          options={modelTypeOptions}
+            <InProgressDropdown />
-          onChange={handleTypeInput}
+          </VSCodeDataGridCell>
-        />
+          <VSCodeDataGridCell gridColumn={3}>
-      </VSCodeDataGridCell>
+            <InProgressDropdown />
-      <VSCodeDataGridCell gridColumn={3}>
+          </VSCodeDataGridCell>
-        <Dropdown
+          <VSCodeDataGridCell gridColumn={4}>
-          value={modeledMethod?.input}
+            <InProgressDropdown />
-          options={inputOptions}
+          </VSCodeDataGridCell>
-          disabled={!showInputCell}
+          <VSCodeDataGridCell gridColumn={5}>
-          onChange={handleInputInput}
+            <InProgressDropdown />
-        />
+          </VSCodeDataGridCell>
-      </VSCodeDataGridCell>
+        </>
-      <VSCodeDataGridCell gridColumn={4}>
+      )}
-        <Dropdown
+      {!props.modelingInProgress && (
-          value={modeledMethod?.output}
+        <>
-          options={outputOptions}
+          <VSCodeDataGridCell gridColumn={2}>
-          disabled={!showOutputCell}
+            <Dropdown
-          onChange={handleOutputInput}
+              value={modeledMethod?.type ?? "none"}
-        />
+              options={modelTypeOptions}
-      </VSCodeDataGridCell>
+              onChange={handleTypeInput}
-      <VSCodeDataGridCell gridColumn={5}>
+            />
-        <KindInput
+          </VSCodeDataGridCell>
-          kinds={predicate?.supportedKinds || []}
+          <VSCodeDataGridCell gridColumn={3}>
-          value={modeledMethod?.kind}
+            <Dropdown
-          disabled={!showKindCell}
+              value={modeledMethod?.input}
-          onChange={handleKindChange}
+              options={inputOptions}
-        />
+              disabled={!showInputCell}
-      </VSCodeDataGridCell>
+              onChange={handleInputInput}
+            />
+          </VSCodeDataGridCell>
+          <VSCodeDataGridCell gridColumn={4}>
+            <Dropdown
+              value={modeledMethod?.output}
+              options={outputOptions}
+              disabled={!showOutputCell}
+              onChange={handleOutputInput}
+            />
+          </VSCodeDataGridCell>
+          <VSCodeDataGridCell gridColumn={5}>
+            <KindInput
+              kinds={predicate?.supportedKinds || []}
+              value={modeledMethod?.kind}
+              disabled={!showKindCell}
+              onChange={handleKindChange}
+            />
+          </VSCodeDataGridCell>
+        </>
+      )}
     </VSCodeDataGridRow>
   );
 }

extensions/ql-vscode/src/view/data-extensions-editor/ModeledMethodDataGrid.tsx

@@ -15,6 +15,7 @@ type Props = {
   externalApiUsages: ExternalApiUsage[];
   modeledMethods: Record<string, ModeledMethod>;
   modifiedSignatures: Set<string>;
+  inProgressSignatures: Set<string>;
   mode: Mode;
   hideModeledApis: boolean;
   onChange: (
@@ -27,6 +28,7 @@ export const ModeledMethodDataGrid = ({
   externalApiUsages,
   modeledMethods,
   modifiedSignatures,
+  inProgressSignatures,
   mode,
   hideModeledApis,
   onChange,
@@ -37,7 +39,7 @@ export const ModeledMethodDataGrid = ({
   );
 
   return (
-    <VSCodeDataGrid gridTemplateColumns="0.5fr 0.125fr 0.125fr 0.125fr 0.125fr">
+    <VSCodeDataGrid gridTemplateColumns="0.5fr 0.125fr 0.125fr 0.125fr 0.125fr 0.125fr">
       <VSCodeDataGridRow rowType="header">
         <VSCodeDataGridCell cellType="columnheader" gridColumn={1}>
           API or method
@@ -61,6 +63,9 @@ export const ModeledMethodDataGrid = ({
           externalApiUsage={externalApiUsage}
           modeledMethod={modeledMethods[externalApiUsage.signature]}
           methodIsUnsaved={modifiedSignatures.has(externalApiUsage.signature)}
+          modelingInProgress={inProgressSignatures.has(
+            externalApiUsage.signature,
+          )}
           mode={mode}
           hideModeledApis={hideModeledApis}
           onChange={onChange}

extensions/ql-vscode/src/view/data-extensions-editor/ModeledMethodsList.tsx

@@ -14,6 +14,7 @@ type Props = {
   externalApiUsages: ExternalApiUsage[];
   modeledMethods: Record<string, ModeledMethod>;
   modifiedSignatures: Set<string>;
+  inProgressSignatures: Set<string>;
   viewState: DataExtensionEditorViewState;
   hideModeledApis: boolean;
   onChange: (
@@ -41,6 +42,7 @@ export const ModeledMethodsList = ({
   externalApiUsages,
   modeledMethods,
   modifiedSignatures,
+  inProgressSignatures,
   viewState,
   hideModeledApis,
   onChange,
@@ -84,6 +86,7 @@ export const ModeledMethodsList = ({
           externalApiUsages={grouped[libraryName]}
           modeledMethods={modeledMethods}
           modifiedSignatures={modifiedSignatures}
+          inProgressSignatures={inProgressSignatures}
           viewState={viewState}
           hideModeledApis={hideModeledApis}
           onChange={onChange}