diff --git a/libs/shared/lib/vis/visualizations/paohvis/components/HyperRangeBlock.tsx b/libs/shared/lib/vis/visualizations/paohvis/components/HyperRangeBlock.tsx
index a313a2950ef7e91b0d46ead168332423cf43110b..f0cdcd4b0702294afc0da5117372f77a4948fbac 100644
--- a/libs/shared/lib/vis/visualizations/paohvis/components/HyperRangeBlock.tsx
+++ b/libs/shared/lib/vis/visualizations/paohvis/components/HyperRangeBlock.tsx
@@ -174,9 +174,10 @@ export const HyperEdgeRangesBlock: React.FC<HyperEdgeRangesBlockProps> = ({
{columnHeaderInformation.map((row, index) => (
<g key={'text-col-' + index} transform={'translate(' + accumulatedWidthHeaders[index] + ',' + 0 + ')'}>
<rect width={row.width} height={rowHeight} fill={'hsl(var(--clr-sec--0))'} strokeWidth={0}></rect>
- <text x={row.width * marginText} y={rowHeight / 2} dy="0" dominantBaseline="middle" className={classTopTextColumns}>
- {row.data[indexRows]}
- </text>
+
+ <foreignObject x="0" y="0" width={row.width} height={rowHeight}>
+ <span className={`${classTopTextColumns}`}>{row.data[indexRows]}</span>
+ </foreignObject>
</g>
))}
</g>
@@ -208,9 +209,10 @@ export const HyperEdgeRangesBlock: React.FC<HyperEdgeRangesBlockProps> = ({
}}
>
<rect width={headerData.width} height={rowHeight} fill={'hsl(var(--clr-sec--200))'} opacity={1.0} strokeWidth={0}></rect>
- <text x={marginText * headerData.width} y={0.5 * rowHeight} dy="0" dominantBaseline="middle" className={classTopTextColumns}>
- {headerData.header}
- </text>
+
+ <foreignObject x="0" y="0" width={headerData.width} height={rowHeight}>
+ <span className={`${classTopTextColumns}`}>{headerData.header}</span>
+ </foreignObject>
{iconComponents[headerIndex] && isHovered && (
<svg
xmlns="http://www.w3.org/2000/svg"
diff --git a/libs/shared/lib/vis/visualizations/paohvis/components/RowLabels.tsx b/libs/shared/lib/vis/visualizations/paohvis/components/RowLabels.tsx
index 425472216e37bd60ab2cb374ef403cb21898f595..d71c0d8aa3794e42fb5d3dee26d5eb2aa58e42b4 100644
--- a/libs/shared/lib/vis/visualizations/paohvis/components/RowLabels.tsx
+++ b/libs/shared/lib/vis/visualizations/paohvis/components/RowLabels.tsx
@@ -100,9 +100,9 @@ export const RowLabels = ({
fill={indexRows % 2 === 0 ? 'hsl(var(--clr-sec--50))' : 'hsl(var(--clr-sec--0))'}
strokeWidth={0}
></rect>
- <text x={row.width * marginText} y={rowHeight / 2} dy="0" dominantBaseline="middle" className={classTopTextColums}>
- {row.data[indexRows]}
- </text>
+ <foreignObject x="0" y="0" width={row.width} height={rowHeight}>
+ <span className={`${classTopTextColums}`}>{row.data[indexRows]}</span>
+ </foreignObject>
</g>
))}
</g>
@@ -153,9 +153,11 @@ export const RowLabels = ({
}}
>
<rect width={row.width} height={rowHeight} fill={'hsl(var(--clr-sec--200))'} opacity={1.0} strokeWidth={0}></rect>
- <text x={marginText * row.width} y={0.5 * rowHeight} dy="0" dominantBaseline="middle" className={classTopTextColums}>
- {row.header}
- </text>
+
+ <foreignObject x="0" y="0" width={row.width} height={rowHeight}>
+ <span className={`${classTopTextColums}`}>{row.header}</span>
+ </foreignObject>
+
{iconComponents[indexRows] && isHovered && (
<svg
xmlns="http://www.w3.org/2000/svg"
diff --git a/libs/shared/lib/vis/visualizations/paohvis/docs.mdx b/libs/shared/lib/vis/visualizations/paohvis/docs.mdx
deleted file mode 100644
index f6601950532a4117fe058747cd7e564721eb03ba..0000000000000000000000000000000000000000
--- a/libs/shared/lib/vis/visualizations/paohvis/docs.mdx
+++ /dev/null
@@ -1,45 +0,0 @@
-import { Meta, Unstyled } from '@storybook/blocks';
-
-<Meta title="Visualizations/Paohvis" />
-
-# Paohvis documentation
-
-## Components
-
-1. [MakePaohvisMenu](#MakePaohvisMenu)
-2. [RowLabelColumn](#RowLabelColumn)
-3. [HyperEdgesRange](#HyperEdgesRange)
-4. [PaohvisFilterComponent](#PaohvisFilterComponent)
-5. [Important functions](#Importantfunctions)
-
-## MakePaohvisMenu
-
-Renders the menu to configure PAOHvis
-
-## RowLabelColumn
-
-Renders the left column with row labels
-
-## HyperEdgesRange
-
-Renders the table and the hyperedges
-
-## PaohvisFilterComponent
-
-Manage the filtering of the hyperedges
-
-# Important functions: toPaohvisDataParserUsercase
-
-toPaohvisDataParserUsercase(): Given a paohvis configuration and a queryResult it creates a data structure to make the paohvis visualization.
-
-1: parseQueryResult(PaohvisAxisInfo, nodeOrder: PaohvisNodeOrder)
-
-# Important functions: SortUseCase
-
-Responsible for sorting the data for the ToPaohvisDataParser. Given:
-
-- nodeOrder: [ alphabetical = 'Alphabetical', degree = 'Degree (amount of hyperedges)', byGroup = 'By Group' ]
-- rowNodes: array nodes
-- hyperEdgeDegree: nodes with its hyperedge degrees
-
-SortUseCase.sortNodes(nodeOrder, rowNodes, hyperEdgeDegree) does not return anything, just sorts the nodes array.
diff --git a/libs/shared/lib/vis/visualizations/paohvis/paohvis.tsx b/libs/shared/lib/vis/visualizations/paohvis/paohvis.tsx
index ada3e312ec8afe395804746b88940af6658a0341..fd1d42c3be8f73fbd943f7c7164cb3f524305a03 100644
--- a/libs/shared/lib/vis/visualizations/paohvis/paohvis.tsx
+++ b/libs/shared/lib/vis/visualizations/paohvis/paohvis.tsx
@@ -115,7 +115,8 @@ export const PaohVis = ({ data, graphMetadata, schema, settings, updateSettings
const [widthTotalColumnInformation, setWidthTotalColumnInformation] = useState<number>(0);
// text text-sm, font-semibold
- const classTopTextColumns = 'font-inter font-medium text-xs stroke-none text-secondary-800';
+ const classTopTextColumns =
+ 'font-inter font-medium text-xs stroke-none text-secondary-800 mx-1 flex items-center overflow-hidden text-ellipsis';
const configStyle = {
colorText: 'hsl(var(--clr-sec--800))',
@@ -144,17 +145,17 @@ export const PaohVis = ({ data, graphMetadata, schema, settings, updateSettings
const onMouseEnterRowLabels = (event: React.MouseEvent<SVGGElement, MouseEvent>) => {
const targetClassList = (event.currentTarget as SVGGElement).classList;
// all elements - unselect
- selectAll('.rowsLabel').selectAll('text').attr('fill', configStyle.colorTextUnselect);
+ selectAll('.rowsLabel').selectAll('span').style('color', configStyle.colorTextUnselect);
selectAll('.' + targetClassList[1])
- .selectAll('text')
- .attr('fill', configStyle.colorText);
+ .selectAll('span')
+ .style('color', configStyle.colorText);
// all hyperedges - unselect
const hyperEdgeBlock = selectAll('.hyperEdgeBlock');
hyperEdgeBlock.selectAll('circle').attr('stroke-opacity', '.3');
hyperEdgeBlock.selectAll('line').attr('opacity', '.3');
- selectAll('.text-columns').selectAll('text').attr('fill', configStyle.colorTextUnselect);
+ selectAll('.text-columns').selectAll('span').style('color', configStyle.colorTextUnselect);
// get row selected
const rowSelection: number = parseInt(targetClassList[1].substring('row-'.length), 10);
@@ -167,8 +168,8 @@ export const PaohVis = ({ data, graphMetadata, schema, settings, updateSettings
const classList = Array.from(hyperEdge.classList);
// text columns
selectAll('.col-' + classList[1].substring('hyperEdge-col-'.length))
- .selectAll('text')
- .attr('fill', configStyle.colorText);
+ .selectAll('span')
+ .style('color', configStyle.colorText);
// hypererdge
select('.' + classList[1])
@@ -187,20 +188,20 @@ export const PaohVis = ({ data, graphMetadata, schema, settings, updateSettings
.each(function () {
const circleInside: number = parseInt(select(this).attr('class').substring('circle-'.length), 10);
selectAll('.row-' + (circleInside - (currentPageRows?.startIndexRow ?? 0)))
- .selectAll('text')
- .attr('fill', configStyle.colorText);
+ .selectAll('span')
+ .style('color', configStyle.colorText);
});
}
});
};
const onMouseLeaveRowLabels = () => {
- selectAll('.rowsLabel').selectAll('text').attr('fill', configStyle.colorText);
+ selectAll('.rowsLabel').selectAll('span').style('color', configStyle.colorText);
const hyperEdgeBlock = selectAll('.hyperEdgeBlock');
hyperEdgeBlock.selectAll('circle').attr('stroke-opacity', '1');
hyperEdgeBlock.selectAll('circle').attr('fill', 'white');
hyperEdgeBlock.selectAll('line').attr('opacity', '1');
- selectAll('.colsLabel').selectAll('text').attr('fill', configStyle.colorText);
+ selectAll('.colsLabel').selectAll('span').style('color', configStyle.colorText);
};
const onMouseEnterHyperEdge = (event: React.MouseEvent<SVGGElement, MouseEvent>) => {
@@ -211,8 +212,8 @@ export const PaohVis = ({ data, graphMetadata, schema, settings, updateSettings
hyperEdgeBlock.selectAll('circle').attr('stroke-opacity', '.3');
hyperEdgeBlock.selectAll('line').attr('opacity', '.3');
// all elements: column text and row text
- selectAll('.colsLabel').selectAll('text').attr('fill', configStyle.colorTextUnselect);
- selectAll('.rowsLabel').selectAll('text').attr('fill', configStyle.colorTextUnselect);
+ selectAll('.colsLabel').selectAll('span').style('color', configStyle.colorTextUnselect);
+ selectAll('.rowsLabel').selectAll('span').style('color', configStyle.colorTextUnselect);
// selected elements
const hyperEdgeSelected = select('.' + targetClassList[1]);
@@ -222,9 +223,10 @@ export const PaohVis = ({ data, graphMetadata, schema, settings, updateSettings
// selected elements col text
const columnSelection = targetClassList[1].substring('hyperEdge-'.length);
+
selectAll('.' + columnSelection)
- .selectAll('text')
- .attr('fill', configStyle.colorText);
+ .selectAll('span')
+ .style('color', configStyle.colorText);
// selected elements nodes text
hyperEdgeSelected.selectAll('circle').each(function (d, i) {
@@ -234,15 +236,15 @@ export const PaohVis = ({ data, graphMetadata, schema, settings, updateSettings
if (currentPageRows) {
const indexNumber = parseInt(index);
const rowSelector = `.row-${indexNumber - currentPageRows.startIndexRow}`;
- select(rowSelector).selectAll('text').attr('fill', configStyle.colorText);
+ select(rowSelector).selectAll('span').style('color', configStyle.colorText);
}
});
};
const onMouseLeaveHyperEdge = () => {
// all elements
- selectAll('.colsLabel').selectAll('text').attr('fill', configStyle.colorText);
- selectAll('.rowsLabel').selectAll('text').attr('fill', configStyle.colorText);
+ selectAll('.colsLabel').selectAll('span').style('color', configStyle.colorText);
+ selectAll('.rowsLabel').selectAll('span').style('color', configStyle.colorText);
const hyperEdgeBlock = selectAll('.hyperEdgeBlock');
hyperEdgeBlock.selectAll('circle').attr('stroke-opacity', '1');
@@ -837,6 +839,7 @@ export const PaohVis = ({ data, graphMetadata, schema, settings, updateSettings
return (
<svg
+ className="m-1"
ref={svgRef}
style={{
// width: computedSizesSvg.tableWidthWithExtraColumnLabelWidth,