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

Show auto-model negative predictions in italics
2024-02-21 09:55:29 +01:00 · 2024-02-21 09:55:29 +01:00 · 3d2d86bf6e
--- a/extensions/ql-vscode/src/model-editor/modeled-method.ts
+++ b/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" ||
-    modeledMethod.type === "none" ||
-    !modeledMethodSupportsProvenance(modeledMethod) ||
-    modeledMethod.provenance !== "ai-generated"
+    modelingStatus === "unsaved" &&
+    modeledMethod.type !== "none" &&
+    modeledMethodSupportsProvenance(modeledMethod) &&
+    modeledMethod.provenance === "ai-generated"
  );
 }

--- a/extensions/ql-vscode/src/stories/method-modeling/MethodModelingInputs.stories.tsx
+++ b/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,
 };
--- a/extensions/ql-vscode/src/view/method-modeling/MethodModelingInputs.tsx
+++ b/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,
  };

--- a/extensions/ql-vscode/src/view/method-modeling/MultipleModeledMethodsPanel.tsx
+++ b/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}
        />
--- a/extensions/ql-vscode/src/view/method-modeling/tests/MethodModelingInputs.spec.tsx
+++ b/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,
    });
--- a/extensions/ql-vscode/src/view/model-editor/InputDropdown.tsx
+++ b/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 }>`
-  font-style: ${(props) => (props.$accepted ? "normal" : "italic")};
+export const InputDropdown = styled(Dropdown)<{ $pending: boolean }>`
+  font-style: ${(props) => (props.$pending ? "italic" : "normal")};
 `;
--- a/extensions/ql-vscode/src/view/model-editor/MethodRow.tsx
+++ b/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) => (
-              <DataGridRow key={index} focused={focusedIndex === index}>
-                <DataGridCell>
-                  <ModelTypeDropdown
-                    language={viewState.language}
-                    method={method}
-                    modeledMethod={modeledMethod}
-                    modelingStatus={modelingStatus}
-                    onChange={modeledMethodChangedHandlers[index]}
-                  />
-                </DataGridCell>
-                <DataGridCell>
-                  {inputAccessPathSuggestions === undefined ? (
-                    <ModelInputDropdown
+            {modeledMethods.map((modeledMethod, index) => {
+              const modelPending = isModelPending(
+                modeledMethod,
+                modelingStatus,
+                processedByAutoModel,
+              );
+
+              return (
+                <DataGridRow key={index} focused={focusedIndex === index}>
+                  <DataGridCell>
+                    <ModelTypeDropdown
                      language={viewState.language}
                      method={method}
                      modeledMethod={modeledMethod}
-                      modelingStatus={modelingStatus}
+                      modelPending={modelPending}
                      onChange={modeledMethodChangedHandlers[index]}
                    />
-                  ) : (
-                    <ModelInputSuggestBox
-                      modeledMethod={modeledMethod}
-                      suggestions={inputAccessPathSuggestions}
-                      typePathSuggestions={outputAccessPathSuggestions ?? []}
-                      onChange={modeledMethodChangedHandlers[index]}
-                    />
-                  )}
-                </DataGridCell>
-                <DataGridCell>
-                  {outputAccessPathSuggestions === undefined ? (
-                    <ModelOutputDropdown
+                  </DataGridCell>
+                  <DataGridCell>
+                    {inputAccessPathSuggestions === undefined ? (
+                      <ModelInputDropdown
+                        language={viewState.language}
+                        method={method}
+                        modeledMethod={modeledMethod}
+                        modelPending={modelPending}
+                        onChange={modeledMethodChangedHandlers[index]}
+                      />
+                    ) : (
+                      <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]}
                    />
-                  ) : (
-                    <ModelOutputSuggestBox
-                      modeledMethod={modeledMethod}
-                      suggestions={outputAccessPathSuggestions}
-                      onChange={modeledMethodChangedHandlers[index]}
-                    />
-                  )}
-                </DataGridCell>
-                <DataGridCell>
-                  <ModelKindDropdown
-                    language={viewState.language}
-                    modeledMethod={modeledMethod}
-                    modelingStatus={modelingStatus}
-                    onChange={modeledMethodChangedHandlers[index]}
-                  />
-                </DataGridCell>
-                <DataGridCell>
-                  {index === 0 ? (
-                    <CodiconRow
-                      appearance="icon"
-                      aria-label="Add new model"
-                      onClick={(event: React.MouseEvent) => {
-                        event.stopPropagation();
-                        handleAddModelClick();
-                      }}
-                      disabled={addModelButtonDisabled}
-                    >
-                      <Codicon name="add" />
-                    </CodiconRow>
-                  ) : (
-                    <CodiconRow
-                      appearance="icon"
-                      aria-label="Remove model"
-                      onClick={(event: React.MouseEvent) => {
-                        event.stopPropagation();
-                        removeModelClickedHandlers[index]();
-                      }}
-                    >
-                      <Codicon name="trash" />
-                    </CodiconRow>
-                  )}
-                </DataGridCell>
-              </DataGridRow>
-            ))}
+                  </DataGridCell>
+                  <DataGridCell>
+                    {index === 0 ? (
+                      <CodiconRow
+                        appearance="icon"
+                        aria-label="Add new model"
+                        onClick={(event: React.MouseEvent) => {
+                          event.stopPropagation();
+                          handleAddModelClick();
+                        }}
+                        disabled={addModelButtonDisabled}
+                      >
+                        <Codicon name="add" />
+                      </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
--- a/extensions/ql-vscode/src/view/model-editor/ModelInputDropdown.tsx
+++ b/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"
    />
--- a/extensions/ql-vscode/src/view/model-editor/ModelKindDropdown.tsx
+++ b/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"
    />
--- a/extensions/ql-vscode/src/view/model-editor/ModelOutputDropdown.tsx
+++ b/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"
    />
--- a/extensions/ql-vscode/src/view/model-editor/ModelTypeDropdown.tsx
+++ b/extensions/ql-vscode/src/view/model-editor/ModelTypeDropdown.tsx
@ -4,10 +4,7 @@ import type {
  ModeledMethod,
  ModeledMethodType,
 } from "../../model-editor/modeled-method";
-import {
-  calculateNewProvenance,
-  isModelAccepted,
-} from "../../model-editor/modeled-method";
+import { calculateNewProvenance } 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"
    />
--- a/extensions/ql-vscode/src/view/model-editor/tests/ModelKindDropdown.spec.tsx
+++ b/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}
      />,
    );
--- a/extensions/ql-vscode/src/view/model-editor/tests/ModelTypeDropdown.spec.tsx
+++ b/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}
      />,