Add grouping by package and remove usages for framework mode

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

@@ -233,6 +233,7 @@ export function DataExtensionsEditor({
             <ModeledMethodsList
               externalApiUsages={externalApiUsages}
               modeledMethods={modeledMethods}
+              mode={viewState?.mode ?? Mode.Application}
               onChange={onChange}
             />
           </EditorContainer>

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

@@ -8,6 +8,7 @@ import { ModeledMethodDataGrid } from "./ModeledMethodDataGrid";
 import { calculateModeledPercentage } from "./modeled";
 import { decimalFormatter, percentFormatter } from "./formatters";
 import { Codicon } from "../common";
+import { Mode } from "../../data-extensions-editor/shared/mode";
 
 const LibraryContainer = styled.div`
   margin-bottom: 1rem;
@@ -38,9 +39,10 @@ const StatusContainer = styled.div`
 `;
 
 type Props = {
-  libraryName: string;
+  title: string;
   externalApiUsages: ExternalApiUsage[];
   modeledMethods: Record<string, ModeledMethod>;
+  mode: Mode;
   onChange: (
     externalApiUsage: ExternalApiUsage,
     modeledMethod: ModeledMethod,
@@ -48,9 +50,10 @@ type Props = {
 };
 
 export const LibraryRow = ({
-  libraryName,
+  title,
   externalApiUsages,
   modeledMethods,
+  mode,
   onChange,
 }: Props) => {
   const modeledPercentage = useMemo(() => {
@@ -75,7 +78,7 @@ export const LibraryRow = ({
         ) : (
           <Codicon name="chevron-right" label="Expand" />
         )}
-        {libraryName}
+        {title}
         {isExpanded ? null : (
           <>
             {" "}
@@ -116,6 +119,7 @@ export const LibraryRow = ({
           <ModeledMethodDataGrid
             externalApiUsages={externalApiUsages}
             modeledMethods={modeledMethods}
+            mode={mode}
             onChange={onChange}
           />
         </>

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

@@ -17,6 +17,7 @@ import {
 } from "../../data-extensions-editor/modeled-method";
 import { KindInput } from "./KindInput";
 import { extensiblePredicateDefinitions } from "../../data-extensions-editor/predicates";
+import { Mode } from "../../data-extensions-editor/shared/mode";
 
 const Dropdown = styled(VSCodeDropdown)`
   width: 100%;
@@ -47,6 +48,7 @@ const UsagesButton = styled.button`
 type Props = {
   externalApiUsage: ExternalApiUsage;
   modeledMethod: ModeledMethod | undefined;
+  mode: Mode;
   onChange: (
     externalApiUsage: ExternalApiUsage,
     modeledMethod: ModeledMethod,
@@ -56,6 +58,7 @@ type Props = {
 export const MethodRow = ({
   externalApiUsage,
   modeledMethod,
+  mode,
   onChange,
 }: Props) => {
   const argumentsList = useMemo(() => {
@@ -165,11 +168,13 @@ export const MethodRow = ({
           {externalApiUsage.methodParameters}
         </SupportSpan>
       </VSCodeDataGridCell>
-      <VSCodeDataGridCell gridColumn={3}>
-        <UsagesButton onClick={jumpToUsage}>
-          {externalApiUsage.usages.length}
-        </UsagesButton>
-      </VSCodeDataGridCell>
+      {mode === Mode.Application && (
+        <VSCodeDataGridCell gridColumn={3}>
+          <UsagesButton onClick={jumpToUsage}>
+            {externalApiUsage.usages.length}
+          </UsagesButton>
+        </VSCodeDataGridCell>
+      )}
       <VSCodeDataGridCell gridColumn={4}>
         {(!externalApiUsage.supported ||
           (modeledMethod && modeledMethod?.type !== "none")) && (

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

@@ -8,10 +8,12 @@ import { MethodRow } from "./MethodRow";
 import { ExternalApiUsage } from "../../data-extensions-editor/external-api-usage";
 import { ModeledMethod } from "../../data-extensions-editor/modeled-method";
 import { useMemo } from "react";
+import { Mode } from "../../data-extensions-editor/shared/mode";
 
 type Props = {
   externalApiUsages: ExternalApiUsage[];
   modeledMethods: Record<string, ModeledMethod>;
+  mode: Mode;
   onChange: (
     externalApiUsage: ExternalApiUsage,
     modeledMethod: ModeledMethod,
@@ -21,6 +23,7 @@ type Props = {
 export const ModeledMethodDataGrid = ({
   externalApiUsages,
   modeledMethods,
+  mode,
   onChange,
 }: Props) => {
   const sortedExternalApiUsages = useMemo(() => {
@@ -48,9 +51,11 @@ export const ModeledMethodDataGrid = ({
         <VSCodeDataGridCell cellType="columnheader" gridColumn={2}>
           Method
         </VSCodeDataGridCell>
-        <VSCodeDataGridCell cellType="columnheader" gridColumn={3}>
-          Usages
-        </VSCodeDataGridCell>
+        {mode === Mode.Application && (
+          <VSCodeDataGridCell cellType="columnheader" gridColumn={3}>
+            Usages
+          </VSCodeDataGridCell>
+        )}
         <VSCodeDataGridCell cellType="columnheader" gridColumn={4}>
           Model type
         </VSCodeDataGridCell>
@@ -69,6 +74,7 @@ export const ModeledMethodDataGrid = ({
           key={externalApiUsage.signature}
           externalApiUsage={externalApiUsage}
           modeledMethod={modeledMethods[externalApiUsage.signature]}
+          mode={mode}
           onChange={onChange}
         />
       ))}

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

@@ -4,10 +4,12 @@ import { ExternalApiUsage } from "../../data-extensions-editor/external-api-usag
 import { ModeledMethod } from "../../data-extensions-editor/modeled-method";
 import { calculateModeledPercentage } from "./modeled";
 import { LibraryRow } from "./LibraryRow";
+import { Mode } from "../../data-extensions-editor/shared/mode";
 
 type Props = {
   externalApiUsages: ExternalApiUsage[];
   modeledMethods: Record<string, ModeledMethod>;
+  mode: Mode;
   onChange: (
     externalApiUsage: ExternalApiUsage,
     modeledMethod: ModeledMethod,
@@ -17,27 +19,30 @@ type Props = {
 export const ModeledMethodsList = ({
   externalApiUsages,
   modeledMethods,
+  mode,
   onChange,
 }: Props) => {
-  const groupedByLibrary = useMemo(() => {
+  const grouped = useMemo(() => {
     const groupedByLibrary: Record<string, ExternalApiUsage[]> = {};
 
     for (const externalApiUsage of externalApiUsages) {
-      groupedByLibrary[externalApiUsage.library] ??= [];
-      groupedByLibrary[externalApiUsage.library].push(externalApiUsage);
+      // Group by package if using framework mode
+      const key =
+        mode === Mode.Framework
+          ? externalApiUsage.packageName
+          : externalApiUsage.library;
+
+      groupedByLibrary[key] ??= [];
+      groupedByLibrary[key].push(externalApiUsage);
     }
 
     return groupedByLibrary;
-  }, [externalApiUsages]);
+  }, [externalApiUsages, mode]);
 
-  const sortedLibraryNames = useMemo(() => {
-    return Object.keys(groupedByLibrary).sort((a, b) => {
-      const supportedPercentageA = calculateModeledPercentage(
-        groupedByLibrary[a],
-      );
-      const supportedPercentageB = calculateModeledPercentage(
-        groupedByLibrary[b],
-      );
+  const sortedGroupNames = useMemo(() => {
+    return Object.keys(grouped).sort((a, b) => {
+      const supportedPercentageA = calculateModeledPercentage(grouped[a]);
+      const supportedPercentageB = calculateModeledPercentage(grouped[b]);
 
       // Sort first by supported percentage ascending
       if (supportedPercentageA > supportedPercentageB) {
@@ -47,19 +52,19 @@ export const ModeledMethodsList = ({
         return -1;
       }
 
-      const numberOfUsagesA = groupedByLibrary[a].reduce(
+      const numberOfUsagesA = grouped[a].reduce(
         (acc, curr) => acc + curr.usages.length,
         0,
       );
-      const numberOfUsagesB = groupedByLibrary[b].reduce(
+      const numberOfUsagesB = grouped[b].reduce(
         (acc, curr) => acc + curr.usages.length,
         0,
       );
 
       // If the number of usages is equal, sort by number of methods descending
       if (numberOfUsagesA === numberOfUsagesB) {
-        const numberOfMethodsA = groupedByLibrary[a].length;
-        const numberOfMethodsB = groupedByLibrary[b].length;
+        const numberOfMethodsA = grouped[a].length;
+        const numberOfMethodsB = grouped[b].length;
 
         // If the number of methods is equal, sort by library name ascending
         if (numberOfMethodsA === numberOfMethodsB) {
@@ -72,16 +77,17 @@ export const ModeledMethodsList = ({
       // Then sort by number of usages descending
       return numberOfUsagesB - numberOfUsagesA;
     });
-  }, [groupedByLibrary]);
+  }, [grouped]);
 
   return (
     <>
-      {sortedLibraryNames.map((libraryName) => (
+      {sortedGroupNames.map((libraryName) => (
         <LibraryRow
           key={libraryName}
-          libraryName={libraryName}
-          externalApiUsages={groupedByLibrary[libraryName]}
+          title={libraryName}
+          externalApiUsages={grouped[libraryName]}
           modeledMethods={modeledMethods}
+          mode={mode}
           onChange={onChange}
         />
       ))}