kie-issues#1547: DMN Editor: Render evaluation highlights in the Boxed Expression Editor

packages/boxed-expression-component/src/BoxedExpressionEditor.tsx

@@ -59,6 +59,7 @@ export interface BoxedExpressionEditorProps {
   isReadOnly?: boolean;
   /** PMML models available to use on Boxed PMML Function */
   pmmlDocuments?: PmmlDocument[];
+  evaluationHitsCountPerId?: Map<string, number>;
   /** The containing HTMLElement which is scrollable */
   scrollableParentRef: React.RefObject<HTMLElement>;
   /** Parsed variables used for syntax coloring and auto-complete */
@@ -79,6 +80,7 @@ export function BoxedExpressionEditor({
   isResetSupportedOnRootExpression,
   scrollableParentRef,
   pmmlDocuments,
+  evaluationHitsCountPerId,
   onRequestFeelVariables,
   widthsById,
   onWidthsChange,
@@ -103,6 +105,7 @@ export function BoxedExpressionEditor({
         isReadOnly={isReadOnly}
         dataTypes={dataTypes}
         pmmlDocuments={pmmlDocuments}
+        evaluationHitsCountPerId={evaluationHitsCountPerId}
         onRequestFeelVariables={onRequestFeelVariables}
         widthsById={widthsById}
         hideDmn14BoxedExpressions={hideDmn14BoxedExpressions}

packages/boxed-expression-component/src/BoxedExpressionEditorContext.tsx

@@ -34,6 +34,7 @@ export interface BoxedExpressionEditorContextType {
   pmmlDocuments?: PmmlDocument[];
   dataTypes: DmnDataType[];
   isReadOnly?: boolean;
+  evaluationHitsCountPerId?: Map<string, number>;
 
   // State
   currentlyOpenContextMenu: string | undefined;
@@ -74,6 +75,7 @@ export function BoxedExpressionEditorContextProvider({
   beeGwtService,
   children,
   pmmlDocuments,
+  evaluationHitsCountPerId,
   scrollableParentRef,
   onRequestFeelVariables,
   widthsById,
@@ -114,6 +116,7 @@ export function BoxedExpressionEditorContextProvider({
         dataTypes,
         isReadOnly,
         pmmlDocuments,
+        evaluationHitsCountPerId,
 
         //state // FIXME: Move to a separate context (https://github.com/apache/incubator-kie-issues/issues/168)
         currentlyOpenContextMenu,

packages/boxed-expression-component/src/api/BeeTable.ts

@@ -97,6 +97,7 @@ export interface BeeTableProps<R extends object> {
   shouldShowColumnsInlineControls: boolean;
   resizerStopBehavior: ResizerStopBehavior;
   lastColumnMinWidth?: number;
+  evaluationHitsCountColumnIndex?: number;
 }
 
 /** Possible status for the visibility of the Table's Header */

packages/boxed-expression-component/src/expressions/ConditionalExpression/ConditionalExpression.tsx

@@ -226,6 +226,10 @@ export function ConditionalExpression({
     [setExpression]
   );
 
+  const getRowKey = useCallback((row: ReactTable.Row<ROWTYPE>) => {
+    return row.original.part["@_id"];
+  }, []);
+
   return (
     <NestedExpressionContainerContext.Provider value={nestedExpressionContainerValue}>
       <div data-testid={"kie-tools--boxed-expression-component---conditional"}>
@@ -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}
         />
       </div>
     </NestedExpressionContainerContext.Provider>

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
       />
     </div>

packages/boxed-expression-component/src/table/BeeTable/BeeTable.css

@@ -203,6 +203,46 @@
   border: 0;
 }
 
+.expression-container .table-component tr.evaluation-highlights-row-overlay > td:first-child::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: 40px;
+  width: 40px;
+  clip-path: polygon(0% 100%, 100% 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: 40px;
+  width: 40px;
+  clip-path: polygon(0% 100%, 100% 0%, 0% 0%);
+  padding-left: 0.2em;
+}
+
 .expression-container .table-component table tbody tr td.row-index-cell-column {
   padding: 1.1em 0;
 }

packages/boxed-expression-component/src/table/BeeTable/BeeTable.tsx

@@ -103,6 +103,7 @@ export function BeeTableInternal<R extends object>({
   resizerStopBehavior,
   lastColumnMinWidth,
   rowWrapper,
+  evaluationHitsCountColumnIndex,
 }: BeeTableProps<R> & {
   selectionRef?: React.RefObject<BeeTableSelectionRef>;
 }) {
@@ -657,6 +658,7 @@ export function BeeTableInternal<R extends object>({
           onDataCellKeyUp={onDataCellKeyUp}
           lastColumnMinWidth={lastColumnMinWidth}
           isReadOnly={isReadOnly}
+          evaluationHitsCountColumnIndex={evaluationHitsCountColumnIndex}
         />
       </table>
       <BeeTableContextMenuHandler

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<R extends object> {
   /** Table instance */
@@ -55,6 +56,7 @@ export interface BeeTableBodyProps<R extends object> {
   rowWrapper?: React.FunctionComponent<React.PropsWithChildren<{ row: R; rowIndex: number }>>;
 
   isReadOnly: boolean;
+  evaluationHitsCountColumnIndex?: number;
 }
 
 export function BeeTableBody<R extends object>({
@@ -72,15 +74,28 @@ export function BeeTableBody<R extends object>({
   lastColumnMinWidth,
   rowWrapper,
   isReadOnly,
+  evaluationHitsCountColumnIndex,
 }: BeeTableBodyProps<R>) {
+  // const { evaluationHitsCountPerId } = useBoxedExpressionEditor();
+  const evaluationHitsCountPerId: Map<string, number> = new Map();
+  evaluationHitsCountPerId.set("_1FA12B9F-288C-42E8-B77F-BE2D3702B7B6", 10);
+  evaluationHitsCountPerId.set("_1FA12B9F-288C-42E8-B77F-BE2D3702B7B7", 20);
+
   const renderRow = useCallback(
     (row: ReactTable.Row<R>, rowIndex: number) => {
       reactTableInstance.prepareRow(row);
 
+      const rowKey = getRowKey(row);
+      const rowHitCount = evaluationHitsCountPerId ? evaluationHitsCountPerId?.get(rowKey) ?? 0 : undefined;
+      const rowClassName = rowHitCount
+        ? rowKey + (rowHitCount > 0 ? " evaluation-highlights-row-overlay" : "")
+        : undefined;
       const renderTr = () => (
-        <tr className={rowKey} key={rowKey} data-testid={`kie-tools--bee--expression-row-${rowIndex}`}>
+        <tr className={rowClassName} key={rowKey} data-testid={`kie-tools--bee--expression-row-${rowIndex}`}>
           {row.cells.map((cell, cellIndex) => {
             const columnKey = getColumnKey(reactTableInstance.allColumns[cellIndex]);
+            const shouldDisplayEvaluationHitsCount =
+              rowHitCount !== undefined && cellIndex === evaluationHitsCountColumnIndex;
             return (
               <React.Fragment key={columnKey}>
                 {((cell.column.isRowIndexColumn && shouldRenderRowIndexColumn) || !cell.column.isRowIndexColumn) && (
@@ -104,6 +119,8 @@ export function BeeTableBody<R extends object>({
                       cellIndex === reactTableInstance.allColumns.length - 1 ? lastColumnMinWidth : undefined
                     }
                     isReadOnly={isReadOnly}
+                    shouldDisplayEvaluationHitsCount={shouldDisplayEvaluationHitsCount}
+                    evaluationHitsCount={rowHitCount}
                   />
                 )}
               </React.Fragment>
@@ -114,8 +131,6 @@ export function BeeTableBody<R extends object>({
 
       const RowWrapper = rowWrapper;
 
-      const rowKey = getRowKey(row);
-
       return (
         <React.Fragment key={rowKey}>
           {RowWrapper ? (

packages/boxed-expression-component/src/table/BeeTable/BeeTableTd.tsx

@@ -49,6 +49,8 @@ export interface BeeTableTdProps<R extends object> {
   onDataCellClick?: (columnID: string) => void;
   onDataCellKeyUp?: (columnID: string) => void;
   isReadOnly: boolean;
+  shouldDisplayEvaluationHitsCount?: boolean;
+  evaluationHitsCount?: number;
 }
 
 export type HoverInfo =
@@ -73,6 +75,8 @@ export function BeeTableTd<R extends object>({
   onDataCellClick,
   onDataCellKeyUp,
   isReadOnly,
+  shouldDisplayEvaluationHitsCount,
+  evaluationHitsCount,
 }: BeeTableTdProps<R>) {
   const [isResizing, setResizing] = useState(false);
   const [hoverInfo, setHoverInfo] = useState<HoverInfo>({ isHovered: false });
@@ -225,6 +229,12 @@ export function BeeTableTd<R extends object>({
     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 (
     <BeeTableCoordinatesContextProvider coordinates={coordinates}>
       <td
@@ -246,9 +256,11 @@ export function BeeTableTd<R extends object>({
         }}
       >
         {column.isRowIndexColumn ? (
-          <>{rowIndexLabel}</>
+          <div className={evaluationHitsCountCss} data-evaluation-hits-count={evaluationHitsCount}>
+            {rowIndexLabel}
+          </div>
         ) : (
-          <>
+          <div className={evaluationHitsCountCss} data-evaluation-hits-count={evaluationHitsCount}>
             {tdContent}
 
             {!isReadOnly && shouldRenderResizer && (
@@ -262,7 +274,7 @@ export function BeeTableTd<R extends object>({
                 setResizing={setResizing}
               />
             )}
-          </>
+          </div>
         )}
 
         {!isReadOnly &&