From cc75f9b96549dc80f7b871fbb57e932c46ab5cd9 Mon Sep 17 00:00:00 2001 From: Jozef Marko Date: Tue, 10 Dec 2024 09:54:20 +0100 Subject: [PATCH] kie-issues#1527: DMN Editor: Create new overlay option 'Highlight evaluation results' (#2657) --- packages/dmn-editor/src/DmnEditor.css | 6 ++ .../BoxedExpressionScreen.tsx | 37 +++++---- packages/dmn-editor/src/diagram/Diagram.tsx | 79 ++++++++++--------- .../EvaluationHighlightsBadge.tsx | 45 +++++++++++ .../src/overlaysPanel/OverlaysPanel.tsx | 37 ++++++--- packages/dmn-editor/src/store/Store.ts | 4 +- 6 files changed, 142 insertions(+), 66 deletions(-) create mode 100644 packages/dmn-editor/src/evaluationHighlights/EvaluationHighlightsBadge.tsx 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 }) { const { externalModelsByNamespace } = useExternalModels(); @@ -361,24 +362,28 @@ export function BoxedExpressionScreen({ container }: { container: React.RefObjec - + + + +
- - {!settings.isReadOnly && ( - - )} - - {!diagram.propertiesPanel.isOpen && ( - - )} + {!diagram.propertiesPanel.isOpen && ( + + )} + ); 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 ( + + ); +} 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) {
e.stopPropagation()} // Prevent ReactFlow KeyboardShortcuts from triggering when editing stuff on Overlays Panel > - {/* - - dmnEditorStoreApi.setState((state) => { - state.diagram.overlays.enableExecutionHitsHighlights = newValue; - }) - } - /> - */} + + + + + + } + > + + dmnEditorStoreApi.setState((state) => { + state.diagram.overlays.enableEvaluationHighlights = newValue; + }) + } + /> +
); 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; @@ -214,9 +214,9 @@ export const defaultStaticState = (): Omit