kie-issues#1527: DMN Editor: Create new overlay option 'Highlight evaluation results'

packages/dmn-editor/src/DmnEditor.css

@@ -395,6 +395,40 @@
 }
 /* (end) autolayout panel toggle */
 
+/* (begin) evaluation-highlights panel toggle */
+.kie-dmn-editor--evaluation-highlights-panel-toggle {
+  border-radius: 40px;
+}
+.kie-dmn-editor--evaluation-highlights-panel-toggle:not(:last-child) {
+  margin-right: 16px;
+}
+
+.kie-dmn-editor--evaluation-highlights-panel-toggle:hover {
+  box-shadow: -4px 4px 2px 0px rgb(127 127 127);
+}
+.kie-dmn-editor--evaluation-highlights-panel-toggle-button,
+.kie-dmn-editor--evaluation-highlights-panel-toggle-button-off {
+  margin: 0;
+  height: 40px;
+  border-radius: 40px;
+  border: 0;
+}
+.kie-dmn-editor--evaluation-highlights-panel-toggle-button {
+  background: white;
+  border: 1px solid black;
+}
+.kie-dmn-editor--evaluation-highlights-panel-toggle-button-off {
+  background: var(--pf-global--palette--black-150);
+  border: 1px solid var(--pf-global--BorderColor--100);
+}
+.kie-dmn-editor--evaluation-highlights-panel-toggle-button:hover {
+  filter: brightness(95%);
+}
+.kie-dmn-editor--evaluation-highlights-panel-toggle-button:active {
+  filter: brightness(90%);
+}
+/* (end) evaluation-highlights panel toggle */
+
 /* (begin) overlays panel toggle */
 .kie-dmn-editor--overlays-panel-toggle {
   width: 42px;

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();
@@ -319,6 +320,8 @@ export function BoxedExpressionScreen({ container }: { container: React.RefObjec
     return NodeIcon({ nodeType, isAlternativeInputDataShape });
   }, [drgElement, isAlternativeInputDataShape]);
 
+  const isEvaluationHighlights = useDmnEditorStore((s) => s.diagram.overlays.evaluationHighlights);
+
   return (
     <>
       <>
@@ -361,24 +364,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}

packages/dmn-editor/src/diagram/Diagram.tsx

@@ -126,6 +126,7 @@ 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";
 
 const isFirefox = typeof (window as any).InstallTrigger !== "undefined"; // See https://stackoverflow.com/questions/9847580/how-to-detect-safari-chrome-ie-firefox-and-opera-browsers
 
@@ -1708,6 +1709,7 @@ export function TopRightCornerPanels({ availableHeight }: TopRightCornerPanelsPr
   return (
     <>
       <RF.Panel position={"top-right"} style={{ display: "flex" }}>
+        {diagram.overlays.evaluationHighlights && <EvaluationHighlightsBadge />}
         {!settings.isReadOnly && (
           <aside className={"kie-dmn-editor--autolayout-panel-toggle"}>
             <AutolayoutButton />

packages/dmn-editor/src/evaluationHighlights/EvaluationHighlightsBadge.tsx

@@ -0,0 +1,46 @@
+/*
+ * 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";
+
+export function EvaluationHighlightsBadge() {
+  const dmnEditorStoreApi = useDmnEditorStoreApi();
+  const isEvaluationHighlights = useDmnEditorStore((s) => s.diagram.overlays.evaluationHighlights);
+
+  return (
+    <aside className={"kie-dmn-editor--evaluation-highlights-panel-toggle"}>
+      <button
+        className={
+          isEvaluationHighlights
+            ? "kie-dmn-editor--evaluation-highlights-panel-toggle-button"
+            : "kie-dmn-editor--evaluation-highlights-panel-toggle-button-off"
+        }
+        onClick={() => {
+          dmnEditorStoreApi.setState((state) => {
+            state.diagram.overlays.evaluationHighlights = !state.diagram.overlays.evaluationHighlights;
+          });
+        }}
+        title={"Evaluation highlights (beta)"}
+      >
+        Evaluation Highlights: {dmnEditorStoreApi.getState().diagram.overlays.evaluationHighlights ? "On" : "Off"}
+      </button>
+    </aside>
+  );
+}

packages/dmn-editor/src/overlaysPanel/OverlaysPanel.tsx

@@ -24,6 +24,8 @@
 import { Slider } from "@patternfly/react-core/dist/js/components/Slider";
 import { useDmnEditorStore, useDmnEditorStoreApi } from "../store/StoreContext";
 import { useLayoutEffect, useRef } from "react";
+import { Icon, Tooltip } from "@patternfly/react-core";
+import { HelpIcon } from "@patternfly/react-icons";
 
 const MIN_SNAP = 5;
 const MAX_SNAP = 50;
@@ -159,6 +161,27 @@
             }
           />
         </FormGroup>
+        <FormGroup
+          label={"Enable evaluation highlights"}
+          labelIcon={
+            <Tooltip
+              content={"Enable evaluation highlights on nodes(decisions?), decision tables and conditional expressions"}
+            >
+              <Icon size="sm" status="info">
+                <HelpIcon />
+              </Icon>
+            </Tooltip>
+          }
+        >
+          <Switch
+            isChecked={diagram.overlays.evaluationHighlights}
+            onChange={(newValue) =>
+              dmnEditorStoreApi.setState((state) => {
+                state.diagram.overlays.evaluationHighlights = newValue;
+              })
+            }
+          />
+        </FormGroup>
       </Form>
     </div>
   );

packages/dmn-editor/src/store/Store.ts

@@ -110,6 +110,7 @@ export interface State {
       enableExecutionHitsHighlights: boolean;
       enableDataTypesToolbarOnNodes: boolean;
       enableCustomNodeStyles: boolean;
+      evaluationHighlights: boolean;
     };
     snapGrid: SnapGrid;
     _selectedNodes: Array<string>;
@@ -217,6 +218,7 @@ export const defaultStaticState = (): Omit<State, "dmn" | "dispatch" | "computed
       enableExecutionHitsHighlights: false,
       enableCustomNodeStyles: true,
       enableDataTypesToolbarOnNodes: true,
+      evaluationHighlights: false,
     },
     snapGrid: {
       isEnabled: true,