Merge pull request #3379 from github/koesie10/italic-model-pending

Show auto-model negative predictions in italics

extensions/ql-vscode/src/model-editor/modeled-method.ts

@@ -111,19 +111,27 @@ export function modeledMethodSupportsProvenance(
   );
 }
 
-export function isModelAccepted(
+export function isModelPending(
   modeledMethod: ModeledMethod | undefined,
   modelingStatus: ModelingStatus,
+  processedByAutoModel?: boolean,
 ): boolean {
-  if (!modeledMethod) {
+  if (
+    (!modeledMethod || modeledMethod.type === "none") &&
+    processedByAutoModel
+  ) {
     return true;
   }
 
+  if (!modeledMethod) {
+    return false;
+  }
+
   return (
-    modelingStatus !== "unsaved" ||
+    modelingStatus === "unsaved" &&
-    modeledMethod.type === "none" ||
+    modeledMethod.type !== "none" &&
-    !modeledMethodSupportsProvenance(modeledMethod) ||
+    modeledMethodSupportsProvenance(modeledMethod) &&
-    modeledMethod.provenance !== "ai-generated"
+    modeledMethod.provenance === "ai-generated"
   );
 }
 

extensions/ql-vscode/src/stories/method-modeling/MethodModelingInputs.stories.tsx

@@ -66,5 +66,5 @@ export const ModelingNotAccepted = Template.bind({});
 ModelingNotAccepted.args = {
   method,
   modeledMethod: generatedModeledMethod,
-  modelingStatus: "unsaved",
+  modelPending: true,
 };

extensions/ql-vscode/src/view/method-modeling/MethodModelingInputs.tsx

@@ -7,7 +7,6 @@ import { ModelOutputDropdown } from "../model-editor/ModelOutputDropdown";
 import { ModelKindDropdown } from "../model-editor/ModelKindDropdown";
 import { InProgressDropdown } from "../model-editor/InProgressDropdown";
 import type { QueryLanguage } from "../../common/query-language";
-import type { ModelingStatus } from "../../model-editor/shared/modeling-status";
 
 const Container = styled.div`
   padding-top: 0.5rem;
@@ -27,7 +26,7 @@ export type MethodModelingInputsProps = {
   language: QueryLanguage;
   method: Method;
   modeledMethod: ModeledMethod | undefined;
-  modelingStatus: ModelingStatus;
+  modelPending: boolean;
   isModelingInProgress: boolean;
   onChange: (modeledMethod: ModeledMethod) => void;
 };
@@ -36,7 +35,7 @@ export const MethodModelingInputs = ({
   language,
   method,
   modeledMethod,
-  modelingStatus,
+  modelPending,
   isModelingInProgress,
   onChange,
 }: MethodModelingInputsProps): React.JSX.Element => {
@@ -44,7 +43,7 @@ export const MethodModelingInputs = ({
     language,
     method,
     modeledMethod,
-    modelingStatus,
+    modelPending,
     onChange,
   };
 

extensions/ql-vscode/src/view/method-modeling/MultipleModeledMethodsPanel.tsx

@@ -1,6 +1,7 @@
 import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import type { Method } from "../../model-editor/method";
 import type { ModeledMethod } from "../../model-editor/modeled-method";
+import { isModelPending } from "../../model-editor/modeled-method";
 import {
   canAddNewModeledMethod,
   canRemoveModeledMethod,
@@ -156,7 +157,10 @@ export const MultipleModeledMethodsPanel = ({
           language={language}
           method={method}
           modeledMethod={modeledMethods[selectedIndex]}
-          modelingStatus={modelingStatus}
+          modelPending={isModelPending(
+            modeledMethods[selectedIndex],
+            modelingStatus,
+          )}
           isModelingInProgress={isModelingInProgress}
           onChange={handleChange}
         />
@@ -165,7 +169,7 @@ export const MultipleModeledMethodsPanel = ({
           language={language}
           method={method}
           modeledMethod={undefined}
-          modelingStatus={modelingStatus}
+          modelPending={false}
           isModelingInProgress={isModelingInProgress}
           onChange={handleChange}
         />

extensions/ql-vscode/src/view/method-modeling/__tests__/MethodModelingInputs.spec.tsx

@@ -17,7 +17,7 @@ describe(MethodModelingInputs.name, () => {
   const language = QueryLanguage.Java;
   const method = createMethod();
   const modeledMethod = createSinkModeledMethod();
-  const modelingStatus = "unmodeled";
+  const modelPending = false;
   const isModelingInProgress = false;
   const onChange = jest.fn();
 
@@ -26,7 +26,7 @@ describe(MethodModelingInputs.name, () => {
       language,
       method,
       modeledMethod,
-      modelingStatus,
+      modelPending,
       isModelingInProgress,
       onChange,
     });
@@ -53,7 +53,7 @@ describe(MethodModelingInputs.name, () => {
       language,
       method,
       modeledMethod,
-      modelingStatus,
+      modelPending,
       isModelingInProgress,
       onChange,
     });
@@ -76,7 +76,7 @@ describe(MethodModelingInputs.name, () => {
       language,
       method,
       modeledMethod,
-      modelingStatus,
+      modelPending,
       isModelingInProgress,
       onChange,
     });
@@ -91,7 +91,7 @@ describe(MethodModelingInputs.name, () => {
         language={language}
         method={method}
         modeledMethod={updatedModeledMethod}
-        modelingStatus={modelingStatus}
+        modelPending={modelPending}
         isModelingInProgress={isModelingInProgress}
         onChange={onChange}
       />,
@@ -121,7 +121,7 @@ describe(MethodModelingInputs.name, () => {
       language,
       method,
       modeledMethod,
-      modelingStatus,
+      modelPending,
       isModelingInProgress: true,
       onChange,
     });

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

@@ -1,6 +1,6 @@
 import { styled } from "styled-components";
 import { Dropdown } from "../common/Dropdown";
 
-export const InputDropdown = styled(Dropdown)<{ $accepted: boolean }>`
+export const InputDropdown = styled(Dropdown)<{ $pending: boolean }>`
-  font-style: ${(props) => (props.$accepted ? "normal" : "italic")};
+  font-style: ${(props) => (props.$pending ? "italic" : "normal")};
 `;

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

@@ -16,6 +16,7 @@ import { vscode } from "../vscode-api";
 
 import type { Method } from "../../model-editor/method";
 import type { ModeledMethod } from "../../model-editor/modeled-method";
+import { isModelPending } from "../../model-editor/modeled-method";
 import { ModelKindDropdown } from "./ModelKindDropdown";
 import { Mode } from "../../model-editor/shared/mode";
 import { MethodClassifications } from "./MethodClassifications";
@@ -112,6 +113,7 @@ const ModelableMethodRow = forwardRef<HTMLElement | undefined, MethodRowProps>(
       modeledMethods: modeledMethodsProp,
       methodIsUnsaved,
       methodIsSelected,
+      processedByAutoModel,
       viewState,
       revealedMethodSignature,
       inputAccessPathSuggestions,
@@ -255,88 +257,96 @@ const ModelableMethodRow = forwardRef<HTMLElement | undefined, MethodRowProps>(
         )}
         {!props.modelingInProgress && (
           <>
-            {modeledMethods.map((modeledMethod, index) => (
+            {modeledMethods.map((modeledMethod, index) => {
-              <DataGridRow key={index} focused={focusedIndex === index}>
+              const modelPending = isModelPending(
-                <DataGridCell>
+                modeledMethod,
-                  <ModelTypeDropdown
+                modelingStatus,
-                    language={viewState.language}
+                processedByAutoModel,
-                    method={method}
+              );
-                    modeledMethod={modeledMethod}
+
-                    modelingStatus={modelingStatus}
+              return (
-                    onChange={modeledMethodChangedHandlers[index]}
+                <DataGridRow key={index} focused={focusedIndex === index}>
-                  />
+                  <DataGridCell>
-                </DataGridCell>
+                    <ModelTypeDropdown
-                <DataGridCell>
-                  {inputAccessPathSuggestions === undefined ? (
-                    <ModelInputDropdown
                       language={viewState.language}
                       method={method}
                       modeledMethod={modeledMethod}
-                      modelingStatus={modelingStatus}
+                      modelPending={modelPending}
                       onChange={modeledMethodChangedHandlers[index]}
                     />
-                  ) : (
+                  </DataGridCell>
-                    <ModelInputSuggestBox
+                  <DataGridCell>
-                      modeledMethod={modeledMethod}
+                    {inputAccessPathSuggestions === undefined ? (
-                      suggestions={inputAccessPathSuggestions}
+                      <ModelInputDropdown
-                      typePathSuggestions={outputAccessPathSuggestions ?? []}
+                        language={viewState.language}
-                      onChange={modeledMethodChangedHandlers[index]}
+                        method={method}
-                    />
+                        modeledMethod={modeledMethod}
-                  )}
+                        modelPending={modelPending}
-                </DataGridCell>
+                        onChange={modeledMethodChangedHandlers[index]}
-                <DataGridCell>
+                      />
-                  {outputAccessPathSuggestions === undefined ? (
+                    ) : (
-                    <ModelOutputDropdown
+                      <ModelInputSuggestBox
+                        modeledMethod={modeledMethod}
+                        suggestions={inputAccessPathSuggestions}
+                        typePathSuggestions={outputAccessPathSuggestions ?? []}
+                        onChange={modeledMethodChangedHandlers[index]}
+                      />
+                    )}
+                  </DataGridCell>
+                  <DataGridCell>
+                    {outputAccessPathSuggestions === undefined ? (
+                      <ModelOutputDropdown
+                        language={viewState.language}
+                        method={method}
+                        modeledMethod={modeledMethod}
+                        modelPending={modelPending}
+                        onChange={modeledMethodChangedHandlers[index]}
+                      />
+                    ) : (
+                      <ModelOutputSuggestBox
+                        modeledMethod={modeledMethod}
+                        suggestions={outputAccessPathSuggestions}
+                        onChange={modeledMethodChangedHandlers[index]}
+                      />
+                    )}
+                  </DataGridCell>
+                  <DataGridCell>
+                    <ModelKindDropdown
                       language={viewState.language}
-                      method={method}
                       modeledMethod={modeledMethod}
-                      modelingStatus={modelingStatus}
+                      modelPending={modelPending}
                       onChange={modeledMethodChangedHandlers[index]}
                     />
-                  ) : (
+                  </DataGridCell>
-                    <ModelOutputSuggestBox
+                  <DataGridCell>
-                      modeledMethod={modeledMethod}
+                    {index === 0 ? (
-                      suggestions={outputAccessPathSuggestions}
+                      <CodiconRow
-                      onChange={modeledMethodChangedHandlers[index]}
+                        appearance="icon"
-                    />
+                        aria-label="Add new model"
-                  )}
+                        onClick={(event: React.MouseEvent) => {
-                </DataGridCell>
+                          event.stopPropagation();
-                <DataGridCell>
+                          handleAddModelClick();
-                  <ModelKindDropdown
+                        }}
-                    language={viewState.language}
+                        disabled={addModelButtonDisabled}
-                    modeledMethod={modeledMethod}
+                      >
-                    modelingStatus={modelingStatus}
+                        <Codicon name="add" />
-                    onChange={modeledMethodChangedHandlers[index]}
+                      </CodiconRow>
-                  />
+                    ) : (
-                </DataGridCell>
+                      <CodiconRow
-                <DataGridCell>
+                        appearance="icon"
-                  {index === 0 ? (
+                        aria-label="Remove model"
-                    <CodiconRow
+                        onClick={(event: React.MouseEvent) => {
-                      appearance="icon"
+                          event.stopPropagation();
-                      aria-label="Add new model"
+                          removeModelClickedHandlers[index]();
-                      onClick={(event: React.MouseEvent) => {
+                        }}
-                        event.stopPropagation();
+                      >
-                        handleAddModelClick();
+                        <Codicon name="trash" />
-                      }}
+                      </CodiconRow>
-                      disabled={addModelButtonDisabled}
+                    )}
-                    >
+                  </DataGridCell>
-                      <Codicon name="add" />
+                </DataGridRow>
-                    </CodiconRow>
+              );
-                  ) : (
+            })}
-                    <CodiconRow
-                      appearance="icon"
-                      aria-label="Remove model"
-                      onClick={(event: React.MouseEvent) => {
-                        event.stopPropagation();
-                        removeModelClickedHandlers[index]();
-                      }}
-                    >
-                      <Codicon name="trash" />
-                    </CodiconRow>
-                  )}
-                </DataGridCell>
-              </DataGridRow>
-            ))}
             {validationErrors.map((error, index) => (
               <DataGridCell gridColumn="span 5" key={index}>
                 <ModeledMethodAlert

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

@@ -3,13 +3,11 @@ import { useCallback, useMemo } from "react";
 import type { ModeledMethod } from "../../model-editor/modeled-method";
 import {
   calculateNewProvenance,
-  isModelAccepted,
   modeledMethodSupportsInput,
 } from "../../model-editor/modeled-method";
 import type { Method } from "../../model-editor/method";
 import type { QueryLanguage } from "../../common/query-language";
 import { getModelsAsDataLanguage } from "../../model-editor/languages";
-import type { ModelingStatus } from "../../model-editor/shared/modeling-status";
 import { InputDropdown } from "./InputDropdown";
 import { ModelTypeTextbox } from "./ModelTypeTextbox";
 
@@ -17,7 +15,7 @@ type Props = {
   language: QueryLanguage;
   method: Method;
   modeledMethod: ModeledMethod | undefined;
-  modelingStatus: ModelingStatus;
+  modelPending: boolean;
   onChange: (modeledMethod: ModeledMethod) => void;
 };
 
@@ -25,7 +23,7 @@ export const ModelInputDropdown = ({
   language,
   method,
   modeledMethod,
-  modelingStatus,
+  modelPending,
   onChange,
 }: Props): React.JSX.Element => {
   const options = useMemo(() => {
@@ -77,14 +75,12 @@ export const ModelInputDropdown = ({
     );
   }
 
-  const modelAccepted = isModelAccepted(modeledMethod, modelingStatus);
-
   return (
     <InputDropdown
       value={value}
       options={options}
       disabled={!enabled}
-      $accepted={modelAccepted}
+      $pending={modelPending}
       onChange={handleChange}
       aria-label="Input"
     />

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

@@ -6,25 +6,23 @@ import type {
 } from "../../model-editor/modeled-method";
 import {
   modeledMethodSupportsKind,
-  isModelAccepted,
   calculateNewProvenance,
 } from "../../model-editor/modeled-method";
 import { getModelsAsDataLanguage } from "../../model-editor/languages";
 import type { QueryLanguage } from "../../common/query-language";
-import type { ModelingStatus } from "../../model-editor/shared/modeling-status";
 import { InputDropdown } from "./InputDropdown";
 
 type Props = {
   language: QueryLanguage;
   modeledMethod: ModeledMethod | undefined;
-  modelingStatus: ModelingStatus;
+  modelPending: boolean;
   onChange: (modeledMethod: ModeledMethod) => void;
 };
 
 export const ModelKindDropdown = ({
   language,
   modeledMethod,
-  modelingStatus,
+  modelPending,
   onChange,
 }: Props) => {
   const predicate = useMemo(() => {
@@ -89,14 +87,12 @@ export const ModelKindDropdown = ({
     }
   }, [modeledMethod, value, kinds, onChangeKind]);
 
-  const modelAccepted = isModelAccepted(modeledMethod, modelingStatus);
-
   return (
     <InputDropdown
       value={value}
       options={options}
       disabled={disabled}
-      $accepted={modelAccepted}
+      $pending={modelPending}
       onChange={handleChange}
       aria-label="Kind"
     />

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

@@ -3,13 +3,11 @@ import { useCallback, useMemo } from "react";
 import type { ModeledMethod } from "../../model-editor/modeled-method";
 import {
   calculateNewProvenance,
-  isModelAccepted,
   modeledMethodSupportsOutput,
 } from "../../model-editor/modeled-method";
 import type { Method } from "../../model-editor/method";
 import { getModelsAsDataLanguage } from "../../model-editor/languages";
 import type { QueryLanguage } from "../../common/query-language";
-import type { ModelingStatus } from "../../model-editor/shared/modeling-status";
 import { InputDropdown } from "./InputDropdown";
 import { ModelTypeTextbox } from "./ModelTypeTextbox";
 
@@ -17,7 +15,7 @@ type Props = {
   language: QueryLanguage;
   method: Method;
   modeledMethod: ModeledMethod | undefined;
-  modelingStatus: ModelingStatus;
+  modelPending: boolean;
   onChange: (modeledMethod: ModeledMethod) => void;
 };
 
@@ -25,7 +23,7 @@ export const ModelOutputDropdown = ({
   language,
   method,
   modeledMethod,
-  modelingStatus,
+  modelPending,
   onChange,
 }: Props): React.JSX.Element => {
   const options = useMemo(() => {
@@ -78,14 +76,12 @@ export const ModelOutputDropdown = ({
     );
   }
 
-  const modelAccepted = isModelAccepted(modeledMethod, modelingStatus);
-
   return (
     <InputDropdown
       value={value}
       options={options}
       disabled={!enabled}
-      $accepted={modelAccepted}
+      $pending={modelPending}
       onChange={handleChange}
       aria-label="Output"
     />

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

@@ -4,10 +4,7 @@ import type {
   ModeledMethod,
   ModeledMethodType,
 } from "../../model-editor/modeled-method";
-import {
+import { calculateNewProvenance } from "../../model-editor/modeled-method";
-  calculateNewProvenance,
-  isModelAccepted,
-} from "../../model-editor/modeled-method";
 import type { Method } from "../../model-editor/method";
 import { createEmptyModeledMethod } from "../../model-editor/modeled-method-empty";
 import type { Mutable } from "../../common/mutable";
@@ -15,14 +12,13 @@ import { ReadonlyDropdown } from "../common/ReadonlyDropdown";
 import type { QueryLanguage } from "../../common/query-language";
 import type { ModelsAsDataLanguagePredicates } from "../../model-editor/languages";
 import { getModelsAsDataLanguage } from "../../model-editor/languages";
-import type { ModelingStatus } from "../../model-editor/shared/modeling-status";
 import { InputDropdown } from "./InputDropdown";
 
 type Props = {
   language: QueryLanguage;
   method: Method;
   modeledMethod: ModeledMethod | undefined;
-  modelingStatus: ModelingStatus;
+  modelPending: boolean;
   onChange: (modeledMethod: ModeledMethod) => void;
 };
 
@@ -40,7 +36,7 @@ export const ModelTypeDropdown = ({
   language,
   method,
   modeledMethod,
-  modelingStatus,
+  modelPending,
   onChange,
 }: Props): React.JSX.Element => {
   const options = useMemo(() => {
@@ -114,13 +110,11 @@ export const ModelTypeDropdown = ({
     );
   }
 
-  const modelAccepted = isModelAccepted(modeledMethod, modelingStatus);
-
   return (
     <InputDropdown
       value={modeledMethod?.type ?? "none"}
       options={options}
-      $accepted={modelAccepted}
+      $pending={modelPending}
       onChange={handleChange}
       aria-label="Model type"
     />

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

@@ -24,7 +24,7 @@ describe(ModelKindDropdown.name, () => {
       <ModelKindDropdown
         language={QueryLanguage.Java}
         modeledMethod={modeledMethod}
-        modelingStatus="unsaved"
+        modelPending={false}
         onChange={onChange}
       />,
     );
@@ -47,7 +47,7 @@ describe(ModelKindDropdown.name, () => {
       <ModelKindDropdown
         language={QueryLanguage.Java}
         modeledMethod={modeledMethod}
-        modelingStatus="unsaved"
+        modelPending={false}
         onChange={onChange}
       />,
     );
@@ -64,7 +64,7 @@ describe(ModelKindDropdown.name, () => {
       <ModelKindDropdown
         language={QueryLanguage.Java}
         modeledMethod={updatedModeledMethod}
-        modelingStatus="unsaved"
+        modelPending={false}
         onChange={onChange}
       />,
     );
@@ -82,7 +82,7 @@ describe(ModelKindDropdown.name, () => {
       <ModelKindDropdown
         language={QueryLanguage.Java}
         modeledMethod={modeledMethod}
-        modelingStatus="unsaved"
+        modelPending={false}
         onChange={onChange}
       />,
     );
@@ -102,7 +102,7 @@ describe(ModelKindDropdown.name, () => {
       <ModelKindDropdown
         language={QueryLanguage.Java}
         modeledMethod={modeledMethod}
-        modelingStatus="unsaved"
+        modelPending={false}
         onChange={onChange}
       />,
     );

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

@@ -20,7 +20,7 @@ describe(ModelTypeDropdown.name, () => {
       <ModelTypeDropdown
         language={QueryLanguage.Java}
         modeledMethod={modeledMethod}
-        modelingStatus="unsaved"
+        modelPending={false}
         onChange={onChange}
         method={method}
       />,
@@ -42,7 +42,7 @@ describe(ModelTypeDropdown.name, () => {
       <ModelTypeDropdown
         language={QueryLanguage.Ruby}
         modeledMethod={modeledMethod}
-        modelingStatus="unsaved"
+        modelPending={false}
         onChange={onChange}
         method={method}
       />,
@@ -64,7 +64,7 @@ describe(ModelTypeDropdown.name, () => {
       <ModelTypeDropdown
         language={QueryLanguage.Java}
         modeledMethod={modeledMethod}
-        modelingStatus="unsaved"
+        modelPending={false}
         onChange={onChange}
         method={method}
       />,