This is an automated email from the ASF dual-hosted git repository.
jomarko pushed a commit to branch main
in repository https://gitbox.apache.org/repos/asf/incubator-kie-tools.git
The following commit(s) were added to refs/heads/main by this push:
new cc75f9b9654 kie-issues#1527: DMN Editor: Create new overlay option
'Highlight evaluation results' (#2657)
cc75f9b9654 is described below
commit cc75f9b96549dc80f7b871fbb57e932c46ab5cd9
Author: Jozef Marko <[email protected]>
AuthorDate: Tue Dec 10 09:54:20 2024 +0100
kie-issues#1527: DMN Editor: Create new overlay option 'Highlight
evaluation results' (#2657)
---
packages/dmn-editor/src/DmnEditor.css | 6 ++
.../src/boxedExpressions/BoxedExpressionScreen.tsx | 37 +++++-----
packages/dmn-editor/src/diagram/Diagram.tsx | 79 ++++++++++++----------
.../EvaluationHighlightsBadge.tsx | 45 ++++++++++++
.../dmn-editor/src/overlaysPanel/OverlaysPanel.tsx | 37 +++++++---
packages/dmn-editor/src/store/Store.ts | 4 +-
6 files changed, 142 insertions(+), 66 deletions(-)
diff --git a/packages/dmn-editor/src/DmnEditor.css
b/packages/dmn-editor/src/DmnEditor.css
index 4e5107f818d..5c6ec0e2821 100644
--- 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
index 72a355eb9a2..ddaf018c2ca 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();
@@ -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
index c42760aa796..1f03a9d7600 100644
--- 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
new file mode 100644
index 00000000000..1479a96010f
--- /dev/null
+++ 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
index f66be9aa90a..c76695df516 100644
--- 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
index aa9658991aa..bc5bd1959aa 100644
--- 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,
---------------------------------------------------------------------
To unsubscribe, e-mail: [email protected]
For additional commands, e-mail: [email protected]
