diff --git a/libs/shared/lib/components/icon/index.tsx b/libs/shared/lib/components/icon/index.tsx index d1697fc2963a03a2ecee0569e07599202aed5a6b..67b824fcc8d1303aa0c86ec1ab324807252b75f2 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 2cb51f60dae2a357acd804e5900a627ee654af9e..0fd206555a79ed48520d80d1c43d57f89584f3a3 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 d91be414849a4cf59fd72a0fbafdc92e2e9892e9..7744fb88e4af25ef7b87331a2562548f276dfb68 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 481696573b0f073fae3a764aab64cc1f8879bdda..65ceae38c3f9792a6711749ba7610e933c0e6f15 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 8552ffd7c505f4b6a678e7f088807b3e09b365fe..7ecea0a2d43a49c7477166f1131fb72d6d04f67f 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)); +}