From c497f6f0ef1c8b6beac66ef905e103d093671815 Mon Sep 17 00:00:00 2001
From: MarcosPierasNL <pieras.marcos@gmail.com>
Date: Mon, 19 Aug 2024 10:43:08 +0200
Subject: [PATCH] fix: center icons headers and include icons size when
truncating text
---
libs/shared/lib/components/icon/index.tsx | 4 +++-
.../paohvis/components/HyperRangeBlock.tsx | 12 ++++++++++--
.../paohvis/components/RowLabels.tsx | 14 +++++++++++---
.../lib/vis/visualizations/paohvis/paohvis.tsx | 1 -
.../lib/vis/visualizations/paohvis/utils/utils.tsx | 4 ++++
5 files changed, 28 insertions(+), 7 deletions(-)
diff --git a/libs/shared/lib/components/icon/index.tsx b/libs/shared/lib/components/icon/index.tsx
index d1697fc29..67b824fcc 100644
--- a/libs/shared/lib/components/icon/index.tsx
+++ b/libs/shared/lib/components/icon/index.tsx
@@ -2,7 +2,9 @@ import React, { ReactElement, ReactNode } from 'react';
import { SVGProps } from 'react';
// Define Sizes and IconProps types
-export type Sizes = 12 | 14 | 16 | 20 | 24 | 28 | 32 | 36 | 40;
+export type Sizes = 8 | 10 | 12 | 14 | 16 | 20 | 24 | 28 | 32 | 36 | 40;
+export const sizesArray: Sizes[] = [8, 10, 12, 14, 16, 20, 24, 28, 32, 36, 40];
+
export type IconProps = SVGProps<SVGSVGElement> & {
component?: ReactNode | ReactElement<any> | string;
size?: Sizes;
diff --git a/libs/shared/lib/vis/visualizations/paohvis/components/HyperRangeBlock.tsx b/libs/shared/lib/vis/visualizations/paohvis/components/HyperRangeBlock.tsx
index 2cb51f60d..0fd206555 100644
--- a/libs/shared/lib/vis/visualizations/paohvis/components/HyperRangeBlock.tsx
+++ b/libs/shared/lib/vis/visualizations/paohvis/components/HyperRangeBlock.tsx
@@ -3,6 +3,7 @@ import { CustomLine } from './CustomLine';
import { LinesHyperEdges, PaohvisDataPaginated, RowInformation } from '../types';
import { Icon } from '@graphpolaris/shared/lib/components/icon';
import { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider } from '@graphpolaris/shared/lib/components/tooltip';
+import { getClosestSize } from '../utils/utils';
interface HyperEdgeRangesBlockProps {
dataModel: PaohvisDataPaginated;
@@ -232,7 +233,7 @@ export const HyperEdgeRangesBlock: React.FC<HyperEdgeRangesBlockProps> = ({
strokeWidth={0}
></rect>
- <foreignObject x="0" y="0" width={headerData.width} height={rowHeight}>
+ <foreignObject x="0" y="0" width={headerData.width - rowHeight} height={rowHeight}>
<div className="w-full h-full flex justify-left">
<span className={`${classTopTextColumns} font-sans`} style={{ fontSize: `${adjustedFontSize}rem` }}>
{headerData.header !== undefined && (typeof headerData.header !== 'object' || Array.isArray(headerData.header))
@@ -244,7 +245,14 @@ export const HyperEdgeRangesBlock: React.FC<HyperEdgeRangesBlockProps> = ({
{iconComponents[headerIndex] !== undefined && iconComponents[headerIndex][headerIndex] !== undefined && isHovered && (
<foreignObject x={headerData.width - rowHeight} y="0" width={headerData.width} height={rowHeight}>
- <Icon component={iconComponents[headerIndex][headerIndex]} size={20} color={iconColors[headerIndex]} />
+ <div className="flex items-center justify-right w-full h-full">
+ <Icon
+ component={iconComponents[headerIndex][headerIndex]}
+ className="inline-flex"
+ size={getClosestSize(rowHeight)}
+ color={iconColors[headerIndex]}
+ />
+ </div>
</foreignObject>
)}
<CustomLine
diff --git a/libs/shared/lib/vis/visualizations/paohvis/components/RowLabels.tsx b/libs/shared/lib/vis/visualizations/paohvis/components/RowLabels.tsx
index d91be4148..7744fb88e 100644
--- a/libs/shared/lib/vis/visualizations/paohvis/components/RowLabels.tsx
+++ b/libs/shared/lib/vis/visualizations/paohvis/components/RowLabels.tsx
@@ -1,6 +1,7 @@
import React, { useEffect, useState, useMemo } from 'react';
import { CustomLine } from './CustomLine';
import { RowInformation } from '../types';
+import { getClosestSize } from '../utils/utils';
import { Icon } from '@graphpolaris/shared/lib/components/icon';
import { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider } from '@graphpolaris/shared/lib/components/tooltip';
@@ -85,6 +86,7 @@ export const RowLabels = ({
setIconColors(iconColorsTemporal);
setIconComponents(updatedIconComponents);
}, [sortState, headerState, hoverRowIndex]);
+
return (
<>
<g key={'rowLabelsInformation'} className="rowLabelsInformation">
@@ -195,7 +197,7 @@ export const RowLabels = ({
opacity={1.0}
strokeWidth={0}
></rect>
- <foreignObject x="0" y="0" width={row.width} height={rowHeight}>
+ <foreignObject x="0" y="0" width={row.width - rowHeight} height={rowHeight}>
<div className="w-full h-full flex justify-left">
<span className={`${classTopTextColumns} font-sans`} style={{ fontSize: `${adjustedFontSize}rem` }}>
{row.header !== undefined && (typeof row.header !== 'object' || Array.isArray(row.header))
@@ -206,8 +208,14 @@ export const RowLabels = ({
</foreignObject>
{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 x={row.width - rowHeight} y={0} width={row.width} height={rowHeight}>
+ <div className="flex items-center justify-right w-full h-full">
+ <Icon
+ component={iconComponents[indexRows][indexRows]}
+ size={getClosestSize(rowHeight)}
+ color={iconColors[indexRows]}
+ />
+ </div>
</foreignObject>
)}
</g>
diff --git a/libs/shared/lib/vis/visualizations/paohvis/paohvis.tsx b/libs/shared/lib/vis/visualizations/paohvis/paohvis.tsx
index 481696573..65ceae38c 100644
--- a/libs/shared/lib/vis/visualizations/paohvis/paohvis.tsx
+++ b/libs/shared/lib/vis/visualizations/paohvis/paohvis.tsx
@@ -132,7 +132,6 @@ export const PaohVis = ({ data, graphMetadata, schema, settings, updateSettings
maxSizeTextColumns: 120,
maxSizeTextRows: 120,
maxSizeTextID: 70,
- marginText: 0.05,
sizeIcons: 16,
}),
[settings],
diff --git a/libs/shared/lib/vis/visualizations/paohvis/utils/utils.tsx b/libs/shared/lib/vis/visualizations/paohvis/utils/utils.tsx
index 8552ffd7c..7ecea0a2d 100644
--- a/libs/shared/lib/vis/visualizations/paohvis/utils/utils.tsx
+++ b/libs/shared/lib/vis/visualizations/paohvis/utils/utils.tsx
@@ -12,6 +12,7 @@ import {
import { MultiGraph } from 'graphology';
import { Node } from '@graphpolaris/shared/lib/data-access/store/graphQueryResultSlice';
import { group } from 'd3';
+import { Sizes, sizesArray } from '@graphpolaris/shared/lib/components/icon';
/**
* Takes a schema result and calculates all the entity names, and relation names and attribute names per entity.
@@ -672,3 +673,6 @@ export const processDataColumn = (dataColumn: string, firstRowData: any, data: a
return newData2Render;
};
+export function getClosestSize(rowHeight: number): Sizes {
+ return sizesArray.reduce((prev, curr) => (Math.abs(curr - rowHeight) < Math.abs(prev - rowHeight) ? curr : prev));
+}
--
GitLab