fix: consider width hyperedge line for correct alignment

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

@@ -105,7 +105,7 @@ export const HyperEdgeRangesBlock: React.FC<HyperEdgeRangesBlockProps> = ({
     setIconColors(iconColorsTemporal);
     setIconComponents(updatedIconComponents);
   }, [sortState, headerState, hoverRowIndex]);
-
+  const widthHyperEdge = 0.075 * rowHeight;
   return (
     <>
       <g key={'hyperEdgeInformationTop'} className="hyperEdgeInformation">
@@ -316,7 +316,7 @@ export const HyperEdgeRangesBlock: React.FC<HyperEdgeRangesBlockProps> = ({
             >
               <g
                 key={'groupBlockExtra-' + indexHyperEdgeRange}
-                transform={`translate(${rowLabelColumnWidth + indexHyperEdgeRange * rowHeight + 0.5 * rowHeight},${yOffset + 0.5 * rowHeight})`}
+                transform={`translate(${rowLabelColumnWidth + indexHyperEdgeRange * rowHeight + 0.5 * rowHeight - widthHyperEdge / 2.0},${yOffset + 0.5 * rowHeight})`}
               >
                 {currentPageRows && dataLinesHyperedges[indexHyperEdgeRange]?.valid && (
                   <CustomLine
@@ -325,7 +325,7 @@ export const HyperEdgeRangesBlock: React.FC<HyperEdgeRangesBlockProps> = ({
                     y1={(dataLinesHyperedges[indexHyperEdgeRange].y0 - currentPageRows.startIndexRow) * rowHeight}
                     x2={0}
                     y2={(dataLinesHyperedges[indexHyperEdgeRange].y1 - currentPageRows.startIndexRow) * rowHeight}
-                    strokeWidth={0.075 * rowHeight}
+                    strokeWidth={widthHyperEdge}
                     className={configStyle.colorLinesGridByClass}
                   />
                 )}