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();
@@ -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}

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.enableEvaluationHighlights && <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.enableEvaluationHighlights);
+
+ 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.enableEvaluationHighlights = !state.diagram.overlays.enableEvaluationHighlights;
+ });
+ }}
+ title={"Evaluation highlights (beta)"}
+ >
+ Evaluation Highlights: {dmnEditorStoreApi.getState().diagram.overlays.enableEvaluationHighlights ? "On" : "Off"}
+ </button>
+ </aside>
+ );
+}

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>
  );

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,