From 09a8d29ea5b87ff621ac80afc899a81663d98c99 Mon Sep 17 00:00:00 2001
From: Robert <robertbrignull@github.com>
Date: Wed, 18 Oct 2023 15:17:07 +0100
Subject: [PATCH 1/2] Use one grid cell per input

---
 .../src/view/model-editor/MethodRow.tsx       | 61 ++++++-------------
 1 file changed, 20 insertions(+), 41 deletions(-)

diff --git a/extensions/ql-vscode/src/view/model-editor/MethodRow.tsx b/extensions/ql-vscode/src/view/model-editor/MethodRow.tsx
index 4616ad7e269..64cc72abc42 100644
--- a/extensions/ql-vscode/src/view/model-editor/MethodRow.tsx
+++ b/extensions/ql-vscode/src/view/model-editor/MethodRow.tsx
@@ -25,12 +25,6 @@ import { Codicon } from "../common";
 import { canAddNewModeledMethod } from "../../model-editor/shared/multiple-modeled-methods";
 import { DataGridCell, DataGridRow } from "../common/DataGrid";
 
-const MultiModelColumn = styled(DataGridCell)`
-  display: flex;
-  flex-direction: column;
-  gap: 0.5em;
-`;
-
 const ApiOrMethodRow = styled.div`
   min-height: calc(var(--input-height) * 1px);
   display: flex;
@@ -162,7 +156,7 @@ const ModelableMethodRow = forwardRef<HTMLElement | undefined, MethodRowProps>(
         ref={ref}
         focused={revealedMethodSignature === method.signature}
       >
-        <DataGridCell>
+        <DataGridCell gridRow={`span ${modeledMethods.length}`}>
           <ApiOrMethodRow>
             <ModelingStatusIndicator status={modelingStatus} />
             <MethodClassifications method={method} />
@@ -199,54 +193,41 @@ const ModelableMethodRow = forwardRef<HTMLElement | undefined, MethodRowProps>(
             )}
           </>
         )}
-        {!props.modelingInProgress && (
-          <>
-            <MultiModelColumn>
-              {modeledMethods.map((modeledMethod, index) => (
+        {!props.modelingInProgress &&
+          modeledMethods.map((modeledMethod, index) => (
+            <>
+              <DataGridCell>
                 <ModelTypeDropdown
-                  key={index}
                   method={method}
                   modeledMethod={modeledMethod}
                   onChange={modeledMethodChangedHandlers[index]}
                 />
-              ))}
-            </MultiModelColumn>
-            <MultiModelColumn>
-              {modeledMethods.map((modeledMethod, index) => (
+              </DataGridCell>
+              <DataGridCell>
                 <ModelInputDropdown
-                  key={index}
                   method={method}
                   modeledMethod={modeledMethod}
                   onChange={modeledMethodChangedHandlers[index]}
                 />
-              ))}
-            </MultiModelColumn>
-            <MultiModelColumn>
-              {modeledMethods.map((modeledMethod, index) => (
+              </DataGridCell>
+              <DataGridCell>
                 <ModelOutputDropdown
-                  key={index}
                   method={method}
                   modeledMethod={modeledMethod}
                   onChange={modeledMethodChangedHandlers[index]}
                 />
-              ))}
-            </MultiModelColumn>
-            <MultiModelColumn>
-              {modeledMethods.map((modeledMethod, index) => (
+              </DataGridCell>
+              <DataGridCell>
                 <ModelKindDropdown
-                  key={index}
                   method={method}
                   modeledMethod={modeledMethod}
                   onChange={modeledMethodChangedHandlers[index]}
                 />
-              ))}
-            </MultiModelColumn>
-            {viewState.showMultipleModels && (
-              <MultiModelColumn>
-                {modeledMethods.map((_, index) =>
-                  index === modeledMethods.length - 1 ? (
+              </DataGridCell>
+              {viewState.showMultipleModels && (
+                <DataGridCell>
+                  {index === modeledMethods.length - 1 ? (
                     <CodiconRow
-                      key={index}
                       appearance="icon"
                       aria-label="Add new model"
                       onClick={handleAddModelClick}
@@ -256,19 +237,17 @@ const ModelableMethodRow = forwardRef<HTMLElement | undefined, MethodRowProps>(
                     </CodiconRow>
                   ) : (
                     <CodiconRow
-                      key={index}
                       appearance="icon"
                       aria-label="Remove model"
                       onClick={removeModelClickedHandlers[index]}
                     >
                       <Codicon name="trash" />
                     </CodiconRow>
-                  ),
-                )}
-              </MultiModelColumn>
-            )}
-          </>
-        )}
+                  )}
+                </DataGridCell>
+              )}
+            </>
+          ))}
       </DataGridRow>
     );
   },

From 50f77e7918fcdb9e21c754d3a8e1605416a65ee6 Mon Sep 17 00:00:00 2001
From: Robert <robertbrignull@github.com>
Date: Thu, 19 Oct 2023 10:53:06 +0100
Subject: [PATCH 2/2] Use Fragment to add key to map output

---
 .../ql-vscode/src/view/model-editor/MethodRow.tsx   | 13 ++++++++++---
 1 file changed, 10 insertions(+), 3 deletions(-)

diff --git a/extensions/ql-vscode/src/view/model-editor/MethodRow.tsx b/extensions/ql-vscode/src/view/model-editor/MethodRow.tsx
index 64cc72abc42..1125d86c9ec 100644
--- a/extensions/ql-vscode/src/view/model-editor/MethodRow.tsx
+++ b/extensions/ql-vscode/src/view/model-editor/MethodRow.tsx
@@ -4,7 +4,14 @@ import {
   VSCodeProgressRing,
 } from "@vscode/webview-ui-toolkit/react";
 import * as React from "react";
-import { forwardRef, useCallback, useEffect, useMemo, useRef } from "react";
+import {
+  Fragment,
+  forwardRef,
+  useCallback,
+  useEffect,
+  useMemo,
+  useRef,
+} from "react";
 import { styled } from "styled-components";
 import { vscode } from "../vscode-api";
 
@@ -195,7 +202,7 @@ const ModelableMethodRow = forwardRef<HTMLElement | undefined, MethodRowProps>(
         )}
         {!props.modelingInProgress &&
           modeledMethods.map((modeledMethod, index) => (
-            <>
+            <Fragment key={index}>
               <DataGridCell>
                 <ModelTypeDropdown
                   method={method}
@@ -246,7 +253,7 @@ const ModelableMethodRow = forwardRef<HTMLElement | undefined, MethodRowProps>(
                   )}
                 </DataGridCell>
               )}
-            </>
+            </Fragment>
           ))}
       </DataGridRow>
     );