Skip to content

Commit e83ad36

Browse files
koesie10koesie10
authored
Merge pull request #2522 from github/koesie10/group-by-library
Group modeled methods by library in the data extensions editor
2 parents 5dcadd2 + bbc39b0 commit e83ad36

4 files changed

Lines changed: 147 additions & 67 deletions

File tree

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

Lines changed: 26 additions & 58 deletions
Original file line numberDiff line numberDiff line change
@@ -4,23 +4,18 @@ import {
44
ShowProgressMessage,
55
ToDataExtensionsEditorMessage,
66
} from "../../pure/interface-types";
7-
import {
8-
VSCodeButton,
9-
VSCodeDataGrid,
10-
VSCodeDataGridCell,
11-
VSCodeDataGridRow,
12-
} from "@vscode/webview-ui-toolkit/react";
7+
import { VSCodeButton } from "@vscode/webview-ui-toolkit/react";
138
import styled from "styled-components";
149
import { ExternalApiUsage } from "../../data-extensions-editor/external-api-usage";
1510
import { ModeledMethod } from "../../data-extensions-editor/modeled-method";
16-
import { MethodRow } from "./MethodRow";
1711
import { assertNever } from "../../pure/helpers-pure";
1812
import { vscode } from "../vscode-api";
1913
import { calculateModeledPercentage } from "./modeled";
2014
import { LinkIconButton } from "../variant-analysis/LinkIconButton";
2115
import { basename } from "../common/path";
2216
import { ViewTitle } from "../common";
2317
import { DataExtensionEditorViewState } from "../../data-extensions-editor/shared/view-state";
18+
import { ModeledMethodsList } from "./ModeledMethodsList";
2419

