Group modeled methods by library

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

@@ -15,7 +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";
+import { ModeledMethodsList } from "./ModeledMethodsList";
 
 const DataExtensionsEditorContainer = styled.div`
   margin-top: 1rem;
@@ -231,7 +231,7 @@ export function DataExtensionsEditor({
                 </>
               )}
             </ButtonsContainer>
-            <ModeledMethodDataGrid
+            <ModeledMethodsList
               externalApiUsages={externalApiUsages}
               modeledMethods={modeledMethods}
               onChange={onChange}

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

@@ -0,0 +1,55 @@
+import * as React from "react";
+import { useMemo } from "react";
+import styled from "styled-components";
+import { ExternalApiUsage } from "../../data-extensions-editor/external-api-usage";
+import { ModeledMethod } from "../../data-extensions-editor/modeled-method";
+import { ModeledMethodDataGrid } from "./ModeledMethodDataGrid";
+
+const LibraryContainer = styled.div`
+  margin-bottom: 1rem;
+`;
+
+type Props = {
+  externalApiUsages: ExternalApiUsage[];
+  modeledMethods: Record<string, ModeledMethod>;
+  onChange: (
+    externalApiUsage: ExternalApiUsage,
+    modeledMethod: ModeledMethod,
+  ) => void;
+};
+
+export const ModeledMethodsList = ({
+  externalApiUsages,
+  modeledMethods,
+  onChange,
+}: Props) => {
+  const groupedByLibrary = useMemo(() => {
+    const groupedByLibrary: Record<string, ExternalApiUsage[]> = {};
+
+    for (const externalApiUsage of externalApiUsages) {
+      groupedByLibrary[externalApiUsage.library] ??= [];
+      groupedByLibrary[externalApiUsage.library].push(externalApiUsage);
+    }
+
+    return groupedByLibrary;
+  }, [externalApiUsages]);
+
+  const sortedLibraryNames = useMemo(() => {
+    return Object.keys(groupedByLibrary).sort();
+  }, [groupedByLibrary]);
+
+  return (
+    <>
+      {sortedLibraryNames.map((libraryName) => (
+        <LibraryContainer key={libraryName}>
+          <h3>{libraryName}</h3>
+          <ModeledMethodDataGrid
+            externalApiUsages={groupedByLibrary[libraryName]}
+            modeledMethods={modeledMethods}
+            onChange={onChange}
+          />
+        </LibraryContainer>
+      ))}
+    </>
+  );
+};