From 487c0a66f42b603f977c70ff839e0ec08f7671b2 Mon Sep 17 00:00:00 2001
From: Koen Vlaswinkel <koesie10@github.com>
Date: Mon, 19 Jun 2023 11:33:45 +0200
Subject: [PATCH] Create ModeledMethodDataGrid component

---
 .../DataExtensionsEditor.tsx                  | 84 ++++++-------------
 .../ModeledMethodDataGrid.tsx                 | 63 ++++++++++++++
 2 files changed, 89 insertions(+), 58 deletions(-)
 create mode 100644 extensions/ql-vscode/src/view/data-extensions-editor/ModeledMethodDataGrid.tsx

diff --git a/extensions/ql-vscode/src/view/data-extensions-editor/DataExtensionsEditor.tsx b/extensions/ql-vscode/src/view/data-extensions-editor/DataExtensionsEditor.tsx
index 6d9f1c0e8..37e0910bd 100644
--- a/extensions/ql-vscode/src/view/data-extensions-editor/DataExtensionsEditor.tsx
+++ b/extensions/ql-vscode/src/view/data-extensions-editor/DataExtensionsEditor.tsx
@@ -4,16 +4,10 @@ import {
   ShowProgressMessage,
   ToDataExtensionsEditorMessage,
 } from "../../pure/interface-types";
-import {
-  VSCodeButton,
-  VSCodeDataGrid,
-  VSCodeDataGridCell,
-  VSCodeDataGridRow,
-} from "@vscode/webview-ui-toolkit/react";
+import { VSCodeButton } from "@vscode/webview-ui-toolkit/react";
 import styled from "styled-components";
 import { ExternalApiUsage } from "../../data-extensions-editor/external-api-usage";
 import { ModeledMethod } from "../../data-extensions-editor/modeled-method";
-import { MethodRow } from "./MethodRow";
 import { assertNever } from "../../pure/helpers-pure";
 import { vscode } from "../vscode-api";
 import { calculateModeledPercentage } from "./modeled";
@@ -21,6 +15,7 @@ import { LinkIconButton } from "../variant-analysis/LinkIconButton";
 import { basename } from "../common/path";
 import { ViewTitle } from "../common";
 import { DataExtensionEditorViewState } from "../../data-extensions-editor/shared/view-state";
+import { ModeledMethodDataGrid } from "./ModeledMethodDataGrid";
 
 const DataExtensionsEditorContainer = styled.div`
   margin-top: 1rem;
@@ -42,6 +37,12 @@ const EditorContainer = styled.div`
   margin-top: 1rem;
 `;
 
+const ButtonsContainer = styled.div`
+  display: flex;
+  gap: 0.4em;
+  margin-bottom: 1rem;
+`;
+
 type ProgressBarProps = {
   completion: number;
 };
@@ -217,57 +218,24 @@ export function DataExtensionsEditor({
           </DetailsContainer>
 
           <EditorContainer>
-            <VSCodeButton onClick={onApplyClick}>Apply</VSCodeButton>
-            &nbsp;
-            <VSCodeButton onClick={onGenerateClick}>
-              Download and generate
-            </VSCodeButton>
-            {viewState?.showLlmButton && (
-              <>
-                &nbsp;
-                <VSCodeButton onClick={onGenerateFromLlmClick}>
-                  Generate using LLM
-                </VSCodeButton>
-              </>
-            )}
-            <br />
-            <br />
-            <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>
+            <ButtonsContainer>
+              <VSCodeButton onClick={onApplyClick}>Apply</VSCodeButton>
+              <VSCodeButton onClick={onGenerateClick}>
+                Download and generate
+              </VSCodeButton>
+              {viewState?.showLlmButton && (
+                <>
+                  <VSCodeButton onClick={onGenerateFromLlmClick}>
+                    Generate using LLM
+                  </VSCodeButton>
+                </>
+              )}
+            </ButtonsContainer>
+            <ModeledMethodDataGrid
+              externalApiUsages={externalApiUsages}
+              modeledMethods={modeledMethods}
+              onChange={onChange}
+            />
           </EditorContainer>
         </>
       )}
diff --git a/extensions/ql-vscode/src/view/data-extensions-editor/ModeledMethodDataGrid.tsx b/extensions/ql-vscode/src/view/data-extensions-editor/ModeledMethodDataGrid.tsx
new file mode 100644
index 000000000..7851607fe
--- /dev/null
+++ b/extensions/ql-vscode/src/view/data-extensions-editor/ModeledMethodDataGrid.tsx
@@ -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>
+  );
+};