Renamed and reorganized components to be easier to understand, Direct…

…ly navigate to rule manager page so there is no delay on load, Rename main page

app/components/RuleManager/RuleManager.module.css

@@ -0,0 +1,8 @@
+.rulesWrapper {
+  min-height: 500px;
+  border: 1px solid #d9d9d9;
+}
+
+.spinner {
+  min-height: 500px;
+}

app/components/SimulationViewer/SimulationViewer.tsx → app/components/RuleManager/RuleManager.tsx

@@ -1,39 +1,35 @@
 "use client";
 import React, { useState, useEffect } from "react";
 import dynamic from "next/dynamic";
-import { Flex, Button, Spin, Tabs, message } from "antd";
-import type { TabsProps } from "antd";
+import { Flex, Spin, message } from "antd";
 import { Simulation, DecisionGraphType } from "@gorules/jdm-editor";
 import { postDecision, getRuleMap } from "../../utils/api";
 import { RuleInfo } from "@/app/types/ruleInfo";
 import { RuleMap } from "@/app/types/rulemap";
 import { Scenario } from "@/app/types/scenario";
 import { DEFAULT_RULE_CONTENT } from "@/app/constants/defaultRuleContent";
-import ScenarioViewer from "../ScenarioViewer/ScenarioViewer";
-import ScenarioGenerator from "../ScenarioGenerator/ScenarioGenerator";
-import ScenarioTester from "../ScenarioTester/ScenarioTester";
 import SavePublish from "../SavePublish";
-import ScenarioCSV from "../ScenarioCSV/ScenarioCSV";
-import styles from "./SimulationViewer.module.css";
+import ScenariosManager from "../ScenariosManager";
+import styles from "./RuleManager.module.css";
 
 // Need to disable SSR when loading this component so it works properly
-const RulesDecisionGraph = dynamic(() => import("../RulesDecisionGraph"), { ssr: false });
+const RuleViewerEditor = dynamic(() => import("../RuleViewerEditor"), { ssr: false });
 
