From 19bd4008e6532fe5ef168ceb1cacecd8711b8f98 Mon Sep 17 00:00:00 2001 From: Jozef Marko Date: Fri, 18 Oct 2024 10:48:20 +0200 Subject: [PATCH 1/8] kie-issues#1547: Render evaluation highlights in the Boxed Expression Editor Closes: apache/incubator-kie-issues/issues/1547 --- .../src/BoxedExpressionEditor.tsx | 4 ++ .../src/BoxedExpressionEditorContext.tsx | 3 ++ .../src/table/BeeTable/BeeTable.css | 44 +++++++++++++++++++ .../src/table/BeeTable/BeeTableBody.tsx | 12 +++-- .../src/table/BeeTable/BeeTableTd.tsx | 19 +++++++- 5 files changed, 78 insertions(+), 4 deletions(-) diff --git a/packages/boxed-expression-component/src/BoxedExpressionEditor.tsx b/packages/boxed-expression-component/src/BoxedExpressionEditor.tsx index 920e4110257..18f7ef5b7b9 100644 --- a/packages/boxed-expression-component/src/BoxedExpressionEditor.tsx +++ b/packages/boxed-expression-component/src/BoxedExpressionEditor.tsx @@ -59,6 +59,8 @@ export interface BoxedExpressionEditorProps { isReadOnly?: boolean; /** PMML models available to use on Boxed PMML Function */ pmmlDocuments?: PmmlDocument[]; + /** Array of the hit sub-expressions UUID IDs (Decision Tables rules and Conditional Expression branches). IDs may repeat in the array as mentioned sub-expressions may hit more times. */ + evaluationHitIds?: string[]; /** The containing HTMLElement which is scrollable */ scrollableParentRef: React.RefObject; /** Parsed variables used for syntax coloring and auto-complete */ @@ -79,6 +81,7 @@ export function BoxedExpressionEditor({ isResetSupportedOnRootExpression, scrollableParentRef, pmmlDocuments, + evaluationHitIds, onRequestFeelVariables, widthsById, onWidthsChange, @@ -103,6 +106,7 @@ export function BoxedExpressionEditor({ isReadOnly={isReadOnly} dataTypes={dataTypes} pmmlDocuments={pmmlDocuments} + evaluationHitIds={evaluationHitIds} onRequestFeelVariables={onRequestFeelVariables} widthsById={widthsById} hideDmn14BoxedExpressions={hideDmn14BoxedExpressions} diff --git a/packages/boxed-expression-component/src/BoxedExpressionEditorContext.tsx b/packages/boxed-expression-component/src/BoxedExpressionEditorContext.tsx index ce879f8808c..484b3d3acd5 100644 --- a/packages/boxed-expression-component/src/BoxedExpressionEditorContext.tsx +++ b/packages/boxed-expression-component/src/BoxedExpressionEditorContext.tsx @@ -34,6 +34,7 @@ export interface BoxedExpressionEditorContextType { pmmlDocuments?: PmmlDocument[]; dataTypes: DmnDataType[]; isReadOnly?: boolean; + evaluationHitIds?: string[]; // State currentlyOpenContextMenu: string | undefined; @@ -74,6 +75,7 @@ export function BoxedExpressionEditorContextProvider({ beeGwtService, children, pmmlDocuments, + evaluationHitIds, scrollableParentRef, onRequestFeelVariables, widthsById, @@ -114,6 +116,7 @@ export function BoxedExpressionEditorContextProvider({ dataTypes, isReadOnly, pmmlDocuments, + evaluationHitIds, //state // FIXME: Move to a separate context (https://github.com/apache/incubator-kie-issues/issues/168) currentlyOpenContextMenu, diff --git a/packages/boxed-expression-component/src/table/BeeTable/BeeTable.css b/packages/boxed-expression-component/src/table/BeeTable/BeeTable.css index 7f18dc54aab..622839c6340 100644 --- a/packages/boxed-expression-component/src/table/BeeTable/BeeTable.css +++ b/packages/boxed-expression-component/src/table/BeeTable/BeeTable.css @@ -203,6 +203,50 @@ border: 0; } +.expression-container .table-component .evaluation-highlights-row-overlay td { + position: relative; +} + +.expression-container .table-component .evaluation-highlights-row-overlay td::before { + content: ""; + position: absolute; + background-color: rgb(215, 201, 255, 0.5); + left: 0; + top: 0; + width: 100%; + height: 100%; +} + +.evaluation-hit-count-overlay-non-colored::before { + content: attr(data-evaluation-hits-count); + font-size: 0.8em; + text-align: left; + color: white; + background-color: var(--pf-global--palette--black-600); + position: absolute; + top: 0px; + left: 0px; + height: 100%; + width: 100%; + clip-path: polygon(0% 65%, 65% 0%, 0% 0%); + padding-left: 0.2em; +} + +.evaluation-hit-count-overlay-colored::before { + content: attr(data-evaluation-hits-count); + font-size: 0.8em; + text-align: left; + color: white; + background-color: rgb(134, 106, 212); + position: absolute; + top: 0px; + left: 0px; + height: 100%; + width: 100%; + clip-path: polygon(0% 65%, 65% 0%, 0% 0%); + padding-left: 0.2em; +} + .expression-container .table-component table tbody tr td.row-index-cell-column { padding: 1.1em 0; } diff --git a/packages/boxed-expression-component/src/table/BeeTable/BeeTableBody.tsx b/packages/boxed-expression-component/src/table/BeeTable/BeeTableBody.tsx index a704f2c7c32..902f08f5c92 100644 --- a/packages/boxed-expression-component/src/table/BeeTable/BeeTableBody.tsx +++ b/packages/boxed-expression-component/src/table/BeeTable/BeeTableBody.tsx @@ -25,6 +25,7 @@ import { BeeTableTdForAdditionalRow } from "./BeeTableTdForAdditionalRow"; import { BeeTableTd } from "./BeeTableTd"; import { BeeTableCoordinatesContextProvider } from "../../selection/BeeTableSelectionContext"; import { ResizerStopBehavior } from "../../resizing/ResizingWidthsContext"; +import { useBoxedExpressionEditor } from "../../BoxedExpressionEditorContext"; export interface BeeTableBodyProps { /** Table instance */ @@ -73,12 +74,18 @@ export function BeeTableBody({ rowWrapper, isReadOnly, }: BeeTableBodyProps) { + const { evaluationHitIds } = useBoxedExpressionEditor(); + const renderRow = useCallback( (row: ReactTable.Row, rowIndex: number) => { reactTableInstance.prepareRow(row); + const rowKey = getRowKey(row); + const rowHitCount = evaluationHitIds?.filter((hitId) => hitId === rowKey).length!; + const rowClassName = rowKey + (rowHitCount > 0 ? " evaluation-highlights-row-overlay" : ""); + const renderTr = () => ( - + {row.cells.map((cell, cellIndex) => { const columnKey = getColumnKey(reactTableInstance.allColumns[cellIndex]); return ( @@ -104,6 +111,7 @@ export function BeeTableBody({ cellIndex === reactTableInstance.allColumns.length - 1 ? lastColumnMinWidth : undefined } isReadOnly={isReadOnly} + evaluationHitsCount={rowHitCount} /> )} @@ -114,8 +122,6 @@ export function BeeTableBody({ const RowWrapper = rowWrapper; - const rowKey = getRowKey(row); - return ( {RowWrapper ? ( diff --git a/packages/boxed-expression-component/src/table/BeeTable/BeeTableTd.tsx b/packages/boxed-expression-component/src/table/BeeTable/BeeTableTd.tsx index b9a0a71da04..37e43098ee6 100644 --- a/packages/boxed-expression-component/src/table/BeeTable/BeeTableTd.tsx +++ b/packages/boxed-expression-component/src/table/BeeTable/BeeTableTd.tsx @@ -49,6 +49,7 @@ export interface BeeTableTdProps { onDataCellClick?: (columnID: string) => void; onDataCellKeyUp?: (columnID: string) => void; isReadOnly: boolean; + evaluationHitsCount?: number; } export type HoverInfo = @@ -73,6 +74,7 @@ export function BeeTableTd({ onDataCellClick, onDataCellKeyUp, isReadOnly, + evaluationHitsCount, }: BeeTableTdProps) { const [isResizing, setResizing] = useState(false); const [hoverInfo, setHoverInfo] = useState({ isHovered: false }); @@ -246,7 +248,22 @@ export function BeeTableTd({ }} > {column.isRowIndexColumn ? ( - <>{rowIndexLabel} + evaluationHitsCount !== undefined ? ( + <> +
0 + ? "evaluation-hit-count-overlay-colored" + : "evaluation-hit-count-overlay-non-colored" + } + data-evaluation-hits-count={evaluationHitsCount} + > + {rowIndexLabel} +
+ + ) : ( + <>{rowIndexLabel} + ) ) : ( <> {tdContent} From 713e27d76bd1c0fd2fea5673844a84bc92a2187b Mon Sep 17 00:00:00 2001 From: Jozef Marko Date: Fri, 18 Oct 2024 16:26:51 +0200 Subject: [PATCH 2/8] restrict ::before size --- .../src/table/BeeTable/BeeTable.css | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/packages/boxed-expression-component/src/table/BeeTable/BeeTable.css b/packages/boxed-expression-component/src/table/BeeTable/BeeTable.css index 622839c6340..e7f10dfb167 100644 --- a/packages/boxed-expression-component/src/table/BeeTable/BeeTable.css +++ b/packages/boxed-expression-component/src/table/BeeTable/BeeTable.css @@ -226,8 +226,8 @@ position: absolute; top: 0px; left: 0px; - height: 100%; - width: 100%; + height: 55px; + width: 55px; clip-path: polygon(0% 65%, 65% 0%, 0% 0%); padding-left: 0.2em; } @@ -241,8 +241,8 @@ position: absolute; top: 0px; left: 0px; - height: 100%; - width: 100%; + height: 55px; + width: 55px; clip-path: polygon(0% 65%, 65% 0%, 0% 0%); padding-left: 0.2em; } From d99ef6a58e5c953faebf545930eb609819e90f68 Mon Sep 17 00:00:00 2001 From: Jozef Marko Date: Mon, 21 Oct 2024 19:24:44 +0200 Subject: [PATCH 3/8] Display evaluationHitsCount in the leading column of the DT and Conditional --- .../src/api/BeeTable.ts | 1 + .../ConditionalExpression.tsx | 6 ++++ .../DecisionTableExpression.tsx | 1 + .../src/table/BeeTable/BeeTable.tsx | 2 ++ .../src/table/BeeTable/BeeTableBody.tsx | 7 ++++- .../src/table/BeeTable/BeeTableTd.tsx | 31 ++++++++----------- 6 files changed, 29 insertions(+), 19 deletions(-) diff --git a/packages/boxed-expression-component/src/api/BeeTable.ts b/packages/boxed-expression-component/src/api/BeeTable.ts index 68c662f4ba2..b637efe2288 100644 --- a/packages/boxed-expression-component/src/api/BeeTable.ts +++ b/packages/boxed-expression-component/src/api/BeeTable.ts @@ -97,6 +97,7 @@ export interface BeeTableProps { shouldShowColumnsInlineControls: boolean; resizerStopBehavior: ResizerStopBehavior; lastColumnMinWidth?: number; + evaluationHitsCountColumnIndex?: number; } /** Possible status for the visibility of the Table's Header */ diff --git a/packages/boxed-expression-component/src/expressions/ConditionalExpression/ConditionalExpression.tsx b/packages/boxed-expression-component/src/expressions/ConditionalExpression/ConditionalExpression.tsx index ab9871d81e8..774c3a5d6fd 100644 --- a/packages/boxed-expression-component/src/expressions/ConditionalExpression/ConditionalExpression.tsx +++ b/packages/boxed-expression-component/src/expressions/ConditionalExpression/ConditionalExpression.tsx @@ -226,6 +226,10 @@ export function ConditionalExpression({ [setExpression] ); + const getRowKey = useCallback((row: ReactTable.Row) => { + return row.original.part["@_id"]; + }, []); + return (
@@ -234,6 +238,7 @@ export function ConditionalExpression({ isEditableHeader={!isReadOnly} resizerStopBehavior={ResizerStopBehavior.SET_WIDTH_WHEN_SMALLER} tableId={id} + getRowKey={getRowKey} headerLevelCountForAppendingRowIndexColumn={1} headerVisibility={headerVisibility} cellComponentByColumnAccessor={cellComponentByColumnAccessor} @@ -247,6 +252,7 @@ export function ConditionalExpression({ shouldRenderRowIndexColumn={false} shouldShowRowsInlineControls={false} shouldShowColumnsInlineControls={false} + evaluationHitsCountColumnIndex={1} />
diff --git a/packages/boxed-expression-component/src/expressions/DecisionTableExpression/DecisionTableExpression.tsx b/packages/boxed-expression-component/src/expressions/DecisionTableExpression/DecisionTableExpression.tsx index e22e1da0ce0..67ec3df601a 100644 --- a/packages/boxed-expression-component/src/expressions/DecisionTableExpression/DecisionTableExpression.tsx +++ b/packages/boxed-expression-component/src/expressions/DecisionTableExpression/DecisionTableExpression.tsx @@ -1073,6 +1073,7 @@ export function DecisionTableExpression({ shouldRenderRowIndexColumn={true} shouldShowRowsInlineControls={true} shouldShowColumnsInlineControls={true} + evaluationHitsCountColumnIndex={0} // lastColumnMinWidth={lastColumnMinWidth} // FIXME: Check if this is a good strategy or not when doing https://github.com/apache/incubator-kie-issues/issues/181 /> diff --git a/packages/boxed-expression-component/src/table/BeeTable/BeeTable.tsx b/packages/boxed-expression-component/src/table/BeeTable/BeeTable.tsx index 6bd456c9f80..72786121dbd 100644 --- a/packages/boxed-expression-component/src/table/BeeTable/BeeTable.tsx +++ b/packages/boxed-expression-component/src/table/BeeTable/BeeTable.tsx @@ -103,6 +103,7 @@ export function BeeTableInternal({ resizerStopBehavior, lastColumnMinWidth, rowWrapper, + evaluationHitsCountColumnIndex, }: BeeTableProps & { selectionRef?: React.RefObject; }) { @@ -657,6 +658,7 @@ export function BeeTableInternal({ onDataCellKeyUp={onDataCellKeyUp} lastColumnMinWidth={lastColumnMinWidth} isReadOnly={isReadOnly} + evaluationHitsCountColumnIndex={evaluationHitsCountColumnIndex} /> { rowWrapper?: React.FunctionComponent>; isReadOnly: boolean; + evaluationHitsCountColumnIndex?: number; } export function BeeTableBody({ @@ -73,8 +74,10 @@ export function BeeTableBody({ lastColumnMinWidth, rowWrapper, isReadOnly, + evaluationHitsCountColumnIndex, }: BeeTableBodyProps) { const { evaluationHitIds } = useBoxedExpressionEditor(); + // const evaluationHitIds = ["_1FA12B9F-288C-42E8-B77F-BE2D3702B7B6", "_1FA12B9F-288C-42E8-B77F-BE2D3702B7B7"]; const renderRow = useCallback( (row: ReactTable.Row, rowIndex: number) => { @@ -83,11 +86,12 @@ export function BeeTableBody({ const rowKey = getRowKey(row); const rowHitCount = evaluationHitIds?.filter((hitId) => hitId === rowKey).length!; const rowClassName = rowKey + (rowHitCount > 0 ? " evaluation-highlights-row-overlay" : ""); - const renderTr = () => ( {row.cells.map((cell, cellIndex) => { const columnKey = getColumnKey(reactTableInstance.allColumns[cellIndex]); + const shouldDisplayEvaluationHitsCount = + rowHitCount !== undefined && cellIndex === evaluationHitsCountColumnIndex; return ( {((cell.column.isRowIndexColumn && shouldRenderRowIndexColumn) || !cell.column.isRowIndexColumn) && ( @@ -111,6 +115,7 @@ export function BeeTableBody({ cellIndex === reactTableInstance.allColumns.length - 1 ? lastColumnMinWidth : undefined } isReadOnly={isReadOnly} + shouldDisplayEvaluationHitsCount={shouldDisplayEvaluationHitsCount} evaluationHitsCount={rowHitCount} /> )} diff --git a/packages/boxed-expression-component/src/table/BeeTable/BeeTableTd.tsx b/packages/boxed-expression-component/src/table/BeeTable/BeeTableTd.tsx index 37e43098ee6..d487cce17d9 100644 --- a/packages/boxed-expression-component/src/table/BeeTable/BeeTableTd.tsx +++ b/packages/boxed-expression-component/src/table/BeeTable/BeeTableTd.tsx @@ -49,6 +49,7 @@ export interface BeeTableTdProps { onDataCellClick?: (columnID: string) => void; onDataCellKeyUp?: (columnID: string) => void; isReadOnly: boolean; + shouldDisplayEvaluationHitsCount?: boolean; evaluationHitsCount?: number; } @@ -74,6 +75,7 @@ export function BeeTableTd({ onDataCellClick, onDataCellKeyUp, isReadOnly, + shouldDisplayEvaluationHitsCount, evaluationHitsCount, }: BeeTableTdProps) { const [isResizing, setResizing] = useState(false); @@ -227,6 +229,12 @@ export function BeeTableTd({ return onDataCellKeyUp?.(column.id); }, [column.id, onDataCellKeyUp]); + const evaluationHitsCountCss = shouldDisplayEvaluationHitsCount + ? (evaluationHitsCount ?? 0) > 0 + ? "evaluation-hit-count-overlay-colored" + : "evaluation-hit-count-overlay-non-colored" + : ""; + return ( ({ }} > {column.isRowIndexColumn ? ( - evaluationHitsCount !== undefined ? ( - <> -
0 - ? "evaluation-hit-count-overlay-colored" - : "evaluation-hit-count-overlay-non-colored" - } - data-evaluation-hits-count={evaluationHitsCount} - > - {rowIndexLabel} -
- - ) : ( - <>{rowIndexLabel} - ) +
+ {rowIndexLabel} +
) : ( - <> +
{tdContent} {!isReadOnly && shouldRenderResizer && ( @@ -279,7 +274,7 @@ export function BeeTableTd({ setResizing={setResizing} /> )} - +
)} {!isReadOnly && From f2274d0a407b526cd971a6a3d621a7ec05a1632b Mon Sep 17 00:00:00 2001 From: Jozef Marko Date: Wed, 30 Oct 2024 11:34:27 +0100 Subject: [PATCH 4/8] Adapt props to Map --- .../src/BoxedExpressionEditor.tsx | 7 +++---- .../src/BoxedExpressionEditorContext.tsx | 6 +++--- .../src/table/BeeTable/BeeTableBody.tsx | 12 ++++++++---- 3 files changed, 14 insertions(+), 11 deletions(-) diff --git a/packages/boxed-expression-component/src/BoxedExpressionEditor.tsx b/packages/boxed-expression-component/src/BoxedExpressionEditor.tsx index 18f7ef5b7b9..261f91fb877 100644 --- a/packages/boxed-expression-component/src/BoxedExpressionEditor.tsx +++ b/packages/boxed-expression-component/src/BoxedExpressionEditor.tsx @@ -59,8 +59,7 @@ export interface BoxedExpressionEditorProps { isReadOnly?: boolean; /** PMML models available to use on Boxed PMML Function */ pmmlDocuments?: PmmlDocument[]; - /** Array of the hit sub-expressions UUID IDs (Decision Tables rules and Conditional Expression branches). IDs may repeat in the array as mentioned sub-expressions may hit more times. */ - evaluationHitIds?: string[]; + evaluationHitsCountPerId?: Map; /** The containing HTMLElement which is scrollable */ scrollableParentRef: React.RefObject; /** Parsed variables used for syntax coloring and auto-complete */ @@ -81,7 +80,7 @@ export function BoxedExpressionEditor({ isResetSupportedOnRootExpression, scrollableParentRef, pmmlDocuments, - evaluationHitIds, + evaluationHitsCountPerId, onRequestFeelVariables, widthsById, onWidthsChange, @@ -106,7 +105,7 @@ export function BoxedExpressionEditor({ isReadOnly={isReadOnly} dataTypes={dataTypes} pmmlDocuments={pmmlDocuments} - evaluationHitIds={evaluationHitIds} + evaluationHitsCountPerId={evaluationHitsCountPerId} onRequestFeelVariables={onRequestFeelVariables} widthsById={widthsById} hideDmn14BoxedExpressions={hideDmn14BoxedExpressions} diff --git a/packages/boxed-expression-component/src/BoxedExpressionEditorContext.tsx b/packages/boxed-expression-component/src/BoxedExpressionEditorContext.tsx index 484b3d3acd5..14b760e9b05 100644 --- a/packages/boxed-expression-component/src/BoxedExpressionEditorContext.tsx +++ b/packages/boxed-expression-component/src/BoxedExpressionEditorContext.tsx @@ -34,7 +34,7 @@ export interface BoxedExpressionEditorContextType { pmmlDocuments?: PmmlDocument[]; dataTypes: DmnDataType[]; isReadOnly?: boolean; - evaluationHitIds?: string[]; + evaluationHitsCountPerId?: Map; // State currentlyOpenContextMenu: string | undefined; @@ -75,7 +75,7 @@ export function BoxedExpressionEditorContextProvider({ beeGwtService, children, pmmlDocuments, - evaluationHitIds, + evaluationHitsCountPerId, scrollableParentRef, onRequestFeelVariables, widthsById, @@ -116,7 +116,7 @@ export function BoxedExpressionEditorContextProvider({ dataTypes, isReadOnly, pmmlDocuments, - evaluationHitIds, + evaluationHitsCountPerId, //state // FIXME: Move to a separate context (https://github.com/apache/incubator-kie-issues/issues/168) currentlyOpenContextMenu, diff --git a/packages/boxed-expression-component/src/table/BeeTable/BeeTableBody.tsx b/packages/boxed-expression-component/src/table/BeeTable/BeeTableBody.tsx index 55d5f02cf06..7afe9d11d67 100644 --- a/packages/boxed-expression-component/src/table/BeeTable/BeeTableBody.tsx +++ b/packages/boxed-expression-component/src/table/BeeTable/BeeTableBody.tsx @@ -76,16 +76,20 @@ export function BeeTableBody({ isReadOnly, evaluationHitsCountColumnIndex, }: BeeTableBodyProps) { - const { evaluationHitIds } = useBoxedExpressionEditor(); - // const evaluationHitIds = ["_1FA12B9F-288C-42E8-B77F-BE2D3702B7B6", "_1FA12B9F-288C-42E8-B77F-BE2D3702B7B7"]; + // const { evaluationHitsCountPerId } = useBoxedExpressionEditor(); + const evaluationHitsCountPerId: Map = new Map(); + evaluationHitsCountPerId.set("_1FA12B9F-288C-42E8-B77F-BE2D3702B7B6", 10); + evaluationHitsCountPerId.set("_1FA12B9F-288C-42E8-B77F-BE2D3702B7B7", 20); const renderRow = useCallback( (row: ReactTable.Row, rowIndex: number) => { reactTableInstance.prepareRow(row); const rowKey = getRowKey(row); - const rowHitCount = evaluationHitIds?.filter((hitId) => hitId === rowKey).length!; - const rowClassName = rowKey + (rowHitCount > 0 ? " evaluation-highlights-row-overlay" : ""); + const rowHitCount = evaluationHitsCountPerId ? evaluationHitsCountPerId?.get(rowKey) ?? 0 : undefined; + const rowClassName = rowHitCount + ? rowKey + (rowHitCount > 0 ? " evaluation-highlights-row-overlay" : "") + : undefined; const renderTr = () => ( {row.cells.map((cell, cellIndex) => { From 84a6a4698f54c9b09ebcae3934f5145b54db92ad Mon Sep 17 00:00:00 2001 From: Jozef Marko Date: Wed, 30 Oct 2024 12:25:12 +0100 Subject: [PATCH 5/8] Style the first column only --- .../src/table/BeeTable/BeeTable.css | 18 +++++++----------- 1 file changed, 7 insertions(+), 11 deletions(-) diff --git a/packages/boxed-expression-component/src/table/BeeTable/BeeTable.css b/packages/boxed-expression-component/src/table/BeeTable/BeeTable.css index e7f10dfb167..7dd2813d585 100644 --- a/packages/boxed-expression-component/src/table/BeeTable/BeeTable.css +++ b/packages/boxed-expression-component/src/table/BeeTable/BeeTable.css @@ -203,11 +203,7 @@ border: 0; } -.expression-container .table-component .evaluation-highlights-row-overlay td { - position: relative; -} - -.expression-container .table-component .evaluation-highlights-row-overlay td::before { +.expression-container .table-component tr.evaluation-highlights-row-overlay > td:first-child::before { content: ""; position: absolute; background-color: rgb(215, 201, 255, 0.5); @@ -226,9 +222,9 @@ position: absolute; top: 0px; left: 0px; - height: 55px; - width: 55px; - clip-path: polygon(0% 65%, 65% 0%, 0% 0%); + height: 40px; + width: 40px; + clip-path: polygon(0% 100%, 100% 0%, 0% 0%); padding-left: 0.2em; } @@ -241,9 +237,9 @@ position: absolute; top: 0px; left: 0px; - height: 55px; - width: 55px; - clip-path: polygon(0% 65%, 65% 0%, 0% 0%); + height: 40px; + width: 40px; + clip-path: polygon(0% 100%, 100% 0%, 0% 0%); padding-left: 0.2em; } From 527aad4ce688e92c396d99dd523c8e36537a23af Mon Sep 17 00:00:00 2001 From: Jozef Marko Date: Wed, 30 Oct 2024 13:28:58 +0100 Subject: [PATCH 6/8] Prevent evaluationHitCount in 'if' row --- .../src/api/BeeTable.ts | 1 + .../ConditionalExpression.tsx | 5 +++++ .../DecisionTableExpression.tsx | 5 +++++ .../src/table/BeeTable/BeeTable.tsx | 2 ++ .../src/table/BeeTable/BeeTableBody.tsx | 20 +++++++++++++++---- 5 files changed, 29 insertions(+), 4 deletions(-) diff --git a/packages/boxed-expression-component/src/api/BeeTable.ts b/packages/boxed-expression-component/src/api/BeeTable.ts index b637efe2288..002cafe2c10 100644 --- a/packages/boxed-expression-component/src/api/BeeTable.ts +++ b/packages/boxed-expression-component/src/api/BeeTable.ts @@ -98,6 +98,7 @@ export interface BeeTableProps { resizerStopBehavior: ResizerStopBehavior; lastColumnMinWidth?: number; evaluationHitsCountColumnIndex?: number; + getEvaluationHitsCountSupportedByRow?: (row: ReactTable.Row) => boolean; } /** Possible status for the visibility of the Table's Header */ diff --git a/packages/boxed-expression-component/src/expressions/ConditionalExpression/ConditionalExpression.tsx b/packages/boxed-expression-component/src/expressions/ConditionalExpression/ConditionalExpression.tsx index 774c3a5d6fd..de44afdc6b1 100644 --- a/packages/boxed-expression-component/src/expressions/ConditionalExpression/ConditionalExpression.tsx +++ b/packages/boxed-expression-component/src/expressions/ConditionalExpression/ConditionalExpression.tsx @@ -230,6 +230,10 @@ export function ConditionalExpression({ return row.original.part["@_id"]; }, []); + const getEvaluationHitsCountSupportedByRow = useCallback((row: ReactTable.Row) => { + return row.original.label !== "if"; + }, []); + return (
@@ -253,6 +257,7 @@ export function ConditionalExpression({ shouldShowRowsInlineControls={false} shouldShowColumnsInlineControls={false} evaluationHitsCountColumnIndex={1} + getEvaluationHitsCountSupportedByRow={getEvaluationHitsCountSupportedByRow} />
diff --git a/packages/boxed-expression-component/src/expressions/DecisionTableExpression/DecisionTableExpression.tsx b/packages/boxed-expression-component/src/expressions/DecisionTableExpression/DecisionTableExpression.tsx index 67ec3df601a..e1fe29c0794 100644 --- a/packages/boxed-expression-component/src/expressions/DecisionTableExpression/DecisionTableExpression.tsx +++ b/packages/boxed-expression-component/src/expressions/DecisionTableExpression/DecisionTableExpression.tsx @@ -1045,6 +1045,10 @@ export function DecisionTableExpression({ [beeTableRows.length] ); + const getEvaluationHitsCountSupportedByRow = useCallback((row: ReactTable.Row) => { + return true; + }, []); + return (
@@ -1074,6 +1078,7 @@ export function DecisionTableExpression({ shouldShowRowsInlineControls={true} shouldShowColumnsInlineControls={true} evaluationHitsCountColumnIndex={0} + getEvaluationHitsCountSupportedByRow={getEvaluationHitsCountSupportedByRow} // lastColumnMinWidth={lastColumnMinWidth} // FIXME: Check if this is a good strategy or not when doing https://github.com/apache/incubator-kie-issues/issues/181 />
diff --git a/packages/boxed-expression-component/src/table/BeeTable/BeeTable.tsx b/packages/boxed-expression-component/src/table/BeeTable/BeeTable.tsx index 72786121dbd..6bd01901fbc 100644 --- a/packages/boxed-expression-component/src/table/BeeTable/BeeTable.tsx +++ b/packages/boxed-expression-component/src/table/BeeTable/BeeTable.tsx @@ -104,6 +104,7 @@ export function BeeTableInternal({ lastColumnMinWidth, rowWrapper, evaluationHitsCountColumnIndex, + getEvaluationHitsCountSupportedByRow, }: BeeTableProps & { selectionRef?: React.RefObject; }) { @@ -659,6 +660,7 @@ export function BeeTableInternal({ lastColumnMinWidth={lastColumnMinWidth} isReadOnly={isReadOnly} evaluationHitsCountColumnIndex={evaluationHitsCountColumnIndex} + getEvalationHitsCountSupportedByRow={getEvaluationHitsCountSupportedByRow} /> { isReadOnly: boolean; evaluationHitsCountColumnIndex?: number; + getEvalationHitsCountSupportedByRow?: (row: ReactTable.Row) => boolean; } export function BeeTableBody({ @@ -75,27 +76,38 @@ export function BeeTableBody({ rowWrapper, isReadOnly, evaluationHitsCountColumnIndex, + getEvalationHitsCountSupportedByRow, }: BeeTableBodyProps) { // const { evaluationHitsCountPerId } = useBoxedExpressionEditor(); const evaluationHitsCountPerId: Map = new Map(); evaluationHitsCountPerId.set("_1FA12B9F-288C-42E8-B77F-BE2D3702B7B6", 10); evaluationHitsCountPerId.set("_1FA12B9F-288C-42E8-B77F-BE2D3702B7B7", 20); + evaluationHitsCountPerId.set("_1FA12B9F-288C-42E8-B77F-BE2D3702B7B8", 30); + evaluationHitsCountPerId.set("_1FA12B9F-288C-42E8-B77F-BE2D3702B7B9", 40); + evaluationHitsCountPerId.set("_1FA12B9F-288C-42E8-B77F-BE2D3702B7B0", 50); + evaluationHitsCountPerId.set("_1FA12B9F-288C-42E8-B77F-BE2D3702B7B1", 60); + evaluationHitsCountPerId.set("_1FA12B9F-288C-42E8-B77F-BE2D3702B7B2", 70); + evaluationHitsCountPerId.set("_1FA12B9F-288C-42E8-B77F-BE2D3702B7B3", 80); const renderRow = useCallback( (row: ReactTable.Row, rowIndex: number) => { reactTableInstance.prepareRow(row); const rowKey = getRowKey(row); + const isEvalationHitsCountSupportedByRow: boolean = getEvalationHitsCountSupportedByRow?.(row) ?? false; const rowHitCount = evaluationHitsCountPerId ? evaluationHitsCountPerId?.get(rowKey) ?? 0 : undefined; - const rowClassName = rowHitCount - ? rowKey + (rowHitCount > 0 ? " evaluation-highlights-row-overlay" : "") - : undefined; + const rowClassName = + rowHitCount && isEvalationHitsCountSupportedByRow + ? rowKey + (rowHitCount > 0 ? " evaluation-highlights-row-overlay" : "") + : undefined; const renderTr = () => ( {row.cells.map((cell, cellIndex) => { const columnKey = getColumnKey(reactTableInstance.allColumns[cellIndex]); const shouldDisplayEvaluationHitsCount = - rowHitCount !== undefined && cellIndex === evaluationHitsCountColumnIndex; + rowHitCount !== undefined && + cellIndex === evaluationHitsCountColumnIndex && + isEvalationHitsCountSupportedByRow; return ( {((cell.column.isRowIndexColumn && shouldRenderRowIndexColumn) || !cell.column.isRowIndexColumn) && ( From 22270b1d0e617fe74f514afdf90527e3f4bd7d17 Mon Sep 17 00:00:00 2001 From: Jozef Marko Date: Wed, 30 Oct 2024 16:02:42 +0100 Subject: [PATCH 7/8] Refactor variable names --- .../src/api/BeeTable.ts | 2 ++ .../src/table/BeeTable/BeeTable.css | 6 ++-- .../src/table/BeeTable/BeeTable.tsx | 2 +- .../src/table/BeeTable/BeeTableBody.tsx | 29 ++++++++++--------- .../src/table/BeeTable/BeeTableTd.tsx | 16 +++++----- 5 files changed, 30 insertions(+), 25 deletions(-) diff --git a/packages/boxed-expression-component/src/api/BeeTable.ts b/packages/boxed-expression-component/src/api/BeeTable.ts index 002cafe2c10..8d35e0aa387 100644 --- a/packages/boxed-expression-component/src/api/BeeTable.ts +++ b/packages/boxed-expression-component/src/api/BeeTable.ts @@ -97,7 +97,9 @@ export interface BeeTableProps { shouldShowColumnsInlineControls: boolean; resizerStopBehavior: ResizerStopBehavior; lastColumnMinWidth?: number; + /** Index of the column, where the evaluation hits count should be displayed. If not set, evaluation hits count number is not shown. */ evaluationHitsCountColumnIndex?: number; + /** Method should return true for table rows, that can display evaluation hits count, false otherwise. If not set, BeeTableBody defaults to false. */ getEvaluationHitsCountSupportedByRow?: (row: ReactTable.Row) => boolean; } diff --git a/packages/boxed-expression-component/src/table/BeeTable/BeeTable.css b/packages/boxed-expression-component/src/table/BeeTable/BeeTable.css index 7dd2813d585..2c4c2839784 100644 --- a/packages/boxed-expression-component/src/table/BeeTable/BeeTable.css +++ b/packages/boxed-expression-component/src/table/BeeTable/BeeTable.css @@ -203,7 +203,7 @@ border: 0; } -.expression-container .table-component tr.evaluation-highlights-row-overlay > td:first-child::before { +.expression-container .table-component tr.evaluation-hits-count-row-overlay > td:first-child::before { content: ""; position: absolute; background-color: rgb(215, 201, 255, 0.5); @@ -213,7 +213,7 @@ height: 100%; } -.evaluation-hit-count-overlay-non-colored::before { +.evaluation-hits-count-badge-non-colored::before { content: attr(data-evaluation-hits-count); font-size: 0.8em; text-align: left; @@ -228,7 +228,7 @@ padding-left: 0.2em; } -.evaluation-hit-count-overlay-colored::before { +.evaluation-hits-count-badge-colored::before { content: attr(data-evaluation-hits-count); font-size: 0.8em; text-align: left; diff --git a/packages/boxed-expression-component/src/table/BeeTable/BeeTable.tsx b/packages/boxed-expression-component/src/table/BeeTable/BeeTable.tsx index 6bd01901fbc..f06360b56d4 100644 --- a/packages/boxed-expression-component/src/table/BeeTable/BeeTable.tsx +++ b/packages/boxed-expression-component/src/table/BeeTable/BeeTable.tsx @@ -660,7 +660,7 @@ export function BeeTableInternal({ lastColumnMinWidth={lastColumnMinWidth} isReadOnly={isReadOnly} evaluationHitsCountColumnIndex={evaluationHitsCountColumnIndex} - getEvalationHitsCountSupportedByRow={getEvaluationHitsCountSupportedByRow} + getEvaluationHitsCountSupportedByRow={getEvaluationHitsCountSupportedByRow} /> { rowWrapper?: React.FunctionComponent>; isReadOnly: boolean; + /** See BeeTable.ts */ evaluationHitsCountColumnIndex?: number; - getEvalationHitsCountSupportedByRow?: (row: ReactTable.Row) => boolean; + /** See BeeTable.ts */ + getEvaluationHitsCountSupportedByRow?: (row: ReactTable.Row) => boolean; } export function BeeTableBody({ @@ -76,7 +78,7 @@ export function BeeTableBody({ rowWrapper, isReadOnly, evaluationHitsCountColumnIndex, - getEvalationHitsCountSupportedByRow, + getEvaluationHitsCountSupportedByRow, }: BeeTableBodyProps) { // const { evaluationHitsCountPerId } = useBoxedExpressionEditor(); const evaluationHitsCountPerId: Map = new Map(); @@ -94,20 +96,19 @@ export function BeeTableBody({ reactTableInstance.prepareRow(row); const rowKey = getRowKey(row); - const isEvalationHitsCountSupportedByRow: boolean = getEvalationHitsCountSupportedByRow?.(row) ?? false; - const rowHitCount = evaluationHitsCountPerId ? evaluationHitsCountPerId?.get(rowKey) ?? 0 : undefined; - const rowClassName = - rowHitCount && isEvalationHitsCountSupportedByRow - ? rowKey + (rowHitCount > 0 ? " evaluation-highlights-row-overlay" : "") - : undefined; + const isEvalationHitsCountSupportedByRow: boolean = getEvaluationHitsCountSupportedByRow?.(row) ?? false; + const rowEvaluationHitsCount = evaluationHitsCountPerId ? evaluationHitsCountPerId?.get(rowKey) ?? 0 : undefined; + const canDisplayEvaluationHitsCountRowOverlay = + rowEvaluationHitsCount !== undefined && isEvalationHitsCountSupportedByRow === true; + const rowClassName = canDisplayEvaluationHitsCountRowOverlay + ? rowKey + (rowEvaluationHitsCount > 0 ? " evaluation-hits-count-row-overlay" : "") + : rowKey; const renderTr = () => ( {row.cells.map((cell, cellIndex) => { const columnKey = getColumnKey(reactTableInstance.allColumns[cellIndex]); - const shouldDisplayEvaluationHitsCount = - rowHitCount !== undefined && - cellIndex === evaluationHitsCountColumnIndex && - isEvalationHitsCountSupportedByRow; + const canDisplayEvaluationHitsCountBadge = + canDisplayEvaluationHitsCountRowOverlay && cellIndex === evaluationHitsCountColumnIndex; return ( {((cell.column.isRowIndexColumn && shouldRenderRowIndexColumn) || !cell.column.isRowIndexColumn) && ( @@ -131,8 +132,8 @@ export function BeeTableBody({ cellIndex === reactTableInstance.allColumns.length - 1 ? lastColumnMinWidth : undefined } isReadOnly={isReadOnly} - shouldDisplayEvaluationHitsCount={shouldDisplayEvaluationHitsCount} - evaluationHitsCount={rowHitCount} + canDisplayEvaluationHitsCountBadge={canDisplayEvaluationHitsCountBadge} + evaluationHitsCount={rowEvaluationHitsCount} /> )} diff --git a/packages/boxed-expression-component/src/table/BeeTable/BeeTableTd.tsx b/packages/boxed-expression-component/src/table/BeeTable/BeeTableTd.tsx index d487cce17d9..b9615b7df01 100644 --- a/packages/boxed-expression-component/src/table/BeeTable/BeeTableTd.tsx +++ b/packages/boxed-expression-component/src/table/BeeTable/BeeTableTd.tsx @@ -49,7 +49,9 @@ export interface BeeTableTdProps { onDataCellClick?: (columnID: string) => void; onDataCellKeyUp?: (columnID: string) => void; isReadOnly: boolean; - shouldDisplayEvaluationHitsCount?: boolean; + /** True means the table cell can display evaluation hits count. False means evaluation hits count is not displayed in the table cell. */ + canDisplayEvaluationHitsCountBadge?: boolean; + /** Actuall evaluation hits count number that will be displayed in the table cell if 'canDisplayEvaluationHitsCountBadge' is set to true. */ evaluationHitsCount?: number; } @@ -75,7 +77,7 @@ export function BeeTableTd({ onDataCellClick, onDataCellKeyUp, isReadOnly, - shouldDisplayEvaluationHitsCount, + canDisplayEvaluationHitsCountBadge, evaluationHitsCount, }: BeeTableTdProps) { const [isResizing, setResizing] = useState(false); @@ -229,10 +231,10 @@ export function BeeTableTd({ return onDataCellKeyUp?.(column.id); }, [column.id, onDataCellKeyUp]); - const evaluationHitsCountCss = shouldDisplayEvaluationHitsCount + const evaluationHitsCountBadgeClassName = canDisplayEvaluationHitsCountBadge ? (evaluationHitsCount ?? 0) > 0 - ? "evaluation-hit-count-overlay-colored" - : "evaluation-hit-count-overlay-non-colored" + ? "evaluation-hits-count-badge-colored" + : "evaluation-hits-count-badge-non-colored" : ""; return ( @@ -256,11 +258,11 @@ export function BeeTableTd({ }} > {column.isRowIndexColumn ? ( -
+
{rowIndexLabel}
) : ( -
+
{tdContent} {!isReadOnly && shouldRenderResizer && ( From b2bf4a94087612c3057a74e8eaf7494c2dac2c58 Mon Sep 17 00:00:00 2001 From: Jozef Marko Date: Wed, 30 Oct 2024 16:10:30 +0100 Subject: [PATCH 8/8] Cleanup --- .../src/table/BeeTable/BeeTableBody.tsx | 11 +---------- 1 file changed, 1 insertion(+), 10 deletions(-) diff --git a/packages/boxed-expression-component/src/table/BeeTable/BeeTableBody.tsx b/packages/boxed-expression-component/src/table/BeeTable/BeeTableBody.tsx index c9c084bcbf9..d6ca78b4933 100644 --- a/packages/boxed-expression-component/src/table/BeeTable/BeeTableBody.tsx +++ b/packages/boxed-expression-component/src/table/BeeTable/BeeTableBody.tsx @@ -80,16 +80,7 @@ export function BeeTableBody({ evaluationHitsCountColumnIndex, getEvaluationHitsCountSupportedByRow, }: BeeTableBodyProps) { - // const { evaluationHitsCountPerId } = useBoxedExpressionEditor(); - const evaluationHitsCountPerId: Map = new Map(); - evaluationHitsCountPerId.set("_1FA12B9F-288C-42E8-B77F-BE2D3702B7B6", 10); - evaluationHitsCountPerId.set("_1FA12B9F-288C-42E8-B77F-BE2D3702B7B7", 20); - evaluationHitsCountPerId.set("_1FA12B9F-288C-42E8-B77F-BE2D3702B7B8", 30); - evaluationHitsCountPerId.set("_1FA12B9F-288C-42E8-B77F-BE2D3702B7B9", 40); - evaluationHitsCountPerId.set("_1FA12B9F-288C-42E8-B77F-BE2D3702B7B0", 50); - evaluationHitsCountPerId.set("_1FA12B9F-288C-42E8-B77F-BE2D3702B7B1", 60); - evaluationHitsCountPerId.set("_1FA12B9F-288C-42E8-B77F-BE2D3702B7B2", 70); - evaluationHitsCountPerId.set("_1FA12B9F-288C-42E8-B77F-BE2D3702B7B3", 80); + const { evaluationHitsCountPerId } = useBoxedExpressionEditor(); const renderRow = useCallback( (row: ReactTable.Row, rowIndex: number) => {