2520
const DataExtensionsEditorContainer = styled.div`
2621
margin-top: 1rem;
@@ -42,6 +37,12 @@ const EditorContainer = styled.div`
4237
margin-top: 1rem;
4338
`;
4439

40+
const ButtonsContainer = styled.div`
41+
display: flex;
42+
gap: 0.4em;
43+
margin-bottom: 1rem;
44+
`;
45+
4546
type ProgressBarProps = {
4647
completion: number;
4748
};
@@ -217,57 +218,24 @@ export function DataExtensionsEditor({
217218
</DetailsContainer>
218219

219220
<EditorContainer>
220-
<VSCodeButton onClick={onApplyClick}>Apply</VSCodeButton>
221-
&nbsp;
222-
<VSCodeButton onClick={onGenerateClick}>
223-
Download and generate
224-
</VSCodeButton>
225-
{viewState?.showLlmButton && (
226-
<>
227-
&nbsp;
228-
<VSCodeButton onClick={onGenerateFromLlmClick}>
229-
Generate using LLM
230-
</VSCodeButton>
231-
</>
232-
)}
233-
<br />
234-
<br />
235-
<VSCodeDataGrid>
236-
<VSCodeDataGridRow rowType="header">
237-
<VSCodeDataGridCell cellType="columnheader" gridColumn={1}>
238-
Library
239-
</VSCodeDataGridCell>
240-
<VSCodeDataGridCell cellType="columnheader" gridColumn={2}>
241-
Type
242-
</VSCodeDataGridCell>
243-
<VSCodeDataGridCell cellType="columnheader" gridColumn={3}>
244-
Method
245-
</VSCodeDataGridCell>
246-
<VSCodeDataGridCell cellType="columnheader" gridColumn={4}>
247-
Usages
248-
</VSCodeDataGridCell>
249-
<VSCodeDataGridCell cellType="columnheader" gridColumn={5}>
250-
Model type
251-
</VSCodeDataGridCell>
252-
<VSCodeDataGridCell cellType="columnheader" gridColumn={6}>
253-
Input
254-
</VSCodeDataGridCell>
255-
<VSCodeDataGridCell cellType="columnheader" gridColumn={7}>
256-
Output
257-
</VSCodeDataGridCell>
258-
<VSCodeDataGridCell cellType="columnheader" gridColumn={8}>
259-
Kind
260-
</VSCodeDataGridCell>
261-
</VSCodeDataGridRow>
262-
{externalApiUsages.map((externalApiUsage) => (
263-
<MethodRow
264-
key={externalApiUsage.signature}
265-
externalApiUsage={externalApiUsage}
266-
modeledMethod={modeledMethods[externalApiUsage.signature]}
267-
onChange={onChange}
268-
/>
269-
))}
270-
</VSCodeDataGrid>
221+
<ButtonsContainer>
222+
<VSCodeButton onClick={onApplyClick}>Apply</VSCodeButton>
223+
<VSCodeButton onClick={onGenerateClick}>
224+
Download and generate
225+
</VSCodeButton>
226+
{viewState?.showLlmButton && (
227+
<>
228+
<VSCodeButton onClick={onGenerateFromLlmClick}>
229+
Generate using LLM
230+
</VSCodeButton>
231+
</>
232+
)}
233+
</ButtonsContainer>
234+
<ModeledMethodsList
235+
externalApiUsages={externalApiUsages}
236+
modeledMethods={modeledMethods}
237+
onChange={onChange}
238+
/>
271239
</EditorContainer>
272240
</>
273241
)}

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

Lines changed: 6 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -149,17 +149,14 @@ export const MethodRow = ({
149149
return (
150150
<VSCodeDataGridRow>
151151
<VSCodeDataGridCell gridColumn={1}>
152-
{externalApiUsage.library}
153-
</VSCodeDataGridCell>
154-
<VSCodeDataGridCell gridColumn={2}>
155152
<SupportSpan
156153
supported={externalApiUsage.supported}
157154
modeled={modeledMethod}
158155
>
159156
{externalApiUsage.packageName}.{externalApiUsage.typeName}
160157
</SupportSpan>
161158
</VSCodeDataGridCell>
162-
<VSCodeDataGridCell gridColumn={3}>
159+
<VSCodeDataGridCell gridColumn={2}>
163160
<SupportSpan
164161
supported={externalApiUsage.supported}
165162
modeled={modeledMethod}
@@ -168,12 +165,12 @@ export const MethodRow = ({
168165
{externalApiUsage.methodParameters}
169166
</SupportSpan>
170167
</VSCodeDataGridCell>
171-
<VSCodeDataGridCell gridColumn={4}>
168+
<VSCodeDataGridCell gridColumn={3}>
172169
<UsagesButton onClick={jumpToUsage}>
173170
{externalApiUsage.usages.length}
174171
</UsagesButton>
175172
</VSCodeDataGridCell>
176-
<VSCodeDataGridCell gridColumn={5}>
173+
<VSCodeDataGridCell gridColumn={4}>
177174
{(!externalApiUsage.supported ||
178175
(modeledMethod && modeledMethod?.type !== "none")) && (
179176
<Dropdown
@@ -188,7 +185,7 @@ export const MethodRow = ({
188185
</Dropdown>
189186
)}
190187
</VSCodeDataGridCell>
191-
<VSCodeDataGridCell gridColumn={6}>
188+
<VSCodeDataGridCell gridColumn={5}>
192189
{modeledMethod?.type &&
193190
["sink", "summary"].includes(modeledMethod?.type) && (
194191
<Dropdown value={modeledMethod?.input} onInput={handleInputInput}>
@@ -201,7 +198,7 @@ export const MethodRow = ({
201198
</Dropdown>
202199
)}
203200
</VSCodeDataGridCell>
204-
<VSCodeDataGridCell gridColumn={7}>
201+
<VSCodeDataGridCell gridColumn={6}>
205202
{modeledMethod?.type &&
206203
["source", "summary"].includes(modeledMethod?.type) && (
207204
<Dropdown value={modeledMethod?.output} onInput={handleOutputInput}>
@@ -215,7 +212,7 @@ export const MethodRow = ({
215212
</Dropdown>
216213
)}
217214
</VSCodeDataGridCell>
218-
<VSCodeDataGridCell gridColumn={8}>
215+
<VSCodeDataGridCell gridColumn={7}>
219216
{predicate?.supportedKinds && (
220217
<KindInput
221218
kinds={predicate.supportedKinds}

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

Lines changed: 60 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,60 @@
1+
import * as React from "react";
2+
import {
3+
VSCodeDataGrid,
4+
VSCodeDataGridCell,
5+
VSCodeDataGridRow,
6+
} from "@vscode/webview-ui-toolkit/react";
7+
import { MethodRow } from "./MethodRow";
8+
import { ExternalApiUsage } from "../../data-extensions-editor/external-api-usage";
9+
import { ModeledMethod } from "../../data-extensions-editor/modeled-method";
10+
11+
type Props = {
12+
externalApiUsages: ExternalApiUsage[];
13+
modeledMethods: Record<string, ModeledMethod>;
14+
onChange: (
15+
externalApiUsage: ExternalApiUsage,
16+
modeledMethod: ModeledMethod,
17+
) => void;
18+
};
19+
20+
export const ModeledMethodDataGrid = ({
21+
externalApiUsages,
22+
modeledMethods,
23+
onChange,
24+
}: Props) => {
25+
return (
26+
<VSCodeDataGrid>
27+
<VSCodeDataGridRow rowType="header">
28+
<VSCodeDataGridCell cellType="columnheader" gridColumn={1}>
29+
Type
30+
</VSCodeDataGridCell>
31+
<VSCodeDataGridCell cellType="columnheader" gridColumn={2}>
32+
Method
33+
</VSCodeDataGridCell>
34+
<VSCodeDataGridCell cellType="columnheader" gridColumn={3}>
35+
Usages
36+
</VSCodeDataGridCell>
37+
<VSCodeDataGridCell cellType="columnheader" gridColumn={4}>
38+
Model type
39+
</VSCodeDataGridCell>
40+
<VSCodeDataGridCell cellType="columnheader" gridColumn={5}>
41+
Input
42+
</VSCodeDataGridCell>
43+
<VSCodeDataGridCell cellType="columnheader" gridColumn={6}>
44+
Output
45+
</VSCodeDataGridCell>
46+
<VSCodeDataGridCell cellType="columnheader" gridColumn={7}>
47+
Kind
48+
</VSCodeDataGridCell>
49+
</VSCodeDataGridRow>
50+
{externalApiUsages.map((externalApiUsage) => (
51+
<MethodRow
52+
key={externalApiUsage.signature}
53+
externalApiUsage={externalApiUsage}
54+
modeledMethod={modeledMethods[externalApiUsage.signature]}
55+
onChange={onChange}
56+
/>
57+
))}
58+
</VSCodeDataGrid>
59+
);
60+
};

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

Lines changed: 55 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,55 @@
1+
import * as React from "react";
2+
import { useMemo } from "react";
3+
import styled from "styled-components";
4+
import { ExternalApiUsage } from "../../data-extensions-editor/external-api-usage";
5+
import { ModeledMethod } from "../../data-extensions-editor/modeled-method";
6+
import { ModeledMethodDataGrid } from "./ModeledMethodDataGrid";
7+
8+
const LibraryContainer = styled.div`
9+
margin-bottom: 1rem;
10+
`;
11+
12+
type Props = {
13+
externalApiUsages: ExternalApiUsage[];
14+
modeledMethods: Record<string, ModeledMethod>;
15+
onChange: (
16+
externalApiUsage: ExternalApiUsage,
17+
modeledMethod: ModeledMethod,
18+
) => void;
19+
};
20+
21+
export const ModeledMethodsList = ({
22+
externalApiUsages,
23+
modeledMethods,
24+
onChange,
25+
}: Props) => {
26+
const groupedByLibrary = useMemo(() => {
27+
const groupedByLibrary: Record<string, ExternalApiUsage[]> = {};
28+
29+
for (const externalApiUsage of externalApiUsages) {
30+
groupedByLibrary[externalApiUsage.library] ??= [];
31+
groupedByLibrary[externalApiUsage.library].push(externalApiUsage);
32+
}
33+
34+
return groupedByLibrary;
35+
}, [externalApiUsages]);
36+
37+
const sortedLibraryNames = useMemo(() => {
38+
return Object.keys(groupedByLibrary).sort();
39+
}, [groupedByLibrary]);
40+
41+
return (
42+
<>
43+
{sortedLibraryNames.map((libraryName) => (
44+
<LibraryContainer key={libraryName}>
45+
<h3>{libraryName}</h3>
46+
<ModeledMethodDataGrid
47+
externalApiUsages={groupedByLibrary[libraryName]}
48+
modeledMethods={modeledMethods}
49+
onChange={onChange}
50+
/>
51+
</LibraryContainer>
52+
))}
53+
</>
54+
);
55+
};

0 commit comments

Comments
 (0)