Skip to content

Commit 55557df

Browse files
chariskcharisk
authored
Add in-progress UI state for modeling methods (#2675)
1 parent f1204ce commit 55557df

7 files changed

Lines changed: 111 additions & 33 deletions

File tree

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

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -510,6 +510,11 @@ interface AddModeledMethodsMessage {
510510
modeledMethods: Record<string, ModeledMethod>;
511511
}
512512

513+
interface SetInProgressMethodsMessage {
514+
t: "setInProgressMethods";
515+
inProgressMethods: string[];
516+
}
517+
513518
interface SwitchModeMessage {
514519
t: "switchMode";
515520
mode: Mode;
@@ -556,7 +561,8 @@ export type ToDataExtensionsEditorMessage =
556561
| SetExtensionPackStateMessage
557562
| SetExternalApiUsagesMessage
558563
| LoadModeledMethodsMessage
559-
| AddModeledMethodsMessage;
564+
| AddModeledMethodsMessage
565+
| SetInProgressMethodsMessage;
560566

561567
export type FromDataExtensionsEditorMessage =
562568
| ViewLoadedMsg

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

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -91,6 +91,10 @@ export function DataExtensionsEditor({
9191
new Set(),
9292
);
9393

94+
const [inProgressSignatures, setInProgressSignatures] = useState<Set<string>>(
95+
new Set(),
96+
);
97+
9498
const [hideModeledApis, setHideModeledApis] = useState(true);
9599

96100
const [modeledMethods, setModeledMethods] = useState<
@@ -135,6 +139,9 @@ export function DataExtensionsEditor({
135139
]),
136140
);
137141
break;
142+
case "setInProgressMethods":
143+
setInProgressSignatures(new Set(msg.inProgressMethods));
144+
break;
138145
default:
139146
assertNever(msg);
140147
}
@@ -330,6 +337,7 @@ export function DataExtensionsEditor({
330337
externalApiUsages={externalApiUsages}
331338
modeledMethods={modeledMethods}
332339
modifiedSignatures={modifiedSignatures}
340+
inProgressSignatures={inProgressSignatures}
333341
viewState={viewState}
334342
hideModeledApis={hideModeledApis}
335343
onChange={onChange}

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

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
import * as React from "react";
2+
import { Dropdown } from "../common/Dropdown";
3+
4+
export const InProgressDropdown = () => {
5+
const options: Array<{ label: string; value: string }> = [
6+
{
7+
label: "Thinking...",
8+
value: "Thinking...",
9+
},
10+
];
11+
const noop = () => {
12+
// Do nothing
13+
};
14+
15+
return (
16+
<Dropdown
17+
value="Thinking..."
18+
options={options}
19+
disabled={false}
20+
onChange={noop}
21+
/>
22+
);
23+
};

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

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -72,6 +72,7 @@ type Props = {
7272
externalApiUsages: ExternalApiUsage[];
7373
modeledMethods: Record<string, ModeledMethod>;
7474
modifiedSignatures: Set<string>;
75+
inProgressSignatures: Set<string>;
7576
viewState: DataExtensionEditorViewState;
7677
hideModeledApis: boolean;
7778
onChange: (
@@ -97,6 +98,7 @@ export const LibraryRow = ({
9798
externalApiUsages,
9899
modeledMethods,
99100
modifiedSignatures,
101+
inProgressSignatures,
100102
viewState,
101103
hideModeledApis,
102104
onChange,
@@ -209,6 +211,7 @@ export const LibraryRow = ({
209211
externalApiUsages={externalApiUsages}
210212
modeledMethods={modeledMethods}
211213
modifiedSignatures={modifiedSignatures}
214+
inProgressSignatures={inProgressSignatures}
212215
mode={viewState.mode}
213216
hideModeledApis={hideModeledApis}
214217
onChange={onChangeWithModelName}

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

Lines changed: 61 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@ import {
22
VSCodeDataGridCell,
33
VSCodeDataGridRow,
44
VSCodeLink,
5+
VSCodeProgressRing,
56
} from "@vscode/webview-ui-toolkit/react";
67
import * as React from "react";
78
import { ChangeEvent, useCallback, useMemo } from "react";
@@ -23,6 +24,7 @@ import {
2324
ModelingStatus,
2425
ModelingStatusIndicator,
2526
} from "./ModelingStatusIndicator";
27+
import { InProgressDropdown } from "./InProgressDropdown";
2628

2729
const ApiOrMethodCell = styled(VSCodeDataGridCell)`
2830
display: flex;
@@ -43,6 +45,12 @@ const ViewLink = styled(VSCodeLink)`
4345
white-space: nowrap;
4446
`;
4547

48+
const ProgressRing = styled(VSCodeProgressRing)`
49+
width: 16px;
50+
height: 16px;
51+
margin-left: auto;
52+
`;
53+
4654
const modelTypeOptions: Array<{ value: ModeledMethodType; label: string }> = [
4755
{ value: "none", label: "Unmodeled" },
4856
{ value: "source", label: "Source" },
@@ -55,6 +63,7 @@ type Props = {
5563
externalApiUsage: ExternalApiUsage;
5664
modeledMethod: ModeledMethod | undefined;
5765
methodIsUnsaved: boolean;
66+
modelingInProgress: boolean;
5867
mode: Mode;
5968
hideModeledApis: boolean;
6069
onChange: (
@@ -216,38 +225,59 @@ function ModelableMethodRow(props: Props) {
216225
</UsagesButton>
217226
)}
218227
<ViewLink onClick={jumpToUsage}>View</ViewLink>
228+
{props.modelingInProgress && <ProgressRing />}
219229
</ApiOrMethodCell>
220-
<VSCodeDataGridCell gridColumn={2}>
221-
<Dropdown
222-
value={modeledMethod?.type ?? "none"}
223-
options={modelTypeOptions}
224-
onChange={handleTypeInput}
225-
/>
226-
</VSCodeDataGridCell>
227-
<VSCodeDataGridCell gridColumn={3}>
228-
<Dropdown
229-
value={modeledMethod?.input}
230-
options={inputOptions}
231-
disabled={!showInputCell}
232-
onChange={handleInputInput}
233-
/>
234-
</VSCodeDataGridCell>
235-
<VSCodeDataGridCell gridColumn={4}>
236-
<Dropdown
237-
value={modeledMethod?.output}
238-
options={outputOptions}
239-
disabled={!showOutputCell}
240-
onChange={handleOutputInput}
241-
/>
242-
</VSCodeDataGridCell>
243-
<VSCodeDataGridCell gridColumn={5}>
244-
<KindInput
245-
kinds={predicate?.supportedKinds || []}
246-
value={modeledMethod?.kind}
247-
disabled={!showKindCell}
248-
onChange={handleKindChange}
249-
/>
250-
</VSCodeDataGridCell>
230+
{props.modelingInProgress && (
231+
<>
232+
<VSCodeDataGridCell gridColumn={2}>
233+
<InProgressDropdown />
234+
</VSCodeDataGridCell>
235+
<VSCodeDataGridCell gridColumn={3}>
236+
<InProgressDropdown />
237+
</VSCodeDataGridCell>
238+
<VSCodeDataGridCell gridColumn={4}>
239+
<InProgressDropdown />
240+
</VSCodeDataGridCell>
241+
<VSCodeDataGridCell gridColumn={5}>
242+
<InProgressDropdown />
243+
</VSCodeDataGridCell>
244+
</>
245+
)}
246+
{!props.modelingInProgress && (
247+
<>
248+
<VSCodeDataGridCell gridColumn={2}>
249+
<Dropdown
250+
value={modeledMethod?.type ?? "none"}
251+
options={modelTypeOptions}
252+
onChange={handleTypeInput}
253+
/>
254+
</VSCodeDataGridCell>
255+
<VSCodeDataGridCell gridColumn={3}>
256+
<Dropdown
257+
value={modeledMethod?.input}
258+
options={inputOptions}
259+
disabled={!showInputCell}
260+
onChange={handleInputInput}
261+
/>
262+
</VSCodeDataGridCell>
263+
<VSCodeDataGridCell gridColumn={4}>
264+
<Dropdown
265+
value={modeledMethod?.output}
266+
options={outputOptions}
267+
disabled={!showOutputCell}
268+
onChange={handleOutputInput}
269+
/>
270+
</VSCodeDataGridCell>
271+
<VSCodeDataGridCell gridColumn={5}>
272+
<KindInput
273+
kinds={predicate?.supportedKinds || []}
274+
value={modeledMethod?.kind}
275+
disabled={!showKindCell}
276+
onChange={handleKindChange}
277+
/>
278+
</VSCodeDataGridCell>
279+
</>
280+
)}
251281
</VSCodeDataGridRow>
252282
);
253283
}

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

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,7 @@ type Props = {
1515
externalApiUsages: ExternalApiUsage[];
1616
modeledMethods: Record<string, ModeledMethod>;
1717
modifiedSignatures: Set<string>;
18+
inProgressSignatures: Set<string>;
1819
mode: Mode;
1920
hideModeledApis: boolean;
2021
onChange: (
@@ -27,6 +28,7 @@ export const ModeledMethodDataGrid = ({
2728
externalApiUsages,
2829
modeledMethods,
2930
modifiedSignatures,
31+
inProgressSignatures,
3032
mode,
3133
hideModeledApis,
3234
onChange,
@@ -37,7 +39,7 @@ export const ModeledMethodDataGrid = ({
3739
);
3840

3941
return (
40-
<VSCodeDataGrid gridTemplateColumns="0.5fr 0.125fr 0.125fr 0.125fr 0.125fr">
42+
<VSCodeDataGrid gridTemplateColumns="0.5fr 0.125fr 0.125fr 0.125fr 0.125fr 0.125fr">
4143
<VSCodeDataGridRow rowType="header">
4244
<VSCodeDataGridCell cellType="columnheader" gridColumn={1}>
4345
API or method
@@ -61,6 +63,9 @@ export const ModeledMethodDataGrid = ({
6163
externalApiUsage={externalApiUsage}
6264
modeledMethod={modeledMethods[externalApiUsage.signature]}
6365
methodIsUnsaved={modifiedSignatures.has(externalApiUsage.signature)}
66+
modelingInProgress={inProgressSignatures.has(
67+
externalApiUsage.signature,
68+
)}
6469
mode={mode}
6570
hideModeledApis={hideModeledApis}
6671
onChange={onChange}

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

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,7 @@ type Props = {
1414
externalApiUsages: ExternalApiUsage[];
1515
modeledMethods: Record<string, ModeledMethod>;
1616
modifiedSignatures: Set<string>;
17+
inProgressSignatures: Set<string>;
1718
viewState: DataExtensionEditorViewState;
1819
hideModeledApis: boolean;
1920
onChange: (
@@ -41,6 +42,7 @@ export const ModeledMethodsList = ({
4142
externalApiUsages,
4243
modeledMethods,
4344
modifiedSignatures,
45+
inProgressSignatures,
4446
viewState,
4547
hideModeledApis,
4648
onChange,
@@ -84,6 +86,7 @@ export const ModeledMethodsList = ({
8486
externalApiUsages={grouped[libraryName]}
8587
modeledMethods={modeledMethods}
8688
modifiedSignatures={modifiedSignatures}
89+
inProgressSignatures={inProgressSignatures}
8790
viewState={viewState}
8891
hideModeledApis={hideModeledApis}
8992
onChange={onChange}

0 commit comments

Comments
 (0)