kie-issues#1527: DMN Editor: Create new overlay option 'Highlight eva…

…luation results' (apache#2657)
rhkp · Dec 10, 2024 · cc75f9b · cc75f9b
1 parent 820b1c7
commit cc75f9b
Show file tree

Hide file tree

Showing 6 changed files with 142 additions and 66 deletions.
diff --git a/packages/dmn-editor/src/DmnEditor.css b/packages/dmn-editor/src/DmnEditor.css
@@ -395,6 +395,12 @@
 }
 /* (end) autolayout panel toggle */
 
+/* (begin) evaluation-highlights panel toggle */
+.kie-dmn-editor--evaluation-highlights-panel-toggle {
+  min-width: 190px;
+}
+/* (end) evaluation-highlights panel toggle */
+
 /* (begin) overlays panel toggle */
 .kie-dmn-editor--overlays-panel-toggle {
   width: 42px;

diff --git a/packages/dmn-editor/src/boxedExpressions/BoxedExpressionScreen.tsx b/packages/dmn-editor/src/boxedExpressions/BoxedExpressionScreen.tsx
@@ -81,6 +81,7 @@ import { useDmnEditorStore, useDmnEditorStoreApi } from "../store/StoreContext";
 import { getDefaultColumnWidth } from "./getDefaultColumnWidth";
 import { getDefaultBoxedExpression } from "./getDefaultBoxedExpression";
 import { useSettings } from "../settings/DmnEditorSettingsContext";
+import { EvaluationHighlightsBadge } from "../evaluationHighlights/EvaluationHighlightsBadge";
 
 export function BoxedExpressionScreen({ container }: { container: React.RefObject<HTMLElement> }) {
   const { externalModelsByNamespace } = useExternalModels();
@@ -361,24 +362,28 @@ export function BoxedExpressionScreen({ container }: { container: React.RefObjec
             </Flex>
           </FlexItem>
 
-          <aside
-            className={"kie-dmn-editor--properties-panel-toggle"}
-            style={{ visibility: isPropertiesPanelOpen ? "hidden" : undefined }}
-          >
-            <button
-              className={"kie-dmn-editor--properties-panel-toggle-button"}
-              title={"Properties panel"}
-              onClick={() => {
-                dmnEditorStoreApi.setState((state) => {
-                  state.boxedExpressionEditor.propertiesPanel.isOpen =
-                    !state.boxedExpressionEditor.propertiesPanel.isOpen;
-                });
-              }}
+          <Flex>
+            <EvaluationHighlightsBadge />
+            <aside
+              className={"kie-dmn-editor--properties-panel-toggle"}
+              style={{ visibility: isPropertiesPanelOpen ? "hidden" : undefined }}
             >
-              <InfoIcon size={"sm"} />
-            </button>
-          </aside>
+              <button
+                className={"kie-dmn-editor--properties-panel-toggle-button"}
+                title={"Properties panel"}
+                onClick={() => {
+                  dmnEditorStoreApi.setState((state) => {
+                    state.boxedExpressionEditor.propertiesPanel.isOpen =
+                      !state.boxedExpressionEditor.propertiesPanel.isOpen;
+                  });
+                }}
+              >
+                <InfoIcon size={"sm"} />
+              </button>
+            </aside>
+          </Flex>
         </Flex>
+
         <div style={{ flexGrow: 1 }}>
           <BoxedExpressionEditor
             beeGwtService={beeGwtService}

diff --git a/packages/dmn-editor/src/diagram/Diagram.tsx b/packages/dmn-editor/src/diagram/Diagram.tsx
@@ -126,6 +126,8 @@ import { autoGenerateDrd } from "../normalization/autoGenerateDrd";
 import OptimizeIcon from "@patternfly/react-icons/dist/js/icons/optimize-icon";
 import { applyAutoLayoutToDrd } from "../mutations/applyAutoLayoutToDrd";
 import { useSettings } from "../settings/DmnEditorSettingsContext";
+import { EvaluationHighlightsBadge } from "../evaluationHighlights/EvaluationHighlightsBadge";
+import { Flex } from "@patternfly/react-core/dist/js/layouts/Flex";
 
 const isFirefox = typeof (window as any).InstallTrigger !== "undefined"; // See https://stackoverflow.com/questions/9847580/how-to-detect-safari-chrome-ie-firefox-and-opera-browsers
 
@@ -1707,45 +1709,48 @@ export function TopRightCornerPanels({ availableHeight }: TopRightCornerPanelsPr
 
   return (
     <>
-      <RF.Panel position={"top-right"} style={{ display: "flex" }}>
-        {!settings.isReadOnly && (
-          <aside className={"kie-dmn-editor--autolayout-panel-toggle"}>
-            <AutolayoutButton />
-          </aside>
-        )}
-        <aside className={"kie-dmn-editor--overlays-panel-toggle"}>
-          <Popover
-            className={"kie-dmn-editor--overlay-panel-popover"}
-            key={`${diagram.overlaysPanel.isOpen}`}
-            aria-label="Overlays Panel"
-            position={"bottom-end"}
-            enableFlip={false}
-            flipBehavior={["bottom-end"]}
-            hideOnOutsideClick={false}
-            showClose={false}
-            isVisible={diagram.overlaysPanel.isOpen}
-            bodyContent={<OverlaysPanel availableHeight={(availableHeight ?? 0) - AREA_ABOVE_OVERLAYS_PANEL} />}
-          >
-            <button
-              className={"kie-dmn-editor--overlays-panel-toggle-button"}
-              onClick={toggleOverlaysPanel}
-              title={"Overlays"}
-            >
-              <VirtualMachineIcon size={"sm"} />
-            </button>
-          </Popover>
-        </aside>
-        {!diagram.propertiesPanel.isOpen && (
-          <aside className={"kie-dmn-editor--properties-panel-toggle"}>
-            <button
-              className={"kie-dmn-editor--properties-panel-toggle-button"}
-              onClick={togglePropertiesPanel}
-              title={"Properties panel"}
+      <RF.Panel position={"top-right"}>
+        <Flex>
+          {diagram.overlays.enableEvaluationHighlights && <EvaluationHighlightsBadge />}
+          {!settings.isReadOnly && (
+            <aside className={"kie-dmn-editor--autolayout-panel-toggle"}>
+              <AutolayoutButton />
+            </aside>
+          )}
+          <aside className={"kie-dmn-editor--overlays-panel-toggle"}>
+            <Popover
+              className={"kie-dmn-editor--overlay-panel-popover"}
+              key={`${diagram.overlaysPanel.isOpen}`}
+              aria-label="Overlays Panel"
+              position={"bottom-end"}
+              enableFlip={false}
+              flipBehavior={["bottom-end"]}
+              hideOnOutsideClick={false}
+              showClose={false}
+              isVisible={diagram.overlaysPanel.isOpen}
+              bodyContent={<OverlaysPanel availableHeight={(availableHeight ?? 0) - AREA_ABOVE_OVERLAYS_PANEL} />}
             >
-              <InfoIcon size={"sm"} />
-            </button>
+              <button
+                className={"kie-dmn-editor--overlays-panel-toggle-button"}
+                onClick={toggleOverlaysPanel}
+                title={"Overlays"}
+              >
+                <VirtualMachineIcon size={"sm"} />
+              </button>
+            </Popover>
           </aside>
-        )}
+          {!diagram.propertiesPanel.isOpen && (
+            <aside className={"kie-dmn-editor--properties-panel-toggle"}>
+              <button
+                className={"kie-dmn-editor--properties-panel-toggle-button"}
+                onClick={togglePropertiesPanel}
+                title={"Properties panel"}
+              >
+                <InfoIcon size={"sm"} />
+              </button>
+            </aside>
+          )}
+        </Flex>
       </RF.Panel>
     </>
   );

diff --git a/packages/dmn-editor/src/evaluationHighlights/EvaluationHighlightsBadge.tsx b/packages/dmn-editor/src/evaluationHighlights/EvaluationHighlightsBadge.tsx
@@ -0,0 +1,45 @@
+/*
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License.  You may obtain a copy of the License at
+ *
+ *  http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+import * as React from "react";
+import { useDmnEditorStore, useDmnEditorStoreApi } from "../store/StoreContext";
+import { Label } from "@patternfly/react-core/dist/js/components/Label";
+import { OffIcon, OnIcon } from "@patternfly/react-icons/dist/js/icons";
+
+export function EvaluationHighlightsBadge() {
+  const dmnEditorStoreApi = useDmnEditorStoreApi();
+  const isEvaluationHighlightsEnabled = useDmnEditorStore((s) => s.diagram.overlays.enableEvaluationHighlights);
+
+  return (
+    <aside className={"kie-dmn-editor--evaluation-highlights-panel-toggle"}>
+      <Label
+        icon={isEvaluationHighlightsEnabled ? <OnIcon /> : <OffIcon />}
+        color={isEvaluationHighlightsEnabled ? "green" : "grey"}
+        onClick={() => {
+          dmnEditorStoreApi.setState((state) => {
+            state.diagram.overlays.enableEvaluationHighlights = !state.diagram.overlays.enableEvaluationHighlights;
+          });
+        }}
+        title={"Evaluation highlights"}
+      >
+        Evaluation highlights: {dmnEditorStoreApi.getState().diagram.overlays.enableEvaluationHighlights ? "on" : "off"}
+      </Label>
+    </aside>
+  );
+}
diff --git a/packages/dmn-editor/src/overlaysPanel/OverlaysPanel.tsx b/packages/dmn-editor/src/overlaysPanel/OverlaysPanel.tsx
@@ -24,6 +24,9 @@ import { Divider } from "@patternfly/react-core/dist/js/components/Divider";
 import { Slider } from "@patternfly/react-core/dist/js/components/Slider";
 import { useDmnEditorStore, useDmnEditorStoreApi } from "../store/StoreContext";
 import { useLayoutEffect, useRef } from "react";
+import { Icon } from "@patternfly/react-core/dist/js/components/Icon";
+import { Tooltip } from "@patternfly/react-core/dist/js/components/Tooltip";
+import { HelpIcon } from "@patternfly/react-icons/dist/js/icons/help-icon";
 
 const MIN_SNAP = 5;
 const MAX_SNAP = 50;
@@ -115,17 +118,6 @@ export function OverlaysPanel({ availableHeight }: OverlaysPanelProps) {
       <Form
         onKeyDown={(e) => e.stopPropagation()} // Prevent ReactFlow KeyboardShortcuts from triggering when editing stuff on Overlays Panel
       >
-        {/* <FormGroup label={"Highlight execution hits"}>
-          <Switch
-            aria-label={"Highlight execution hits"}
-            isChecked={diagram.overlays.enableExecutionHitsHighlights}
-            onChange={(newValue) =>
-              dmnEditorStoreApi.setState((state) => {
-                state.diagram.overlays.enableExecutionHitsHighlights = newValue;
-              })
-            }
-          />
-        </FormGroup> */}
         <FormGroup label={"Highlight selected node(s) hierarchy"}>
           <Switch
             aria-label={"Highlight selected node(s) hierarchy"}
@@ -159,6 +151,29 @@ export function OverlaysPanel({ availableHeight }: OverlaysPanelProps) {
             }
           />
         </FormGroup>
+        <FormGroup
+          label={"Enable evaluation highlights"}
+          labelIcon={
+            <Tooltip
+              content={
+                "Enable highlighting Decision Table rules and Boxed Conditional Expression branches based on evaluation results, also showing success/error status badges on Decision nodes."
+              }
+            >
+              <Icon size="sm" status="info">
+                <HelpIcon />
+              </Icon>
+            </Tooltip>
+          }
+        >
+          <Switch
+            isChecked={diagram.overlays.enableEvaluationHighlights}
+            onChange={(newValue) =>
+              dmnEditorStoreApi.setState((state) => {
+                state.diagram.overlays.enableEvaluationHighlights = newValue;
+              })
+            }
+          />
+        </FormGroup>
       </Form>
     </div>
   );

diff --git a/packages/dmn-editor/src/store/Store.ts b/packages/dmn-editor/src/store/Store.ts
@@ -107,9 +107,9 @@ export interface State {
     openLhsPanel: DiagramLhsPanel;
     overlays: {
       enableNodeHierarchyHighlight: boolean;
-      enableExecutionHitsHighlights: boolean;
       enableDataTypesToolbarOnNodes: boolean;
       enableCustomNodeStyles: boolean;
+      enableEvaluationHighlights: boolean;
     };
     snapGrid: SnapGrid;
     _selectedNodes: Array<string>;
@@ -214,9 +214,9 @@ export const defaultStaticState = (): Omit<State, "dmn" | "dispatch" | "computed
     openLhsPanel: DiagramLhsPanel.NONE,
     overlays: {
       enableNodeHierarchyHighlight: false,
-      enableExecutionHitsHighlights: false,
       enableCustomNodeStyles: true,
       enableDataTypesToolbarOnNodes: true,
+      enableEvaluationHighlights: false,
     },
     snapGrid: {
       isEnabled: true,