Skip to content

Commit 487c0a6

Browse files
koesie10koesie10
committed
Create ModeledMethodDataGrid component
1 parent 23745ba commit 487c0a6

2 files changed

Lines changed: 89 additions & 58 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 { ModeledMethodDataGrid } from "./ModeledMethodDataGrid";
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+
<ModeledMethodDataGrid
235+
externalApiUsages={externalApiUsages}
236+
modeledMethods={modeledMethods}
237+
onChange={onChange}
238+
/>
271239
</EditorContainer>
272240
</>
273241
)}

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

Lines changed: 63 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,63 @@
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+
Library
30+
</VSCodeDataGridCell>
31+
<VSCodeDataGridCell cellType="columnheader" gridColumn={2}>
32+
Type
33+
</VSCodeDataGridCell>
34+
<VSCodeDataGridCell cellType="columnheader" gridColumn={3}>
35+
Method
36+
</VSCodeDataGridCell>
37+
<VSCodeDataGridCell cellType="columnheader" gridColumn={4}>
38+
Usages
39+
</VSCodeDataGridCell>
40+
<VSCodeDataGridCell cellType="columnheader" gridColumn={5}>
41+
Model type
42+
</VSCodeDataGridCell>
43+
<VSCodeDataGridCell cellType="columnheader" gridColumn={6}>
44+
Input
45+
</VSCodeDataGridCell>
46+
<VSCodeDataGridCell cellType="columnheader" gridColumn={7}>
47+
Output
48+
</VSCodeDataGridCell>
49+
<VSCodeDataGridCell cellType="columnheader" gridColumn={8}>
50+
Kind
51+
</VSCodeDataGridCell>
52+
</VSCodeDataGridRow>
53+
{externalApiUsages.map((externalApiUsage) => (
54+
<MethodRow
55+
key={externalApiUsage.signature}
56+
externalApiUsage={externalApiUsage}
57+
modeledMethod={modeledMethods[externalApiUsage.signature]}
58+
onChange={onChange}
59+
/>
60+
))}
61+
</VSCodeDataGrid>
62+
);
63+
};

0 commit comments

Comments
 (0)