From d738d348cf630d92b67240a9dee2158ecd779f55 Mon Sep 17 00:00:00 2001
From: Jozef Marko <jozef.marko@ibm.com>
Date: Fri, 11 Oct 2024 13:07:43 +0200
Subject: [PATCH 1/9] kie-issues#1527: DMN Editor: Create new overlay option
 'Highlight evaluation results'

Closes: https://github.com/apache/incubator-kie-issues/issues/1527
---
 packages/dmn-editor/src/DmnEditor.css         | 34 ++++++++++++
 .../BoxedExpressionScreen.tsx                 | 55 +++++++++++++------
 packages/dmn-editor/src/diagram/Diagram.tsx   | 15 +++++
 .../src/overlaysPanel/OverlaysPanel.tsx       | 23 ++++++++
 packages/dmn-editor/src/store/Store.ts        |  2 +
 5 files changed, 113 insertions(+), 16 deletions(-)

diff --git a/packages/dmn-editor/src/DmnEditor.css b/packages/dmn-editor/src/DmnEditor.css
index 4e5107f818d..9c5c6a06e11 100644
--- a/packages/dmn-editor/src/DmnEditor.css
+++ b/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 {
+  background: #fff;
+  border-radius: 40px;
+  border: 1px solid black;
+}
+.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;
+}
+.kie-dmn-editor--evaluation-highlights-panel-toggle-button-off {
+  background: lightgray;
+}
+.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;
diff --git a/packages/dmn-editor/src/boxedExpressions/BoxedExpressionScreen.tsx b/packages/dmn-editor/src/boxedExpressions/BoxedExpressionScreen.tsx
index 72a355eb9a2..edc4127151d 100644
--- a/packages/dmn-editor/src/boxedExpressions/BoxedExpressionScreen.tsx
+++ b/packages/dmn-editor/src/boxedExpressions/BoxedExpressionScreen.tsx
@@ -319,6 +319,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 +363,45 @@ 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>
+            <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>
+            <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
index c42760aa796..99b812bc4f7 100644
--- a/packages/dmn-editor/src/diagram/Diagram.tsx
+++ b/packages/dmn-editor/src/diagram/Diagram.tsx
@@ -1708,6 +1708,21 @@ export function TopRightCornerPanels({ availableHeight }: TopRightCornerPanelsPr
   return (
     <>
       <RF.Panel position={"top-right"} style={{ display: "flex" }}>
+        {diagram.overlays.evaluationHighlights && (
+          <aside className={"kie-dmn-editor--evaluation-highlights-panel-toggle"}>
+            <button
+              className={"kie-dmn-editor--evaluation-highlights-panel-toggle-button"}
+              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>
+        )}
         {!settings.isReadOnly && (
           <aside className={"kie-dmn-editor--autolayout-panel-toggle"}>
             <AutolayoutButton />
diff --git a/packages/dmn-editor/src/overlaysPanel/OverlaysPanel.tsx b/packages/dmn-editor/src/overlaysPanel/OverlaysPanel.tsx
index f66be9aa90a..501c3ea487f 100644
--- a/packages/dmn-editor/src/overlaysPanel/OverlaysPanel.tsx
+++ b/packages/dmn-editor/src/overlaysPanel/OverlaysPanel.tsx
@@ -24,6 +24,8 @@ 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, Tooltip } from "@patternfly/react-core";
+import { HelpIcon } from "@patternfly/react-icons";
 
 const MIN_SNAP = 5;
 const MAX_SNAP = 50;
@@ -159,6 +161,27 @@ export function OverlaysPanel({ availableHeight }: OverlaysPanelProps) {
             }
           />
         </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>
   );
diff --git a/packages/dmn-editor/src/store/Store.ts b/packages/dmn-editor/src/store/Store.ts
index aa9658991aa..ce2b287881b 100644
--- a/packages/dmn-editor/src/store/Store.ts
+++ b/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,

From aa185e4f084da069ac6745aee06f68a35ca46410 Mon Sep 17 00:00:00 2001
From: Jozef Marko <jozef.marko@ibm.com>
Date: Mon, 14 Oct 2024 11:09:49 +0200
Subject: [PATCH 2/9] styling

---
 packages/dmn-editor/src/DmnEditor.css | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/packages/dmn-editor/src/DmnEditor.css b/packages/dmn-editor/src/DmnEditor.css
index 9c5c6a06e11..5665cfe8b44 100644
--- a/packages/dmn-editor/src/DmnEditor.css
+++ b/packages/dmn-editor/src/DmnEditor.css
@@ -397,9 +397,7 @@
 
 /* (begin) evaluation-highlights panel toggle */
 .kie-dmn-editor--evaluation-highlights-panel-toggle {
-  background: #fff;
   border-radius: 40px;
-  border: 1px solid black;
 }
 .kie-dmn-editor--evaluation-highlights-panel-toggle:not(:last-child) {
   margin-right: 16px;
@@ -417,9 +415,11 @@
 }
 .kie-dmn-editor--evaluation-highlights-panel-toggle-button {
   background: white;
+  border: 1px solid black;
 }
 .kie-dmn-editor--evaluation-highlights-panel-toggle-button-off {
-  background: lightgray;
+  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%);

From e3d34f2a7f6c54033b707446b29ea3856443b44a Mon Sep 17 00:00:00 2001
From: Jozef Marko <jozef.marko@ibm.com>
Date: Mon, 14 Oct 2024 11:39:18 +0200
Subject: [PATCH 3/9] EvaluationHighlightsBadge component

---
 .../BoxedExpressionScreen.tsx                 | 20 +-------
 packages/dmn-editor/src/diagram/Diagram.tsx   | 17 +------
 .../EvaluationHighlightsBadge.tsx             | 46 +++++++++++++++++++
 3 files changed, 50 insertions(+), 33 deletions(-)
 create mode 100644 packages/dmn-editor/src/evaluationHighlights/EvaluationHighlightsBadge.tsx

diff --git a/packages/dmn-editor/src/boxedExpressions/BoxedExpressionScreen.tsx b/packages/dmn-editor/src/boxedExpressions/BoxedExpressionScreen.tsx
index edc4127151d..54a149567ff 100644
--- 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();
@@ -364,24 +365,7 @@ export function BoxedExpressionScreen({ container }: { container: React.RefObjec
           </FlexItem>
 
           <Flex>
-            <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>
+            <EvaluationHighlightsBadge />
             <aside
               className={"kie-dmn-editor--properties-panel-toggle"}
               style={{ visibility: isPropertiesPanelOpen ? "hidden" : undefined }}
diff --git a/packages/dmn-editor/src/diagram/Diagram.tsx b/packages/dmn-editor/src/diagram/Diagram.tsx
index 99b812bc4f7..8e5fa9c0478 100644
--- a/packages/dmn-editor/src/diagram/Diagram.tsx
+++ b/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,21 +1709,7 @@ export function TopRightCornerPanels({ availableHeight }: TopRightCornerPanelsPr
   return (
     <>
       <RF.Panel position={"top-right"} style={{ display: "flex" }}>
-        {diagram.overlays.evaluationHighlights && (
-          <aside className={"kie-dmn-editor--evaluation-highlights-panel-toggle"}>
-            <button
-              className={"kie-dmn-editor--evaluation-highlights-panel-toggle-button"}
-              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>
-        )}
+        {diagram.overlays.evaluationHighlights && <EvaluationHighlightsBadge />}
         {!settings.isReadOnly && (
           <aside className={"kie-dmn-editor--autolayout-panel-toggle"}>
             <AutolayoutButton />
diff --git a/packages/dmn-editor/src/evaluationHighlights/EvaluationHighlightsBadge.tsx b/packages/dmn-editor/src/evaluationHighlights/EvaluationHighlightsBadge.tsx
new file mode 100644
index 00000000000..92aacd64717
--- /dev/null
+++ b/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>
+  );
+}

From 87f50d8b26a53073b2d844740865fdc198c33be1 Mon Sep 17 00:00:00 2001
From: Jozef Marko <jozef.marko@ibm.com>
Date: Mon, 14 Oct 2024 13:31:18 +0200
Subject: [PATCH 4/9] imports

---
 packages/dmn-editor/src/overlaysPanel/OverlaysPanel.tsx | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/packages/dmn-editor/src/overlaysPanel/OverlaysPanel.tsx b/packages/dmn-editor/src/overlaysPanel/OverlaysPanel.tsx
index 501c3ea487f..75985d94509 100644
--- a/packages/dmn-editor/src/overlaysPanel/OverlaysPanel.tsx
+++ b/packages/dmn-editor/src/overlaysPanel/OverlaysPanel.tsx
@@ -24,8 +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, Tooltip } from "@patternfly/react-core";
-import { HelpIcon } from "@patternfly/react-icons";
+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;

From d6fa0c2148ed820169dcaff0b1f6aa09b7fa310d Mon Sep 17 00:00:00 2001
From: Jozef Marko <jozef.marko@ibm.com>
Date: Mon, 14 Oct 2024 14:36:53 +0200
Subject: [PATCH 5/9] remove unused constant

---
 .../dmn-editor/src/boxedExpressions/BoxedExpressionScreen.tsx   | 2 --
 1 file changed, 2 deletions(-)

diff --git a/packages/dmn-editor/src/boxedExpressions/BoxedExpressionScreen.tsx b/packages/dmn-editor/src/boxedExpressions/BoxedExpressionScreen.tsx
index 54a149567ff..ddaf018c2ca 100644
--- a/packages/dmn-editor/src/boxedExpressions/BoxedExpressionScreen.tsx
+++ b/packages/dmn-editor/src/boxedExpressions/BoxedExpressionScreen.tsx
@@ -320,8 +320,6 @@ export function BoxedExpressionScreen({ container }: { container: React.RefObjec
     return NodeIcon({ nodeType, isAlternativeInputDataShape });
   }, [drgElement, isAlternativeInputDataShape]);
 
-  const isEvaluationHighlights = useDmnEditorStore((s) => s.diagram.overlays.evaluationHighlights);
-
   return (
     <>
       <>

From cd5205c67d89eb00b8807fe29cd1b635c24d7c3a Mon Sep 17 00:00:00 2001
From: Jozef Marko <jozef.marko@ibm.com>
Date: Tue, 15 Oct 2024 10:42:26 +0200
Subject: [PATCH 6/9] Incorporate review feedback

---
 packages/dmn-editor/src/diagram/Diagram.tsx   |  2 +-
 .../EvaluationHighlightsBadge.tsx             |  6 +++---
 .../src/overlaysPanel/OverlaysPanel.tsx       | 19 +++++--------------
 packages/dmn-editor/src/store/Store.ts        |  6 ++----
 4 files changed, 11 insertions(+), 22 deletions(-)

diff --git a/packages/dmn-editor/src/diagram/Diagram.tsx b/packages/dmn-editor/src/diagram/Diagram.tsx
index 8e5fa9c0478..99534c0601a 100644
--- a/packages/dmn-editor/src/diagram/Diagram.tsx
+++ b/packages/dmn-editor/src/diagram/Diagram.tsx
@@ -1709,7 +1709,7 @@ export function TopRightCornerPanels({ availableHeight }: TopRightCornerPanelsPr
   return (
     <>
       <RF.Panel position={"top-right"} style={{ display: "flex" }}>
-        {diagram.overlays.evaluationHighlights && <EvaluationHighlightsBadge />}
+        {diagram.overlays.enableEvaluationHighlights && <EvaluationHighlightsBadge />}
         {!settings.isReadOnly && (
           <aside className={"kie-dmn-editor--autolayout-panel-toggle"}>
             <AutolayoutButton />
diff --git a/packages/dmn-editor/src/evaluationHighlights/EvaluationHighlightsBadge.tsx b/packages/dmn-editor/src/evaluationHighlights/EvaluationHighlightsBadge.tsx
index 92aacd64717..6de1cb1fbbf 100644
--- a/packages/dmn-editor/src/evaluationHighlights/EvaluationHighlightsBadge.tsx
+++ b/packages/dmn-editor/src/evaluationHighlights/EvaluationHighlightsBadge.tsx
@@ -22,7 +22,7 @@ import { useDmnEditorStore, useDmnEditorStoreApi } from "../store/StoreContext";
 
 export function EvaluationHighlightsBadge() {
   const dmnEditorStoreApi = useDmnEditorStoreApi();
-  const isEvaluationHighlights = useDmnEditorStore((s) => s.diagram.overlays.evaluationHighlights);
+  const isEvaluationHighlights = useDmnEditorStore((s) => s.diagram.overlays.enableEvaluationHighlights);
 
   return (
     <aside className={"kie-dmn-editor--evaluation-highlights-panel-toggle"}>
@@ -34,12 +34,12 @@ export function EvaluationHighlightsBadge() {
         }
         onClick={() => {
           dmnEditorStoreApi.setState((state) => {
-            state.diagram.overlays.evaluationHighlights = !state.diagram.overlays.evaluationHighlights;
+            state.diagram.overlays.enableEvaluationHighlights = !state.diagram.overlays.enableEvaluationHighlights;
           });
         }}
         title={"Evaluation highlights (beta)"}
       >
-        Evaluation Highlights: {dmnEditorStoreApi.getState().diagram.overlays.evaluationHighlights ? "On" : "Off"}
+        Evaluation Highlights: {dmnEditorStoreApi.getState().diagram.overlays.enableEvaluationHighlights ? "On" : "Off"}
       </button>
     </aside>
   );
diff --git a/packages/dmn-editor/src/overlaysPanel/OverlaysPanel.tsx b/packages/dmn-editor/src/overlaysPanel/OverlaysPanel.tsx
index 75985d94509..c76695df516 100644
--- a/packages/dmn-editor/src/overlaysPanel/OverlaysPanel.tsx
+++ b/packages/dmn-editor/src/overlaysPanel/OverlaysPanel.tsx
@@ -118,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"}
@@ -166,7 +155,9 @@ export function OverlaysPanel({ availableHeight }: OverlaysPanelProps) {
           label={"Enable evaluation highlights"}
           labelIcon={
             <Tooltip
-              content={"Enable evaluation highlights on nodes(decisions?), decision tables and conditional expressions"}
+              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 />
@@ -175,10 +166,10 @@ export function OverlaysPanel({ availableHeight }: OverlaysPanelProps) {
           }
         >
           <Switch
-            isChecked={diagram.overlays.evaluationHighlights}
+            isChecked={diagram.overlays.enableEvaluationHighlights}
             onChange={(newValue) =>
               dmnEditorStoreApi.setState((state) => {
-                state.diagram.overlays.evaluationHighlights = newValue;
+                state.diagram.overlays.enableEvaluationHighlights = newValue;
               })
             }
           />
diff --git a/packages/dmn-editor/src/store/Store.ts b/packages/dmn-editor/src/store/Store.ts
index ce2b287881b..bc5bd1959aa 100644
--- a/packages/dmn-editor/src/store/Store.ts
+++ b/packages/dmn-editor/src/store/Store.ts
@@ -107,10 +107,9 @@ export interface State {
     openLhsPanel: DiagramLhsPanel;
     overlays: {
       enableNodeHierarchyHighlight: boolean;
-      enableExecutionHitsHighlights: boolean;
       enableDataTypesToolbarOnNodes: boolean;
       enableCustomNodeStyles: boolean;
-      evaluationHighlights: boolean;
+      enableEvaluationHighlights: boolean;
     };
     snapGrid: SnapGrid;
     _selectedNodes: Array<string>;
@@ -215,10 +214,9 @@ export const defaultStaticState = (): Omit<State, "dmn" | "dispatch" | "computed
     openLhsPanel: DiagramLhsPanel.NONE,
     overlays: {
       enableNodeHierarchyHighlight: false,
-      enableExecutionHitsHighlights: false,
       enableCustomNodeStyles: true,
       enableDataTypesToolbarOnNodes: true,
-      evaluationHighlights: false,
+      enableEvaluationHighlights: false,
     },
     snapGrid: {
       isEnabled: true,

From 684524aa1b89c4c3e950b6b184d1848808669af1 Mon Sep 17 00:00:00 2001
From: Jozef Marko <jozef.marko@ibm.com>
Date: Thu, 17 Oct 2024 08:52:25 +0200
Subject: [PATCH 7/9] CodeReview: isEvaluationHighlights ->
 isEvaluationHighlightsEnabled

---
 .../src/evaluationHighlights/EvaluationHighlightsBadge.tsx    | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/dmn-editor/src/evaluationHighlights/EvaluationHighlightsBadge.tsx b/packages/dmn-editor/src/evaluationHighlights/EvaluationHighlightsBadge.tsx
index 6de1cb1fbbf..1e56144fa67 100644
--- a/packages/dmn-editor/src/evaluationHighlights/EvaluationHighlightsBadge.tsx
+++ b/packages/dmn-editor/src/evaluationHighlights/EvaluationHighlightsBadge.tsx
@@ -22,13 +22,13 @@ import { useDmnEditorStore, useDmnEditorStoreApi } from "../store/StoreContext";
 
 export function EvaluationHighlightsBadge() {
   const dmnEditorStoreApi = useDmnEditorStoreApi();
-  const isEvaluationHighlights = useDmnEditorStore((s) => s.diagram.overlays.enableEvaluationHighlights);
+  const isEvaluationHighlightsEnabled = useDmnEditorStore((s) => s.diagram.overlays.enableEvaluationHighlights);
 
   return (
     <aside className={"kie-dmn-editor--evaluation-highlights-panel-toggle"}>
       <button
         className={
-          isEvaluationHighlights
+          isEvaluationHighlightsEnabled
             ? "kie-dmn-editor--evaluation-highlights-panel-toggle-button"
             : "kie-dmn-editor--evaluation-highlights-panel-toggle-button-off"
         }

From a67684406e0c0f1c625dc03455eb864c759b4a43 Mon Sep 17 00:00:00 2001
From: Jozef Marko <jozef.marko@ibm.com>
Date: Fri, 18 Oct 2024 11:14:20 +0200
Subject: [PATCH 8/9] CR: Remove (beta)

---
 .../src/evaluationHighlights/EvaluationHighlightsBadge.tsx      | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/dmn-editor/src/evaluationHighlights/EvaluationHighlightsBadge.tsx b/packages/dmn-editor/src/evaluationHighlights/EvaluationHighlightsBadge.tsx
index 1e56144fa67..6d52cc8ef52 100644
--- a/packages/dmn-editor/src/evaluationHighlights/EvaluationHighlightsBadge.tsx
+++ b/packages/dmn-editor/src/evaluationHighlights/EvaluationHighlightsBadge.tsx
@@ -37,7 +37,7 @@ export function EvaluationHighlightsBadge() {
             state.diagram.overlays.enableEvaluationHighlights = !state.diagram.overlays.enableEvaluationHighlights;
           });
         }}
-        title={"Evaluation highlights (beta)"}
+        title={"Evaluation highlights"}
       >
         Evaluation Highlights: {dmnEditorStoreApi.getState().diagram.overlays.enableEvaluationHighlights ? "On" : "Off"}
       </button>

From 8ec7aa038e8aba54c1a5a8888c85941f30fa6388 Mon Sep 17 00:00:00 2001
From: Jozef Marko <jozef.marko@ibm.com>
Date: Fri, 18 Oct 2024 12:14:26 +0200
Subject: [PATCH 9/9] CR: Replace button with label

---
 packages/dmn-editor/src/DmnEditor.css         | 30 +------
 packages/dmn-editor/src/diagram/Diagram.tsx   | 79 ++++++++++---------
 .../EvaluationHighlightsBadge.tsx             | 15 ++--
 3 files changed, 49 insertions(+), 75 deletions(-)

diff --git a/packages/dmn-editor/src/DmnEditor.css b/packages/dmn-editor/src/DmnEditor.css
index 5665cfe8b44..5c6ec0e2821 100644
--- a/packages/dmn-editor/src/DmnEditor.css
+++ b/packages/dmn-editor/src/DmnEditor.css
@@ -397,35 +397,7 @@
 
 /* (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%);
+  min-width: 190px;
 }
 /* (end) evaluation-highlights panel toggle */
 
diff --git a/packages/dmn-editor/src/diagram/Diagram.tsx b/packages/dmn-editor/src/diagram/Diagram.tsx
index 99534c0601a..1f03a9d7600 100644
--- a/packages/dmn-editor/src/diagram/Diagram.tsx
+++ b/packages/dmn-editor/src/diagram/Diagram.tsx
@@ -127,6 +127,7 @@ 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
 
@@ -1708,46 +1709,48 @@ export function TopRightCornerPanels({ availableHeight }: TopRightCornerPanelsPr
 
   return (
     <>
-      <RF.Panel position={"top-right"} style={{ display: "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} />}
-          >
-            <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
index 6d52cc8ef52..1479a96010f 100644
--- a/packages/dmn-editor/src/evaluationHighlights/EvaluationHighlightsBadge.tsx
+++ b/packages/dmn-editor/src/evaluationHighlights/EvaluationHighlightsBadge.tsx
@@ -19,6 +19,8 @@
 
 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();
@@ -26,12 +28,9 @@ export function EvaluationHighlightsBadge() {
 
   return (
     <aside className={"kie-dmn-editor--evaluation-highlights-panel-toggle"}>
-      <button
-        className={
-          isEvaluationHighlightsEnabled
-            ? "kie-dmn-editor--evaluation-highlights-panel-toggle-button"
-            : "kie-dmn-editor--evaluation-highlights-panel-toggle-button-off"
-        }
+      <Label
+        icon={isEvaluationHighlightsEnabled ? <OnIcon /> : <OffIcon />}
+        color={isEvaluationHighlightsEnabled ? "green" : "grey"}
         onClick={() => {
           dmnEditorStoreApi.setState((state) => {
             state.diagram.overlays.enableEvaluationHighlights = !state.diagram.overlays.enableEvaluationHighlights;
@@ -39,8 +38,8 @@ export function EvaluationHighlightsBadge() {
         }}
         title={"Evaluation highlights"}
       >
-        Evaluation Highlights: {dmnEditorStoreApi.getState().diagram.overlays.enableEvaluationHighlights ? "On" : "Off"}
-      </button>
+        Evaluation highlights: {dmnEditorStoreApi.getState().diagram.overlays.enableEvaluationHighlights ? "on" : "off"}
+      </Label>
     </aside>
   );
 }