Availability of simulator

[divyeshk31]

Unable to simulate the graph because the option is not visible in the open-source code. How can I enable it?

[ivanmiletic]

We will provide documentation soon, for now you can take a look how to enable simulator in the story:

https://github.com/gorules/jdm-editor/blob/master/packages/jdm-editor/src/components/decision-graph/dg.stories.tsx

You will need to pass trace to the decision graph as well

[ranakapil071996]

Thank you for your assistance, @ivanmiletic.

I have implemented the provided code, and the simulator is now visible in the UI. However, I am encountering an issue where running the simulator does not yield any response. Could you please assist me in resolving this issue?

Additionally, I need guidance on how to pass trace in decision graph. I have attached the input JSON file for the decision graph for your reference.
graph25.json

input json for simulator:

{
  loan: {
    applicantAge: 70,
    tenure: 24,
    cibil: 660,
    pincode: 521001,
  },
}

App.js code
import "./App.css";
import React, { useRef, useState } from "react";
import "@gorules/jdm-editor/dist/style.css";
import {
  DecisionGraph,
  JdmConfigProvider,
  GraphSimulator,
  GraphNode,
  createJdmNode,
} from "@gorules/jdm-editor";
import { PlayCircleOutlined } from "@ant-design/icons";
import json5 from "json5";

function App() {
  const [value, setValue] = useState();
  const ref = useRef(null);
  const panels = [
    {
      id: "simulator",
      title: "Simulator",
      icon: <PlayCircleOutlined />,
      renderPanel: () => (
        <GraphSimulator
          defaultRequest={json5.stringify(
            {
              age: 20,
            },
            null,
            2
          )}
          onChange={(val) => {
            console.log(val);
          }}
          onRun={(payload) => {
            console.log(payload);
          }}
          onClear={() => {}}
        />
      ),
    },
  ];

  return (
    <div style={{ height: "100%" }}>
      <JdmConfigProvider>
        <DecisionGraph
          ref={ref}
          value={value}
          onChange={(val) => setValue(val)}
          panels={panels}
          defaultActivePanel={"simulator"}
          onPanelsChange={(val) => {
            console.log(val);
          }}
        />
      </JdmConfigProvider>
    </div>
  );
}
export default App;

[justin0108]

hi @ranakapil071996 ,

Can I confirm when you say simulator does not yield any response do you mean

onRun={(payload) => {
  console.log(payload);
}}

nothing is printed on the console? Or this is just a sample code for onRun? You need to run pass the input to the engine and run it in your onRun function.

If you indeed did run the engine, I notice in your <DecisionGraph>, you did not pass in the trace. ie

<DecisionGraph
  ref={ref}
  value={value}
  onChange={(val) => setValue(val)}
  panels={panels}
  defaultActivePanel={"simulator"}
  simulate={YOUR_ENGINE_TRACE_RESULT_FROM_ON_RUN}   <-------
  onPanelsChange={(val) => {
    console.log(val);
  }}
/>

[divyeshk31]

@stefan-gorules @ivanmiletic can you please help?

[ivanmiletic]

Hi @divyeshk31 this is not something that we can tackle at least this week as we have priorities for our Enterprise customers

[Gabrieltay]

hi @ranakapil071996
I noticed your GraphSimulator.onRun not invoking the Zen Engine

import {
  DecisionGraph,
  JdmConfigProvider,
  GraphSimulator,
  GraphNode,
  createJdmNode,
  Simulation,
  SimulationOk
} from "@gorules/jdm-editor";

function App() {
  const [value, setValue] = useState();
  const [graphTrace, setGraphTrace] = useState<Simulation>();
  const ref = useRef(null);
  const panels = [
    {
      id: "simulator",
      title: "Simulator",
      icon: <PlayCircleOutlined />,
      renderPanel: () => (
        <GraphSimulator
          defaultRequest={json5.stringify(
            {
              age: 20,
            },
            null,
            2
          )}
          onChange={(val) => {
            console.log(val);
          }}
          onRun={({ graph, context }) => {
            // invoke the ZEN engine
            const result = yourZenEngine.evaluate(graph, context);
            setGraphTrace({result})
          }}
          onClear={() => {}}
        />
      ),
    },
  ];

  return (
    <div style={{ height: "100%" }}>
      <JdmConfigProvider>
        <DecisionGraph
          ref={ref}
          value={value}
          onChange={(val) => setValue(val)}
          simulate={graphTrace}
          panels={panels}
          defaultActivePanel={"simulator"}
          onPanelsChange={(val) => {
            console.log(val);
          }}
        />
      </JdmConfigProvider>
    </div>
  );
}
export default App;