-interface SimulationViewerProps {
+interface RuleManagerProps {
   ruleInfo: RuleInfo;
   scenarios?: Scenario[];
   initialRuleContent?: DecisionGraphType;
   editing?: boolean;
   showAllScenarioTabs?: boolean;
 }
 
-export default function SimulationViewer({
+export default function RuleManager({
   ruleInfo,
   scenarios,
   initialRuleContent = DEFAULT_RULE_CONTENT,
   editing = true,
   showAllScenarioTabs = true,
-}: SimulationViewerProps) {
+}: RuleManagerProps) {
   const { _id: ruleId, goRulesJSONFilename: jsonFile } = ruleInfo;
   const createRuleMap = (array: any[] = [], preExistingContext?: Record<string, any>) => {
     return array.reduce(
@@ -54,7 +50,6 @@ export default function SimulationViewer({
   const [simulation, setSimulation] = useState<Simulation>();
   const [simulationContext, setSimulationContext] = useState<Record<string, any>>();
   const [resultsOfSimulation, setResultsOfSimulation] = useState<Record<string, any> | null>();
-  const [resetTrigger, setResetTrigger] = useState<boolean>(false);
 
   useEffect(() => {
     setRuleContent(initialRuleContent);
@@ -120,91 +115,6 @@ export default function SimulationViewer({
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [simulationContext]);
 
-  const handleTabChange = (key: string) => {
-    handleReset();
-  };
-
-  const handleReset = () => {
-    setSimulationContext({});
-    setTimeout(() => {
-      const ruleMapInputs = createRuleMap(rulemap?.inputs);
-      setSimulationContext(ruleMapInputs);
-    }, 0);
-    setResetTrigger((prev) => !prev);
-  };
-
-  const scenarioTab = scenarios && rulemap && (
-    <Flex gap="small" vertical>
-      <ScenarioViewer
-        scenarios={scenarios}
-        setSimulationContext={setSimulationContext}
-        resultsOfSimulation={resultsOfSimulation}
-        runSimulation={runSimulation}
-        rulemap={rulemap}
-        editing={editing}
-      />
-    </Flex>
-  );
-
-  const scenarioGeneratorTab = scenarios && rulemap && ruleId && (
-    <Flex gap="small " className={styles.scenarioGeneratorTab}>
-      <ScenarioGenerator
-        scenarios={scenarios}
-        simulationContext={simulationContext}
-        setSimulationContext={setSimulationContext}
-        resultsOfSimulation={resultsOfSimulation}
-        runSimulation={runSimulation}
-        resetTrigger={resetTrigger}
-        ruleId={ruleId}
-        jsonFile={jsonFile}
-        rulemap={rulemap}
-        editing={editing}
-      />
-      <Button onClick={handleReset} size="large" type="primary">
-        Reset ↻
-      </Button>
-    </Flex>
-  );
-
-  const scenarioTestsTab = (
-    <Flex gap="small">
-      <ScenarioTester jsonFile={jsonFile} ruleContent={ruleContent} />
-    </Flex>
-  );
-
-  const csvScenarioTestsTab = (
-    <Flex gap="small">
-      <ScenarioCSV jsonFile={jsonFile} ruleContent={ruleContent} />
-    </Flex>
-  );
-
-  const items: TabsProps["items"] = [
-    {
-      key: "1",
-      label: "Simulate scenarios",
-      children: scenarioTab,
-      disabled: false,
-    },
-    {
-      key: "2",
-      label: "Simulate manual inputs",
-      children: scenarioGeneratorTab,
-      disabled: false,
-    },
-    {
-      key: "3",
-      label: "Scenario Results",
-      children: scenarioTestsTab,
-      disabled: !showAllScenarioTabs,
-    },
-    {
-      key: "4",
-      label: "CSV Tests",
-      children: csvScenarioTestsTab,
-      disabled: !showAllScenarioTabs,
-    },
-  ];
-
   if (!ruleContent) {
     return (
       <Spin tip="Loading graph..." size="large" className={styles.spinner}>
@@ -213,13 +123,11 @@ export default function SimulationViewer({
     );
   }
 
-  const filteredItems = showAllScenarioTabs ? items : items?.filter((item) => item.disabled !== true) || [];
-
   return (
     <Flex gap="large" vertical>
       <div className={styles.rulesWrapper}>
         {editing && <SavePublish ruleInfo={ruleInfo} ruleContent={ruleContent} />}
-        <RulesDecisionGraph
+        <RuleViewerEditor
           jsonFilename={jsonFile}
           ruleContent={ruleContent}
           setRuleContent={setRuleContent}
@@ -231,16 +139,20 @@ export default function SimulationViewer({
         />
       </div>
       {scenarios && rulemap && (
-        <Flex justify="space-between" align="center" className={styles.contentSection}>
-          <Flex gap="middle" justify="space-between">
-            <Tabs
-              className={styles.tabs}
-              defaultActiveKey={showAllScenarioTabs ? "3" : "1"}
-              items={filteredItems}
-              onChange={handleTabChange}
-            ></Tabs>
-          </Flex>
-        </Flex>
+        <ScenariosManager
+          ruleId={ruleId}
+          jsonFile={jsonFile}
+          ruleContent={ruleContent}
+          rulemap={rulemap}
+          scenarios={scenarios}
+          isEditing={editing}
+          showAllScenarioTabs={showAllScenarioTabs}
+          createRuleMap={createRuleMap}
+          setSimulationContext={setSimulationContext}
+          simulationContext={simulationContext}
+          runSimulation={runSimulation}
+          resultsOfSimulation={resultsOfSimulation}
+        />
       )}
     </Flex>
   );

app/components/RuleManager/index.ts

@@ -0,0 +1 @@
+export { default } from "./RuleManager";

app/components/RulesDecisionGraph/RulesDecisionGraph.tsx → app/components/RuleViewerEditor/RuleViewerEditor.tsx

@@ -12,12 +12,12 @@ import {
 } from "@gorules/jdm-editor";
 import { ApartmentOutlined, PlayCircleOutlined } from "@ant-design/icons";
 import { Scenario, Variable } from "@/app/types/scenario";
-import LinkRuleComponent from "./LinkRuleComponent";
-import SimulatorPanel from "./SimulatorPanel";
+import LinkRuleComponent from "./subcomponents/LinkRuleComponent";
+import SimulatorPanel from "./subcomponents/SimulatorPanel";
 import { downloadFileBlob } from "@/app/utils/utils";
 import { getScenariosByFilename } from "../../utils/api";
 
-interface RulesViewerProps {
+interface RuleViewerEditorProps {
   jsonFilename: string;
   ruleContent: DecisionGraphType;
   setRuleContent: (updateGraph: DecisionGraphType) => void;
@@ -28,7 +28,7 @@ interface RulesViewerProps {
   isEditable?: boolean;
 }
 
-export default function RulesDecisionGraph({
+export default function RuleViewerEditor({
   jsonFilename,
   ruleContent,
   setRuleContent,
@@ -37,7 +37,7 @@ export default function RulesDecisionGraph({
   simulation,
   runSimulation,
   isEditable = true,
-}: RulesViewerProps) {
+}: RuleViewerEditorProps) {
   const decisionGraphRef: any = useRef<DecisionGraphRef>();
   const [reactFlowRef, setReactFlowRef] = useState<ReactFlowInstance>();
 

app/components/RuleViewerEditor/index.ts

@@ -0,0 +1 @@
+export { default } from "./RuleViewerEditor";

app/components/RulesDecisionGraph/LinkRuleComponent.tsx → app/components/RuleViewerEditor/subcomponents/LinkRuleComponent.tsx

@@ -5,7 +5,7 @@ import { EditOutlined } from "@ant-design/icons";
 import { GraphNode, useDecisionGraphActions, useDecisionGraphState } from "@gorules/jdm-editor";
 import type { DecisionGraphType, GraphNodeProps } from "@gorules/jdm-editor";
 import { getAllRuleData, getDocument } from "@/app/utils/api";
-import SimulationViewer from "../SimulationViewer";
+import RuleManager from "../../RuleManager";
 import styles from "./LinkRuleComponent.module.css";
 
 interface LinkRuleComponent extends GraphNodeProps {
@@ -92,7 +92,7 @@ export default function LinkRuleComponent({ specification, id, isSelected, name,
               <Button onClick={closeRuleDrawer}>Done</Button>
             </Flex>
             {goRulesJSONFilename && (
-              <SimulationViewer
+              <RuleManager
                 ruleInfo={{ _id: id, goRulesJSONFilename }}
                 initialRuleContent={selectedRuleContent}
                 editing={false}

app/components/ScenarioFormatter/ScenarioFormatter.tsx → app/components/ScenariosManager/ScenarioFormatter/ScenarioFormatter.tsx

@@ -3,8 +3,8 @@ import { Table, Button } from "antd";
 import { Scenario } from "@/app/types/scenario";
 import styles from "./ScenarioFormatter.module.css";
 import { RuleMap } from "@/app/types/rulemap";
-import InputStyler from "../InputStyler/InputStyler";
-import { parseSchemaTemplate } from "../InputStyler/ArrayFormatter";
+import InputStyler from "../../InputStyler/InputStyler";
+import { parseSchemaTemplate } from "../../InputStyler/ArrayFormatter";
 
 const COLUMNS = [
   {

app/components/ScenarioGenerator/ScenarioGenerator.tsx → app/components/ScenariosManager/ScenarioGenerator/ScenarioGenerator.tsx

@@ -1,6 +1,6 @@
 import React, { useState, useEffect } from "react";
 import { Flex, Button, Input } from "antd";
-import InputOutputTable from "../InputOutputTable";
+import InputOutputTable from "../../InputOutputTable";
 import { Scenario } from "@/app/types/scenario";
 import { createScenario } from "@/app/utils/api";
 import { RuleMap } from "@/app/types/rulemap";

app/components/ScenarioTester/ScenarioTester.tsx → app/components/ScenariosManager/ScenarioTester/ScenarioTester.tsx

@@ -4,7 +4,7 @@ import { CheckCircleOutlined, CloseCircleOutlined, RightCircleOutlined, DownCirc
 import { DecisionGraphType } from "@gorules/jdm-editor";
 import styles from "./ScenarioTester.module.css";
 import { runDecisionsForScenarios } from "@/app/utils/api";
-import useResponsiveSize from "../../hooks/ScreenSizeHandler";
+import useResponsiveSize from "@/app/hooks/ScreenSizeHandler";
 interface ScenarioTesterProps {
   jsonFile: string;
   ruleContent?: DecisionGraphType;

app/components/ScenarioViewer/ScenarioViewer.tsx → app/components/ScenariosManager/ScenarioViewer/ScenarioViewer.tsx

@@ -2,7 +2,7 @@ import React, { useState, useEffect } from "react";
 import { Flex, Button, Popconfirm, message, Pagination } from "antd";
 import type { PopconfirmProps } from "antd";
 import { DeleteOutlined } from "@ant-design/icons";
-import InputOutputTable from "../InputOutputTable";
+import InputOutputTable from "@/app/components/InputOutputTable";
 import styles from "./ScenarioViewer.module.css";
 import { Scenario } from "@/app/types/scenario";
 import { deleteScenario } from "@/app/utils/api";

app/components/SimulationViewer/SimulationViewer.module.css → app/components/ScenariosManager/ScenariosManager.module.css

@@ -1,21 +1,7 @@
-.rulesWrapper {
-  min-height: 500px;
-  border: 1px solid #d9d9d9;
-}
-
 .contentSection {
   margin: "0 8px";
 }
 
-.inputSection button {
-  width: 10rem;
-}
-
-.spinner {
-  min-height: 500px;
-
-}
-
 .tabs {
   width: 100%;
 }