From 0149968b573ca68b1c1bee6f311ddfeb2ef163d3 Mon Sep 17 00:00:00 2001 From: timwekkenbc Date: Thu, 4 Jul 2024 12:02:53 -0700 Subject: [PATCH 1/2] Update JDM editor to latest version, Added custom component and functionality for linking rules, Updated how simulator works to comply with JDM changes --- .../LinkRuleComponent.module.css | 8 + .../RulesDecisionGraph/LinkRuleComponent.tsx | 89 + .../RulesDecisionGraph.module.css | 3 - .../RulesDecisionGraph/RulesDecisionGraph.tsx | 135 +- .../RulesDecisionGraph/SimulatorPanel.tsx | 24 + .../SimulationViewer.module.css | 4 + .../SimulationViewer/SimulationViewer.tsx | 111 +- app/rule/[ruleId]/page.tsx | 2 +- app/utils/api.ts | 2 +- package-lock.json | 2072 ++++++++++------- package.json | 3 +- 11 files changed, 1520 insertions(+), 933 deletions(-) create mode 100644 app/components/RulesDecisionGraph/LinkRuleComponent.module.css create mode 100644 app/components/RulesDecisionGraph/LinkRuleComponent.tsx delete mode 100644 app/components/RulesDecisionGraph/RulesDecisionGraph.module.css create mode 100644 app/components/RulesDecisionGraph/SimulatorPanel.tsx diff --git a/app/components/RulesDecisionGraph/LinkRuleComponent.module.css b/app/components/RulesDecisionGraph/LinkRuleComponent.module.css new file mode 100644 index 0000000..345ad05 --- /dev/null +++ b/app/components/RulesDecisionGraph/LinkRuleComponent.module.css @@ -0,0 +1,8 @@ +.ruleSelect { + min-width: 350px; + margin-bottom: 16px; +} + +.linkDrawer { + width: 85% !important; +} \ No newline at end of file diff --git a/app/components/RulesDecisionGraph/LinkRuleComponent.tsx b/app/components/RulesDecisionGraph/LinkRuleComponent.tsx new file mode 100644 index 0000000..100893d --- /dev/null +++ b/app/components/RulesDecisionGraph/LinkRuleComponent.tsx @@ -0,0 +1,89 @@ +import React, { useState, useEffect } from "react"; +import { Button, Drawer, Flex, Select, Spin } from "antd"; +import { DefaultOptionType } from "antd/es/cascader"; +import { EditOutlined } from "@ant-design/icons"; +import { GraphNode, useDecisionGraphActions, useDecisionGraphState } from "@gorules/jdm-editor"; +import type { GraphNodeProps } from "@gorules/jdm-editor"; +import { getAllRuleData } from "@/app/utils/api"; +import SimulationViewer from "../SimulationViewer"; +import styles from "./LinkRuleComponent.module.css"; + +export default function LinkRuleComponent({ specification, id, isSelected, name }: GraphNodeProps) { + const { updateNode } = useDecisionGraphActions(); + const node = useDecisionGraphState((state) => (state.decisionGraph?.nodes || []).find((n) => n.id === id)); + const goRulesJSONFilename = node?.content?.key; + + const [openRuleDrawer, setOpenRuleDrawer] = useState(false); + const [ruleOptions, setRuleOptions] = useState([]); + + useEffect(() => { + const getRuleOptions = async () => { + const ruleData = await getAllRuleData(); + setRuleOptions( + ruleData.map(({ title, goRulesJSONFilename }) => ({ + label: title || goRulesJSONFilename, + value: goRulesJSONFilename, + })) + ); + }; + if (openRuleDrawer) { + getRuleOptions(); + } + }, [openRuleDrawer]); + + const showRuleDrawer = () => { + setOpenRuleDrawer(true); + }; + + const closeRuleDrawer = () => { + setOpenRuleDrawer(false); + }; + + const onChangeSelection = (jsonFilename: string) => { + // Update the graph with the jsonFilename. We use "key" to keep in line with how goRules handing linking rules + updateNode(id, (draft) => { + draft.content = { key: jsonFilename }; + return draft; + }); + }; + + const getShortFilenameOnly = (filepath: string, maxLength: number = 25) => { + const filepathSections = filepath.split("/"); + const filename = filepathSections[filepathSections.length - 1]; + return filename.length > maxLength ? `${filename.substring(0, maxLength - 3)}...` : filename; + }; + + return ( + + + + {ruleOptions ? ( + <> + +