Extract "ModelEvaluation" component (#3432)

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

@@ -3,7 +3,6 @@ import type { ToModelEditorMessage } from "../../common/interface-types";
 import {
   VSCodeButton,
   VSCodeCheckbox,
-  VSCodeProgressRing,
   VSCodeTag,
 } from "@vscode/webview-ui-toolkit/react";
 import { styled } from "styled-components";
@@ -21,7 +20,7 @@ import { getLanguageDisplayName } from "../../common/query-language";
 import { INITIAL_HIDE_MODELED_METHODS_VALUE } from "../../model-editor/shared/hide-modeled-methods";
 import type { AccessPathSuggestionOptions } from "../../model-editor/suggestions";
 import type { ModelEvaluationRunState } from "../../model-editor/shared/model-evaluation-run-state";
-import { modelEvaluationRunIsRunning } from "../../model-editor/shared/model-evaluation-run-state";
+import { ModelEvaluation } from "./ModelEvaluation";
 
 const LoadingContainer = styled.div`
   text-align: center;
@@ -77,57 +76,6 @@ const ButtonsContainer = styled.div`
   margin-top: 1rem;
 `;
 
-const ProgressRing = styled(VSCodeProgressRing)`
-  width: 16px;
-  height: 16px;
-  margin-right: 5px;
-`;
-
-const ModelEvaluation = ({
-  viewState,
-  modeledMethods,
-  modifiedSignatures,
-  onStartEvaluation,
-  onStopEvaluation,
-  evaluationRun,
-}: {
-  viewState: ModelEditorViewState;
-  modeledMethods: Record<string, ModeledMethod[]>;
-  modifiedSignatures: Set<string>;
-  onStartEvaluation: () => void;
-  onStopEvaluation: () => void;
-  evaluationRun: ModelEvaluationRunState | undefined;
-}) => {
-  if (!viewState.showEvaluationUi) {
-    return null;
-  }
-
-  if (!evaluationRun || !modelEvaluationRunIsRunning(evaluationRun)) {
-    const customModelsExist = Object.values(modeledMethods).some(
-      (methods) => methods.filter((m) => m.type !== "none").length > 0,
-    );
-
-    const unsavedChanges = modifiedSignatures.size > 0;
-
-    return (
-      <VSCodeButton
-        onClick={onStartEvaluation}
-        appearance="secondary"
-        disabled={!customModelsExist || unsavedChanges}
-      >
-        Evaluate
-      </VSCodeButton>
-    );
-  } else {
-    return (
-      <VSCodeButton onClick={onStopEvaluation} appearance="secondary">
-        <ProgressRing />
-        Stop evaluation
-      </VSCodeButton>
-    );
-  }
-};
-
 type Props = {
   initialViewState?: ModelEditorViewState;
   initialMethods?: Method[];

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

@@ -0,0 +1,8 @@
+import { VSCodeProgressRing } from "@vscode/webview-ui-toolkit/react";
+import { styled } from "styled-components";
+
+export const ModelEditorProgressRing = styled(VSCodeProgressRing)`
+  width: 16px;
+  height: 16px;
+  margin-right: 5px;
+`;

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

@@ -0,0 +1,53 @@
+import { VSCodeButton } from "@vscode/webview-ui-toolkit/react";
+import type { ModeledMethod } from "../../model-editor/modeled-method";
+import type { ModelEditorViewState } from "../../model-editor/shared/view-state";
+import type { ModelEvaluationRunState } from "../../model-editor/shared/model-evaluation-run-state";
+import { modelEvaluationRunIsRunning } from "../../model-editor/shared/model-evaluation-run-state";
+import { ModelEditorProgressRing } from "./ModelEditorProgressRing";
+
+type Props = {
+  viewState: ModelEditorViewState;
+  modeledMethods: Record<string, ModeledMethod[]>;
+  modifiedSignatures: Set<string>;
+  onStartEvaluation: () => void;
+  onStopEvaluation: () => void;
+  evaluationRun: ModelEvaluationRunState | undefined;
+};
+
+export const ModelEvaluation = ({
+  viewState,
+  modeledMethods,
+  modifiedSignatures,
+  onStartEvaluation,
+  onStopEvaluation,
+  evaluationRun,
+}: Props) => {
+  if (!viewState.showEvaluationUi) {
+    return null;
+  }
+
+  if (!evaluationRun || !modelEvaluationRunIsRunning(evaluationRun)) {
+    const customModelsExist = Object.values(modeledMethods).some(
+      (methods) => methods.filter((m) => m.type !== "none").length > 0,
+    );
+
+    const unsavedChanges = modifiedSignatures.size > 0;
+
+    return (
+      <VSCodeButton
+        onClick={onStartEvaluation}
+        appearance="secondary"
+        disabled={!customModelsExist || unsavedChanges}
+      >
+        Evaluate
+      </VSCodeButton>
+    );
+  } else {
+    return (
+      <VSCodeButton onClick={onStopEvaluation} appearance="secondary">
+        <ModelEditorProgressRing />
+        Stop evaluation
+      </VSCodeButton>
+    );
+  }
+};