Make gridRow and gridColumn optional

extensions/ql-vscode/src/view/common/DataGrid.tsx

@@ -48,17 +48,17 @@ export const DataGridRow = styled.div<{ $focused?: boolean }>`
 `;
 
 const StyledDataGridCell = styled.div<{
-  $gridRow: string | number;
-  $gridColumn: string | number;
+  $gridRow?: string | number;
+  $gridColumn?: string | number;
 }>`
-  grid-row: ${(props) => props.$gridRow};
-  grid-column: ${(props) => props.$gridColumn};
+  ${({ $gridRow }) => ($gridRow ? `grid-row: ${$gridRow};` : "")}
+  ${({ $gridColumn }) => ($gridColumn ? `grid-column: ${$gridColumn};` : "")}
   padding: 4px 12px;
 `;
 
 interface DataGridCellProps {
-  gridRow: string | number;
-  gridColumn: string | number;
+  gridRow?: string | number;
+  gridColumn?: string | number;
   className?: string;
   children: React.ReactNode;
 }

extensions/ql-vscode/src/view/model-editor/HiddenMethodsRow.tsx

@@ -9,14 +9,12 @@ const HiddenMethodsText = styled(DataGridCell)`
 `;
 
 interface Props {
-  gridRow: number;
   numHiddenMethods: number;
   someMethodsAreVisible: boolean;
   viewState: ModelEditorViewState;
 }
 
 export function HiddenMethodsRow({
-  gridRow,
   numHiddenMethods,
   someMethodsAreVisible,
   viewState,
@@ -29,7 +27,7 @@ export function HiddenMethodsRow({
 
   return (
     <DataGridRow>
-      <HiddenMethodsText gridRow={gridRow} gridColumn={gridColumn}>
+      <HiddenMethodsText gridColumn={gridColumn}>
         {someMethodsAreVisible && "And "}
         {pluralize(numHiddenMethods, "method", "methods")} modeled in other
         CodeQL packs

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

@@ -63,7 +63,6 @@ const CodiconRow = styled(VSCodeButton)`
 `;
 
 export type MethodRowProps = {
-  gridRow: number;
   method: Method;
   methodCanBeModeled: boolean;
   modeledMethods: ModeledMethod[];
@@ -98,7 +97,6 @@ export const MethodRow = (props: MethodRowProps) => {
 const ModelableMethodRow = forwardRef<HTMLElement | undefined, MethodRowProps>(
   (props, ref) => {
     const {
-      gridRow,
       method,
       modeledMethods: modeledMethodsProp,
       methodIsUnsaved,
@@ -164,7 +162,7 @@ const ModelableMethodRow = forwardRef<HTMLElement | undefined, MethodRowProps>(
         ref={ref}
         $focused={revealedMethodSignature === method.signature}
       >
-        <DataGridCell gridRow={gridRow} gridColumn={1}>
+        <DataGridCell>
           <ApiOrMethodRow>
             <ModelingStatusIndicator status={modelingStatus} />
             <MethodClassifications method={method} />
@@ -180,20 +178,20 @@ const ModelableMethodRow = forwardRef<HTMLElement | undefined, MethodRowProps>(
         </DataGridCell>
         {props.modelingInProgress && (
           <>
-            <DataGridCell gridRow={gridRow} gridColumn={2}>
+            <DataGridCell>
               <InProgressDropdown />
             </DataGridCell>
-            <DataGridCell gridRow={gridRow} gridColumn={3}>
+            <DataGridCell>
               <InProgressDropdown />
             </DataGridCell>
-            <DataGridCell gridRow={gridRow} gridColumn={4}>
+            <DataGridCell>
               <InProgressDropdown />
             </DataGridCell>
-            <DataGridCell gridRow={gridRow} gridColumn={5}>
+            <DataGridCell>
               <InProgressDropdown />
             </DataGridCell>
             {viewState.showMultipleModels && (
-              <DataGridCell gridRow={gridRow} gridColumn={6}>
+              <DataGridCell>
                 <CodiconRow appearance="icon" disabled={true}>
                   <Codicon name="add" label="Add new model" />
                 </CodiconRow>
@@ -203,7 +201,7 @@ const ModelableMethodRow = forwardRef<HTMLElement | undefined, MethodRowProps>(
         )}
         {!props.modelingInProgress && (
           <>
-            <MultiModelColumn gridRow={gridRow} gridColumn={2}>
+            <MultiModelColumn>
               {modeledMethods.map((modeledMethod, index) => (
                 <ModelTypeDropdown
                   key={index}
@@ -213,7 +211,7 @@ const ModelableMethodRow = forwardRef<HTMLElement | undefined, MethodRowProps>(
                 />
               ))}
             </MultiModelColumn>
-            <MultiModelColumn gridRow={gridRow} gridColumn={3}>
+            <MultiModelColumn>
               {modeledMethods.map((modeledMethod, index) => (
                 <ModelInputDropdown
                   key={index}
@@ -223,7 +221,7 @@ const ModelableMethodRow = forwardRef<HTMLElement | undefined, MethodRowProps>(
                 />
               ))}
             </MultiModelColumn>
-            <MultiModelColumn gridRow={gridRow} gridColumn={4}>
+            <MultiModelColumn>
               {modeledMethods.map((modeledMethod, index) => (
                 <ModelOutputDropdown
                   key={index}
@@ -233,7 +231,7 @@ const ModelableMethodRow = forwardRef<HTMLElement | undefined, MethodRowProps>(
                 />
               ))}
             </MultiModelColumn>
-            <MultiModelColumn gridRow={gridRow} gridColumn={5}>
+            <MultiModelColumn>
               {modeledMethods.map((modeledMethod, index) => (
                 <ModelKindDropdown
                   key={index}
@@ -244,7 +242,7 @@ const ModelableMethodRow = forwardRef<HTMLElement | undefined, MethodRowProps>(
               ))}
             </MultiModelColumn>
             {viewState.showMultipleModels && (
-              <MultiModelColumn gridRow={gridRow} gridColumn={6}>
+              <MultiModelColumn>
                 {modeledMethods.map((_, index) =>
                   index === modeledMethods.length - 1 ? (
                     <CodiconRow
@@ -281,7 +279,7 @@ const UnmodelableMethodRow = forwardRef<
   HTMLElement | undefined,
   MethodRowProps
 >((props, ref) => {
-  const { gridRow, method, viewState, revealedMethodSignature } = props;
+  const { method, viewState, revealedMethodSignature } = props;
 
   const jumpToMethod = useCallback(
     () => sendJumpToMethodMessage(method),
@@ -294,7 +292,7 @@ const UnmodelableMethodRow = forwardRef<
       ref={ref}
       $focused={revealedMethodSignature === method.signature}
     >
-      <DataGridCell gridRow={gridRow} gridColumn={1}>
+      <DataGridCell>
         <ApiOrMethodRow>
           <ModelingStatusIndicator status="saved" />
           <MethodName {...props.method} />
@@ -307,9 +305,7 @@ const UnmodelableMethodRow = forwardRef<
           <MethodClassifications method={method} />
         </ApiOrMethodRow>
       </DataGridCell>
-      <DataGridCell gridRow={gridRow} gridColumn="span 4">
-        Method already modeled
-      </DataGridCell>
+      <DataGridCell gridColumn="span 4">Method already modeled</DataGridCell>
     </DataGridRow>
   );
 });

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

@@ -71,23 +71,13 @@ export const ModeledMethodDataGrid = ({
     <DataGrid gridTemplateColumns={gridTemplateColumns}>
       {someMethodsAreVisible && (
         <>
-          <DataGridCell gridRow={1} gridColumn={1}>
-            API or method
-          </DataGridCell>
-          <DataGridCell gridRow={1} gridColumn={2}>
-            Model type
-          </DataGridCell>
-          <DataGridCell gridRow={1} gridColumn={3}>
-            Input
-          </DataGridCell>
-          <DataGridCell gridRow={1} gridColumn={4}>
-            Output
-          </DataGridCell>
-          <DataGridCell gridRow={1} gridColumn={5}>
-            Kind
-          </DataGridCell>
+          <DataGridCell>API or method</DataGridCell>
+          <DataGridCell>Model type</DataGridCell>
+          <DataGridCell>Input</DataGridCell>
+          <DataGridCell>Output</DataGridCell>
+          <DataGridCell>Kind</DataGridCell>
           {viewState.showMultipleModels && (
-            <DataGridCell gridRow={1} gridColumn={6}>
+            <DataGridCell>
               <ScreenReaderOnly>Add or remove models</ScreenReaderOnly>
             </DataGridCell>
           )}
@@ -97,7 +87,6 @@ export const ModeledMethodDataGrid = ({
               return (
                 <MethodRow
                   key={method.signature}
-                  gridRow={index + 2}
                   method={method}
                   methodCanBeModeled={methodCanBeModeled}
                   modeledMethods={modeledMethods}
@@ -113,7 +102,6 @@ export const ModeledMethodDataGrid = ({
         </>
       )}
       <HiddenMethodsRow
-        gridRow={methodsWithModelability.length + 2}
         numHiddenMethods={numHiddenMethods}
         someMethodsAreVisible={someMethodsAreVisible}
         viewState={viewState}

extensions/ql-vscode/src/view/model-editor/__tests__/HiddenMethodsRow.spec.tsx

@@ -18,7 +18,6 @@ describe(HiddenMethodsRow.name, () => {
   it("does not render with 0 hidden methods", () => {
     const { container } = render(
       <HiddenMethodsRow
-        gridRow={1}
         numHiddenMethods={0}
         someMethodsAreVisible={true}
         viewState={viewState}
@@ -31,7 +30,6 @@ describe(HiddenMethodsRow.name, () => {
   it("renders with 1 hidden methods and no visible methods", () => {
     render(
       <HiddenMethodsRow
-        gridRow={1}
         numHiddenMethods={1}
         someMethodsAreVisible={false}
         viewState={viewState}
@@ -46,7 +44,6 @@ describe(HiddenMethodsRow.name, () => {
   it("renders with 1 hidden methods and visible methods", () => {
     render(
       <HiddenMethodsRow
-        gridRow={1}
         numHiddenMethods={1}
         someMethodsAreVisible={true}
         viewState={viewState}
@@ -61,7 +58,6 @@ describe(HiddenMethodsRow.name, () => {
   it("renders with 3 hidden methods and no visible methods", () => {
     render(
       <HiddenMethodsRow
-        gridRow={1}
         numHiddenMethods={3}
         someMethodsAreVisible={false}
         viewState={viewState}
@@ -76,7 +72,6 @@ describe(HiddenMethodsRow.name, () => {
   it("renders with 3 hidden methods and visible methods", () => {
     render(
       <HiddenMethodsRow
-        gridRow={1}
         numHiddenMethods={3}
         someMethodsAreVisible={true}
         viewState={viewState}

extensions/ql-vscode/src/view/model-editor/__tests__/MethodRow.spec.tsx

@@ -45,7 +45,6 @@ describe(MethodRow.name, () => {
   const render = (props: Partial<MethodRowProps> = {}) =>
     reactRender(
       <MethodRow
-        gridRow={1}
         method={method}
         methodCanBeModeled={true}
         modeledMethods={[modeledMethod]}