Misc. fixes; Add Hints and Expand README

aarkue · Mar 27, 2024 · 464cf24 · 464cf24
1 parent a52af8a
commit 464cf24
Show file tree

Hide file tree

Showing 9 changed files with 121 additions and 20 deletions.
diff --git a/README.md b/README.md
@@ -1,14 +1,25 @@
-## Docker
+## Installation
+You can download the automatically cross-compiled installers for the latest release from [__github.com/aarkue/ocedeclare/releases/latest__](https://github.com/aarkue/ocedeclare/releases/latest).
 
+The following installer formats are available:
+- `[...].AppImage` for Linux (__Recommended for Linux__)
+- `[...]-setup.exe` for Windows (__Recommended for Windows__)
+- `[...].dmg` for MacOS (__Recommended for Mac__)
+- `[...].deb` for Linux (Debian)
+- `[...].msi` for Windows
+- `[...].app.tar.gz` for MacOS
 
-Note: Currently the API web server infrastructure used in the docker version only supports hardcoded included OCEL2 files.
-Make sure to include at least some of the following OCEL2 files in  `./backend/data/`: `order-management.json`, `ocel2-p2p.json`, `ContainerLogistics.json`(available at https://www.ocel-standard.org/event-logs/overview/).
+### Docker
 
-### Docker Compose
+Alternatively, you can also easily build and run the project locally using Docker.
+This will start a local web server for the backend and the frontend.
+Once the container is running, you can open [http://localhost:4567/](http://localhost:4567/) in your browser for the tool frontend.
+
+#### Docker Compose
 Run `docker compose up --build` in the project root.
 
 
-### Docker Files
+#### Docker Files
 
 - __backend__:
   1. First build using `sudo docker build ./backend -t ocedeclare-backend`
@@ -17,3 +28,5 @@ Run `docker compose up --build` in the project root.
   1. First build using `sudo docker build ./frontend -t ocedeclare-frontend`
   2. Then run with `sudo docker run --init -p 4567:4567 ocedeclare-backend`
 
+
+## Usage
diff --git a/frontend/src/routes/visual-editor/VisualEditor.tsx b/frontend/src/routes/visual-editor/VisualEditor.tsx
@@ -33,9 +33,14 @@ import {
 import { ImageIcon } from "@radix-ui/react-icons";
 import { toPng } from "html-to-image";
 import toast from "react-hot-toast";
-import { LuLayoutDashboard } from "react-icons/lu";
+import { LuLayoutDashboard, LuX } from "react-icons/lu";
 import { PiPlayFill } from "react-icons/pi";
-import { TbLogicAnd, TbRestore, TbSquarePlus } from "react-icons/tb";
+import {
+  TbLogicAnd,
+  TbRestore,
+  TbSquarePlus,
+  TbVariablePlus,
+} from "react-icons/tb";
 import "reactflow/dist/style.css";
 import type { EventTypeQualifiers, OCELInfo } from "../../types/ocel";
 import { evaluateConstraints } from "./evaluation/evaluate-constraints";
@@ -62,6 +67,7 @@ import {
 } from "./helper/types";
 import { MdClear } from "react-icons/md";
 import { BackendProviderContext } from "@/BackendProviderContext";
+import clsx from "clsx";
 
 interface VisualEditorProps {
   ocelInfo: OCELInfo;
@@ -94,6 +100,8 @@ export default function VisualEditor(props: VisualEditorProps) {
 
   const backend = useContext(BackendProviderContext);
 
+  const [hideHints, setHideHints] = useState(false);
+
   const onConnect = useCallback(
     ({ source, sourceHandle, target, targetHandle }: Edge | Connection) => {
       setEdges((eds) => {
@@ -121,7 +129,7 @@ export default function VisualEditor(props: VisualEditorProps) {
                 type: MarkerType.ArrowClosed,
                 width: 15,
                 height: 12,
-                color,
+                color: "#000000ff",
               },
               style: {
                 strokeWidth: 2,
@@ -148,7 +156,7 @@ export default function VisualEditor(props: VisualEditorProps) {
               type: MarkerType.ArrowClosed,
               width: 15,
               height: 12,
-              color,
+              color: "#000000ff",
             },
             style: {
               strokeWidth: 2,
@@ -214,6 +222,11 @@ export default function VisualEditor(props: VisualEditorProps) {
             }
             return newNodes;
           });
+          if (newData === undefined) {
+            setEdges((edges) =>
+              edges.filter((e) => e.source !== id && e.target !== id),
+            );
+          }
         },
         onEdgeDataChange: (id, newData) => {
           if (newData !== undefined) {
@@ -409,7 +422,7 @@ export default function VisualEditor(props: VisualEditorProps) {
                   instance != null
                     ? instance.screenToFlowPosition({
                         x: window.innerWidth / 2,
-                        y: window.innerHeight / 2,
+                        y: window.innerHeight / 1.5,
                       })
                     : { x: 0, y: 0 };
                 return [
@@ -529,6 +542,73 @@ export default function VisualEditor(props: VisualEditorProps) {
           </Button>
         </Panel>
         <Background />
+        {!hideHints &&
+          (objectVariables.length === 0 ||
+            nodes.length === 0 ||
+            ("selectedVariables" in nodes[0].data &&
+              nodes[0].data.selectedVariables.length === 0)) && (
+            <div className="mt-16 text-base h-fit mx-auto p-4 bg-orange-200/50 rounded-md relative z-10 w-full max-w-lg">
+              <button
+                className="absolute right-2 top-2 bg-transparent hover:bg-red-400 rounded-full p-1"
+                title="Hide hints"
+                onClick={() => {
+                  setHideHints(true);
+                }}
+              >
+                <LuX />
+              </button>
+              {objectVariables.length === 0 && (
+                <>
+                  <h2 className="text-3xl font-bold">Welcome!</h2>
+                  <p
+                    className={clsx(
+                      "text-left mt-2",
+                      objectVariables.length === 0 && "font-semibold",
+                      objectVariables.length > 0 && "text-gray-600",
+                    )}
+                  >
+                    Start by adding an object variable using the{" "}
+                    <TbVariablePlus className="inline-block" /> button above.
+                    <br />
+                    <span className="text-gray-700">
+                      e.g., <code className="text-blue-600">or_0</code> of type{" "}
+                      <code className="text-blue-600">orders</code>
+                    </span>
+                  </p>
+                </>
+              )}
+              {objectVariables.length > 0 && nodes.length === 0 && (
+                <p
+                  className={clsx(
+                    "text-left mt-2",
+                    nodes.length === 0 && "font-semibold",
+                    nodes.length > 0 && "text-gray-600",
+                  )}
+                >
+                  Great! Next, add an event filter node using the{" "}
+                  <TbSquarePlus className="inline-block" /> button above.
+                  <br />
+                  <span className="text-gray-500">
+                    e.g., for the event type{" "}
+                    <code className="text-blue-600">pay order</code>
+                  </span>
+                </p>
+              )}
+              {nodes.length > 0 && (
+                <p className={clsx("text-left mt-2 font-semibold")}>
+                  Awesome! Next, link the node with the object variable.
+                  <br />
+                  For that, select the variable from the dropdown list on the
+                  bottom of the node.
+                  <br />
+                  <span className="font-normal text-xs">
+                    If the object variable does not appear in the dropdown list,
+                    select a different node event type or variable object type.
+                  </span>
+                </p>
+              )}
+            </div>
+          )}
       </ReactFlow>
       {violationDetails !== undefined && (
         <ViolationDetailsSheet

diff --git a/frontend/src/routes/visual-editor/constraint-container/ConstraintContainer.tsx b/frontend/src/routes/visual-editor/constraint-container/ConstraintContainer.tsx
@@ -63,7 +63,7 @@ export default function ConstraintContainer({
             <div
               className="text-center flex items-center px-1 bg-slate-100 rounded-md border cursor-help text-xl font-semibold"
               key={i}
-              style={{ color: COLORS[i] }}
+              style={{ color: COLORS[i % COLORS.length] }}
               title={
                 "Type: " +
                 m.type +

diff --git a/frontend/src/routes/visual-editor/evaluation/evaluate-constraints.tsx b/frontend/src/routes/visual-editor/evaluation/evaluate-constraints.tsx
@@ -147,6 +147,13 @@ export function evaluateConstraints(
       console.warn("No source/target handle", e);
       continue;
     }
+    if (
+      treeNodes[e.source] === undefined ||
+      treeNodes[e.target] === undefined
+    ) {
+      console.warn("Invalid edge", e);
+      continue;
+    }
     if (e.data == null) {
       if (
         treeNodes[e.target] !== undefined &&
@@ -168,6 +175,7 @@ export function evaluateConstraints(
       console.warn("GateLink edge not handled yet. TODO!", e);
       continue;
     }
+    console.log(e.source, treeNodes);
     const dependencyConnection: Connection | null =
       "Event" in treeNodes[e.source].data
         ? {

diff --git a/frontend/src/routes/visual-editor/helper/QuantifiedObjectEdge.tsx b/frontend/src/routes/visual-editor/helper/QuantifiedObjectEdge.tsx
@@ -50,7 +50,7 @@ export default function QuantifiedObjectEdge({
         const index = objectVariables.findIndex(
           (v3) => v3.name === v.variable.name,
         );
-        connectedObjects.push({ color: COLORS[index] });
+        connectedObjects.push({ color: COLORS[index % COLORS.length] });
       }
     }
   }

diff --git a/frontend/src/routes/visual-editor/helper/colors.ts b/frontend/src/routes/visual-editor/helper/colors.ts
@@ -1 +1 @@
-export const COLORS = ["#e77eba", "#65d59e", "#9795ea", "#b5c45b", "#e38d5a"];
+export const COLORS = ["#d544c0", "#dea921", "#7140cb", "#dd4536", "#67c341"];
diff --git a/frontend/src/routes/visual-editor/helper/constructNodes.ts b/frontend/src/routes/visual-editor/helper/constructNodes.ts
@@ -175,7 +175,7 @@ export function constructDiscoveredEFConstraint(
             type: MarkerType.ArrowClosed,
             width: 15,
             height: 12,
-            color: "#969696",
+            color: "#000000ff",
           },
           style: {
             strokeWidth: 2,

diff --git a/frontend/src/routes/visual-editor/helper/node/EventTypeNode.tsx b/frontend/src/routes/visual-editor/helper/node/EventTypeNode.tsx
@@ -119,9 +119,9 @@ export default function EventTypeNode({
       className={`border shadow z-10 backdrop-blur flex flex-col py-2 px-0.5 rounded-md relative w-[15rem] ${
         violations !== undefined
           ? violations.violations.length > 0
-            ? "bg-red-100/70  border-red-200"
-            : "bg-emerald-100/70  border-emerald-200 "
-          : "bg-blue-100/70 border-blue-200"
+            ? "bg-red-50  border-red-200"
+            : "bg-emerald-50  border-emerald-200 "
+          : "bg-blue-50 border-blue-200"
       }`}
     >
       <Toggle
@@ -437,7 +437,7 @@ export default function EventTypeNode({
                   COLORS[
                     objectVariables.findIndex(
                       (v) => v.name === selectedVar.variable.name,
-                    )
+                    ) % COLORS.length
                   ],
               }}
             >

diff --git a/frontend/src/routes/visual-editor/outer-visual-editor/OuterVisualEditor.tsx b/frontend/src/routes/visual-editor/outer-visual-editor/OuterVisualEditor.tsx
@@ -103,7 +103,6 @@ export default function VisualEditorOuter() {
       });
   }, []);
 
-  const [activeIndex, setActiveIndex] = useState<number>();
   const prevDataRef = useRef<
     {
       flowJson: ReactFlowJsonObject<
@@ -114,6 +113,7 @@ export default function VisualEditorOuter() {
       objectVariables?: ObjectVariable[];
     }[]
   >([]);
+  const [activeIndex, setActiveIndex] = useState<number>();
   useEffect(() => {
     const meta = parse(
       localStorage.getItem(LOCALSTORAGE_SAVE_KEY_CONSTRAINTS_META) ?? "[]",
@@ -141,7 +141,6 @@ export default function VisualEditorOuter() {
 
   function changeIndex(newIndex: number, length = constraints.length) {
     if (!isNaN(newIndex) && newIndex >= 0 && newIndex < length) {
-      console.log("Change index", newIndex);
       if (
         currentInstanceAndData.instance !== undefined &&
         activeIndex !== undefined &&
@@ -242,6 +241,7 @@ export default function VisualEditorOuter() {
                       <Button
                         className="text-xl py-7 px-4"
                         onClick={() => {
+                          prevDataRef.current.splice(constraints.length, 1);
                           changeIndex(
                             constraints.length,
                             constraints.length + 1,
Original file line number	Diff line number	Diff line change
		@@ -1 +1 @@
		export const COLORS = ["#e77eba", "#65d59e", "#9795ea", "#b5c45b", "#e38d5a"];
		export const COLORS = ["#d544c0", "#dea921", "#7140cb", "#dd4536", "#67c341"];