Visual fixes on paohvis

fix hover, icons, and background rectangles

libs/shared/lib/vis/visualizations/paohvis/components/RowLabels.tsx

 import React, { useEffect, useState, useMemo } from 'react';
 import { CustomLine } from './CustomLine';
 import { RowInformation } from '../types';
-import { g } from 'vitest/dist/suite-UrZdHRff';
+import { Icon } from '@graphpolaris/shared/lib/components/icon';
 
 interface RowLabelsProps {
   dataRows: RowInformation;
@@ -32,7 +32,6 @@ export const RowLabels = ({
   onMouseLeaveRowLabels,
   handleClickHeaderSorting,
 }: RowLabelsProps) => {
-  console.log(numColumns);
   const accumulatedWidthHeadersTotalValue = dataRows.reduce((sum, item) => sum + item.width, 0);
   const accumulatedWidthHeaders = [0];
   let sum = 0;
@@ -124,7 +123,14 @@ export const RowLabels = ({
                     </g>
                   ))}
                 </g>
-                <CustomLine x1={0} x2={rowLabelColumnWidth} y1={0} y2={0} strokeWidth={0.025 * rowHeight} className="fill-secondary-300" />
+                <CustomLine
+                  x1={0}
+                  x2={rowLabelColumnWidth}
+                  y1={0}
+                  y2={0}
+                  strokeWidth={0.025 * rowHeight}
+                  className={configStyle.colorLinesGridByClass}
+                />
                 {indexRows === dataRows[0].data.length - 1 && (
                   <CustomLine
                     x1={0}
@@ -136,6 +142,7 @@ export const RowLabels = ({
                   />
                 )}
               </g>
+              {/* 
               <g
                 key={'content_rectangleGrid' + indexRows}
                 transform={'translate(' + (accumulatedWidthHeadersTotalValue + rowHeight) + ',' + (yOffset + indexRows * rowHeight) + ')'}
@@ -147,6 +154,7 @@ export const RowLabels = ({
                   strokeWidth={0}
                 ></rect>
               </g>
+              */}
             </g>
           ))}
 
@@ -155,7 +163,7 @@ export const RowLabels = ({
             <g key={'headersContent-' + indexRows}>
               <g
                 key={'gHeadersRows-' + indexRows}
-                className={`headersRows-${row.header} cursor-pointer fill-secondary-200 hover:fill-secondary-300`}
+                className={`headersRows-${row.header} cursor-pointer group`}
                 transform={'translate(' + accumulatedWidthHeaders[indexRows] + ',' + (yOffset - rowHeight) + ')'}
                 onClick={(event) => {
                   handleClickHeaderSorting(event);
@@ -172,7 +180,7 @@ export const RowLabels = ({
                 <rect
                   width={dataRows.length - 1 === indexRows ? row.width + rowHeight : row.width}
                   height={rowHeight}
-                  className="fill-secondary-200"
+                  className="fill-secondary-200 group-hover:fill-secondary-300"
                   opacity={1.0}
                   strokeWidth={0}
                 ></rect>
@@ -185,15 +193,11 @@ export const RowLabels = ({
                     </span>
                   </div>
                 </foreignObject>
-                {iconComponents[indexRows] && isHovered && (
-                  <svg
-                    xmlns="http://www.w3.org/2000/svg"
-                    width={2 * row.width - rowHeight}
-                    height={rowHeight}
-                    style={{ color: iconColors[indexRows], stroke: 'none' }}
-                  >
-                    {iconComponents[indexRows][indexRows]}
-                  </svg>
+
+                {iconComponents[indexRows] !== undefined && iconComponents[indexRows][indexRows] !== undefined && isHovered && (
+                  <foreignObject x={row.width - rowHeight} y="0" width={row.width} height={rowHeight}>
+                    <Icon component={iconComponents[indexRows][indexRows]} size={20} color={iconColors[indexRows]} />
+                  </foreignObject>
                 )}
               </g>
               <CustomLine