mrva/vscode-codeql
1
0
Fork 0
Code Issues Pull Requests Actions 2 Packages Projects Releases Wiki Activity

Create ModeledMethodDataGrid component

Browse Source
This commit is contained in:
Koen Vlaswinkel
2023-06-19 11:33:45 +02:00
parent 23745ba93f
commit 487c0a66f4
2 changed files with 89 additions and 58 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -4,16 +4,10 @@ import {
ShowProgressMessage, ShowProgressMessage,
ToDataExtensionsEditorMessage, ToDataExtensionsEditorMessage,
} from "../../pure/interface-types"; } from "../../pure/interface-types";
import { import { VSCodeButton } from "@vscode/webview-ui-toolkit/react";
VSCodeButton,
VSCodeDataGrid,
VSCodeDataGridCell,
VSCodeDataGridRow,
} from "@vscode/webview-ui-toolkit/react";
import styled from "styled-components"; import styled from "styled-components";
import { ExternalApiUsage } from "../../data-extensions-editor/external-api-usage"; import { ExternalApiUsage } from "../../data-extensions-editor/external-api-usage";
import { ModeledMethod } from "../../data-extensions-editor/modeled-method"; import { ModeledMethod } from "../../data-extensions-editor/modeled-method";
import { MethodRow } from "./MethodRow";
import { assertNever } from "../../pure/helpers-pure"; import { assertNever } from "../../pure/helpers-pure";
import { vscode } from "../vscode-api"; import { vscode } from "../vscode-api";
import { calculateModeledPercentage } from "./modeled"; import { calculateModeledPercentage } from "./modeled";
@@ -21,6 +15,7 @@ import { LinkIconButton } from "../variant-analysis/LinkIconButton";
import { basename } from "../common/path"; import { basename } from "../common/path";
import { ViewTitle } from "../common"; import { ViewTitle } from "../common";
import { DataExtensionEditorViewState } from "../../data-extensions-editor/shared/view-state"; import { DataExtensionEditorViewState } from "../../data-extensions-editor/shared/view-state";
import { ModeledMethodDataGrid } from "./ModeledMethodDataGrid";
const DataExtensionsEditorContainer = styled.div` const DataExtensionsEditorContainer = styled.div`
margin-top: 1rem; margin-top: 1rem;
@@ -42,6 +37,12 @@ const EditorContainer = styled.div`
margin-top: 1rem; margin-top: 1rem;
`; `;
const ButtonsContainer = styled.div`
display: flex;
gap: 0.4em;
margin-bottom: 1rem;
`;
type ProgressBarProps = { type ProgressBarProps = {
completion: number; completion: number;
}; };
@@ -217,57 +218,24 @@ export function DataExtensionsEditor({
</DetailsContainer> </DetailsContainer>
<EditorContainer> <EditorContainer>
<VSCodeButton onClick={onApplyClick}>Apply</VSCodeButton> <ButtonsContainer>
&nbsp; <VSCodeButton onClick={onApplyClick}>Apply</VSCodeButton>
<VSCodeButton onClick={onGenerateClick}> <VSCodeButton onClick={onGenerateClick}>
Download and generate Download and generate
</VSCodeButton> </VSCodeButton>
{viewState?.showLlmButton && ( {viewState?.showLlmButton && (
<> <>
&nbsp; <VSCodeButton onClick={onGenerateFromLlmClick}>
<VSCodeButton onClick={onGenerateFromLlmClick}> Generate using LLM
Generate using LLM </VSCodeButton>
</VSCodeButton> </>
</> )}
)} </ButtonsContainer>
<br /> <ModeledMethodDataGrid
<br /> externalApiUsages={externalApiUsages}
<VSCodeDataGrid> modeledMethods={modeledMethods}
<VSCodeDataGridRow rowType="header"> onChange={onChange}
<VSCodeDataGridCell cellType="columnheader" gridColumn={1}> />
Library
</VSCodeDataGridCell>
<VSCodeDataGridCell cellType="columnheader" gridColumn={2}>
Type
</VSCodeDataGridCell>
<VSCodeDataGridCell cellType="columnheader" gridColumn={3}>
Method
</VSCodeDataGridCell>
<VSCodeDataGridCell cellType="columnheader" gridColumn={4}>
Usages
</VSCodeDataGridCell>
<VSCodeDataGridCell cellType="columnheader" gridColumn={5}>
Model type
</VSCodeDataGridCell>
<VSCodeDataGridCell cellType="columnheader" gridColumn={6}>
Input
</VSCodeDataGridCell>
<VSCodeDataGridCell cellType="columnheader" gridColumn={7}>
Output
</VSCodeDataGridCell>
<VSCodeDataGridCell cellType="columnheader" gridColumn={8}>
Kind
</VSCodeDataGridCell>
</VSCodeDataGridRow>
{externalApiUsages.map((externalApiUsage) => (
<MethodRow
key={externalApiUsage.signature}
externalApiUsage={externalApiUsage}
modeledMethod={modeledMethods[externalApiUsage.signature]}
onChange={onChange}
/>
))}
</VSCodeDataGrid>
</EditorContainer> </EditorContainer>
</> </>
)} )}

63
extensions/ql-vscode/src/view/data-extensions-editor/ModeledMethodDataGrid.tsx Normal file
View File

@@ -0,0 +1,63 @@
import * as React from "react";
import {
VSCodeDataGrid,
VSCodeDataGridCell,
VSCodeDataGridRow,
} from "@vscode/webview-ui-toolkit/react";
import { MethodRow } from "./MethodRow";
import { ExternalApiUsage } from "../../data-extensions-editor/external-api-usage";
import { ModeledMethod } from "../../data-extensions-editor/modeled-method";
type Props = {
externalApiUsages: ExternalApiUsage[];
modeledMethods: Record<string, ModeledMethod>;
onChange: (
externalApiUsage: ExternalApiUsage,
modeledMethod: ModeledMethod,
) => void;
};
export const ModeledMethodDataGrid = ({
externalApiUsages,
modeledMethods,
onChange,
}: Props) => {
return (
<VSCodeDataGrid>
<VSCodeDataGridRow rowType="header">
<VSCodeDataGridCell cellType="columnheader" gridColumn={1}>
Library
</VSCodeDataGridCell>
<VSCodeDataGridCell cellType="columnheader" gridColumn={2}>
Type
</VSCodeDataGridCell>
<VSCodeDataGridCell cellType="columnheader" gridColumn={3}>
Method
</VSCodeDataGridCell>
<VSCodeDataGridCell cellType="columnheader" gridColumn={4}>
Usages
</VSCodeDataGridCell>
<VSCodeDataGridCell cellType="columnheader" gridColumn={5}>
Model type
</VSCodeDataGridCell>
<VSCodeDataGridCell cellType="columnheader" gridColumn={6}>
Input
</VSCodeDataGridCell>
<VSCodeDataGridCell cellType="columnheader" gridColumn={7}>
Output
</VSCodeDataGridCell>
<VSCodeDataGridCell cellType="columnheader" gridColumn={8}>
Kind
</VSCodeDataGridCell>
</VSCodeDataGridRow>
{externalApiUsages.map((externalApiUsage) => (
<MethodRow
key={externalApiUsage.signature}
externalApiUsage={externalApiUsage}
modeledMethod={modeledMethods[externalApiUsage.signature]}
onChange={onChange}
/>
))}
</VSCodeDataGrid>
);
};