Switch from model accepted to model pending

This commit is contained in:
Koen Vlaswinkel
2024-02-20 14:17:25 +01:00
parent 4727e0ecab
commit 545311f26d
13 changed files with 126 additions and 133 deletions

View File

@@ -111,19 +111,19 @@ export function modeledMethodSupportsProvenance(
);
}
export function isModelAccepted(
export function isModelPending(
modeledMethod: ModeledMethod | undefined,
modelingStatus: ModelingStatus,
): boolean {
if (!modeledMethod) {
return true;
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"
);
}

View File

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

View File

@@ -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,
};

View File

@@ -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}
/>

View File

@@ -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,
});

View File

@@ -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")};
`;

View File

@@ -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";
@@ -255,88 +256,95 @@ 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,
);
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

View File

@@ -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"
/>

View File

@@ -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"
/>

View File

@@ -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"
/>

View File

@@ -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"
/>

View File

@@ -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}
/>,
);

View File

@@ -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}
/>,