From 2c088447d6e6cdf9f6582116728c0949ac37deb7 Mon Sep 17 00:00:00 2001
From: MarcosPierasNL <pieras.marcos@gmail.com>
Date: Thu, 20 Jun 2024 11:24:47 +0200
Subject: [PATCH] fix: headers overlap, handle undefined text
---
.../paohvis/components/HyperRangeBlock.tsx | 83 +++++++++-------
.../paohvis/components/RowLabels.tsx | 48 +++++++---
.../paohvis/models/PaohvisHolder.test.tsx | 32 -------
.../paohvis/models/PaohvisHolder.tsx | 57 -----------
.../paohvis/models/PaohvisListener.tsx | 16 ----
.../vis/visualizations/paohvis/paohvis.tsx | 96 +++++++++----------
.../utils/ToPaohvisDataParserUsecase.tsx | 15 ---
7 files changed, 132 insertions(+), 215 deletions(-)
delete mode 100644 libs/shared/lib/vis/visualizations/paohvis/models/PaohvisHolder.test.tsx
delete mode 100644 libs/shared/lib/vis/visualizations/paohvis/models/PaohvisHolder.tsx
delete mode 100644 libs/shared/lib/vis/visualizations/paohvis/models/PaohvisListener.tsx
delete mode 100644 libs/shared/lib/vis/visualizations/paohvis/utils/ToPaohvisDataParserUsecase.tsx
diff --git a/libs/shared/lib/vis/visualizations/paohvis/components/HyperRangeBlock.tsx b/libs/shared/lib/vis/visualizations/paohvis/components/HyperRangeBlock.tsx
index f0cdcd4b0..04d1df800 100644
--- a/libs/shared/lib/vis/visualizations/paohvis/components/HyperRangeBlock.tsx
+++ b/libs/shared/lib/vis/visualizations/paohvis/components/HyperRangeBlock.tsx
@@ -1,8 +1,9 @@
import React, { useEffect, useState, useMemo } from 'react';
import { CustomLine } from './CustomLine';
import { PaohvisDataPaginated, RowInformation, LinesHyperedges } from '../types';
-import { ArrowDownward, ArrowUpward, Sort } from '@mui/icons-material';
+import { ArrowDownward, ArrowUpward, ContactPageSharp, Sort } from '@mui/icons-material';
import { select } from 'd3';
+import { c } from 'vite/dist/node/types.d-FdqQ54oU';
interface HyperEdgeRangesBlockProps {
dataModel: PaohvisDataPaginated;
@@ -46,23 +47,6 @@ export const HyperEdgeRangesBlock: React.FC<HyperEdgeRangesBlockProps> = ({
onMouseLeaveHyperEdge,
handleClickHeaderSorting,
}) => {
- /*
- const [linePositions, setLinePositions] = useState<{ y0: number; y1: number; valid: boolean }[]>([]);
-
- useEffect(() => {
- if (currentPageRows && dataModel) {
- const newLinePositions = dataModel.pageData.hyperEdgeRanges.map((hyperEdgeRange) => {
- //console.log(hyperEdgeRange);
- return intersectionElements([currentPageRows.startIndexRow, currentPageRows.endIndexRow], hyperEdgeRange.hyperEdges.indices);
- });
- console.log('internal: ', newLinePositions);
- setLinePositions(newLinePositions);
- } else {
- setLinePositions([]);
- }
- }, [currentPageRows, dataModel]);
- */
-
const accumulatedWidthHeaders = useMemo(() => {
const accumulatedWidths: number[] = [0];
let sum = 0;
@@ -76,6 +60,10 @@ export const HyperEdgeRangesBlock: React.FC<HyperEdgeRangesBlockProps> = ({
return accumulatedWidths;
}, [columnHeaderInformation]);
+ const adjustedFontSize = useMemo(() => {
+ // text-sm: 0.75 rem, rowHeight: 20
+ return Math.max(0.4, (rowHeight * 0.75) / 20);
+ }, [rowHeight]);
const [isHovered, setIsHovered] = useState(false);
const [hoverRowIndex, setHoverRowIndex] = useState<number | null>(null);
@@ -131,7 +119,7 @@ export const HyperEdgeRangesBlock: React.FC<HyperEdgeRangesBlockProps> = ({
x2={dataModel.pageData.hyperEdgeRanges.length * rowHeight}
y1={-yOffset}
y2={-yOffset}
- strokeWidth={5}
+ strokeWidth={0.25 * rowHeight}
fill="hsl(var(--clr-pri--600))"
/>
)}
@@ -142,7 +130,7 @@ export const HyperEdgeRangesBlock: React.FC<HyperEdgeRangesBlockProps> = ({
x2={dataModel.pageData.hyperEdgeRanges.length * rowHeight}
y1={rowHeight * (i + 1)}
y2={rowHeight * (i + 1)}
- strokeWidth={1}
+ strokeWidth={0.05 * rowHeight}
fill="hsl(var(--clr-pri--600))"
/>
)}
@@ -153,7 +141,7 @@ export const HyperEdgeRangesBlock: React.FC<HyperEdgeRangesBlockProps> = ({
x2={dataModel.pageData.hyperEdgeRanges.length * rowHeight}
y1={rowHeight * i}
y2={rowHeight * i}
- strokeWidth={1}
+ strokeWidth={0.05 * rowHeight}
fill="hsl(var(--clr-pri--600))"
/>
</React.Fragment>
@@ -172,11 +160,21 @@ export const HyperEdgeRangesBlock: React.FC<HyperEdgeRangesBlockProps> = ({
transform={'translate(' + indexRows * rowHeight + ',' + 0 + ')rotate(-90,0,0)'}
>
{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>
+ <g key={'text-col-' + index} transform={'translate(' + (accumulatedWidthHeaders[index] + rowHeight) + ',' + 0 + ')'}>
+ <rect
+ width={0 === index ? row.width + rowHeight : row.width}
+ height={rowHeight}
+ fill={'hsl(var(--clr-sec--0))'}
+ strokeWidth={0}
+ ></rect>
<foreignObject x="0" y="0" width={row.width} height={rowHeight}>
- <span className={`${classTopTextColumns}`}>{row.data[indexRows]}</span>
+ <span className={`${classTopTextColumns}`} style={{ fontSize: `${adjustedFontSize}rem` }}>
+ {row.data[indexRows] !== undefined &&
+ (typeof row.data[indexRows] !== 'object' || Array.isArray(row.data[indexRows]))
+ ? (row.data[indexRows] as any).toString()
+ : ' '}{' '}
+ </span>
</foreignObject>
</g>
))}
@@ -193,7 +191,7 @@ export const HyperEdgeRangesBlock: React.FC<HyperEdgeRangesBlockProps> = ({
<g
key={'gHeadersColumns-' + headerIndex}
className={`headersCols-${headerData.header} cursor-pointer`}
- transform={'translate(' + 0 + ',' + -accumulatedWidthHeaders[headerIndex] + ')rotate(-90, 0,0)'}
+ transform={'translate(' + 0 + ',' + (-accumulatedWidthHeaders[headerIndex] - rowHeight) + ')rotate(-90, 0,0)'}
onClick={(event) => {
handleClickHeaderSorting(event);
}}
@@ -208,16 +206,26 @@ export const HyperEdgeRangesBlock: React.FC<HyperEdgeRangesBlockProps> = ({
select(event.currentTarget).select('rect').attr('fill', 'hsl(var(--clr-sec--200))');
}}
>
- <rect width={headerData.width} height={rowHeight} fill={'hsl(var(--clr-sec--200))'} opacity={1.0} strokeWidth={0}></rect>
+ <rect
+ width={0 === headerIndex ? headerData.width + rowHeight : headerData.width}
+ height={rowHeight}
+ fill={'hsl(var(--clr-sec--200))'}
+ opacity={1.0}
+ strokeWidth={0}
+ ></rect>
<foreignObject x="0" y="0" width={headerData.width} height={rowHeight}>
- <span className={`${classTopTextColumns}`}>{headerData.header}</span>
+ <span className={`${classTopTextColumns}`} style={{ fontSize: `${adjustedFontSize}rem` }}>
+ {headerData.header !== undefined && (typeof headerData.header !== 'object' || Array.isArray(headerData.header))
+ ? (headerData.header as any).toString()
+ : ' '}
+ </span>
</foreignObject>
{iconComponents[headerIndex] && isHovered && (
<svg
xmlns="http://www.w3.org/2000/svg"
width={2 * headerData.width - rowHeight}
- height={24}
+ height={rowHeight}
style={{ color: iconColors[headerIndex], stroke: 'none' }}
>
{iconComponents[headerIndex][headerIndex]}
@@ -228,7 +236,7 @@ export const HyperEdgeRangesBlock: React.FC<HyperEdgeRangesBlockProps> = ({
x2={headerData.width}
y1={0}
y2={rowHeight * (dataModel.pageData.hyperEdgeRanges.length + 1)}
- strokeWidth={1}
+ strokeWidth={0.05 * rowHeight}
fill="hsl(var(--clr-pri--600))"
/>
</g>
@@ -251,14 +259,21 @@ export const HyperEdgeRangesBlock: React.FC<HyperEdgeRangesBlockProps> = ({
transform={'translate(' + index * rowHeight + ',' + 0 + ')rotate(-90,0,0)'}
>
{index == 0 ? (
- <CustomLine x1={-rowHeight * numRows} x2={0} y1={0} y2={0} strokeWidth={0.5} fill="hsl(var(--clr-pri--600))" />
+ <CustomLine
+ x1={-rowHeight * numRows}
+ x2={0}
+ y1={0}
+ y2={0}
+ strokeWidth={0.025 * rowHeight}
+ fill="hsl(var(--clr-pri--600))"
+ />
) : (
<CustomLine
x1={-rowHeight * numRows}
x2={yOffset}
y1={0}
y2={0}
- strokeWidth={0.5}
+ strokeWidth={0.025 * rowHeight}
fill="hsl(var(--clr-pri--600))"
/>
)}
@@ -270,7 +285,7 @@ export const HyperEdgeRangesBlock: React.FC<HyperEdgeRangesBlockProps> = ({
x2={yOffset}
y1={rowHeight}
y2={rowHeight}
- strokeWidth={0.5}
+ strokeWidth={0.025 * rowHeight}
fill="hsl(var(--clr-pri--600))"
/>
</g>
@@ -294,7 +309,7 @@ export const HyperEdgeRangesBlock: React.FC<HyperEdgeRangesBlockProps> = ({
y1={(dataLinesHyperedges[indexHyperEdgeRange].y0 - currentPageRows.startIndexRow) * rowHeight}
x2={0}
y2={(dataLinesHyperedges[indexHyperEdgeRange].y1 - currentPageRows.startIndexRow) * rowHeight}
- strokeWidth={1.5}
+ strokeWidth={0.075 * rowHeight}
stroke="hsl(var(--clr-sec--800))"
/>
)}
@@ -316,7 +331,7 @@ export const HyperEdgeRangesBlock: React.FC<HyperEdgeRangesBlockProps> = ({
cy={(valueIndex - currentPageRows.startIndexRow) * rowHeight}
r={rowHeight * 0.25}
fill="white"
- strokeWidth={rowHeight * 0.03}
+ strokeWidth={rowHeight * 0.025}
stroke="black"
/>
))}
diff --git a/libs/shared/lib/vis/visualizations/paohvis/components/RowLabels.tsx b/libs/shared/lib/vis/visualizations/paohvis/components/RowLabels.tsx
index d71c0d8aa..ca90d000c 100644
--- a/libs/shared/lib/vis/visualizations/paohvis/components/RowLabels.tsx
+++ b/libs/shared/lib/vis/visualizations/paohvis/components/RowLabels.tsx
@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from 'react';
+import React, { useEffect, useState, useMemo } from 'react';
import { CustomLine } from './CustomLine';
import { RowInformation } from '../types';
import { ArrowDownward, ArrowUpward, Sort } from '@mui/icons-material';
@@ -39,11 +39,13 @@ export const RowLabels = ({
accumulatedWidthHeaders.push(sum);
}
});
-
const [isHovered, setIsHovered] = useState(false);
const [hoverRowIndex, setHoverRowIndex] = useState<number | null>(null);
const [iconComponents, setIconComponents] = useState<{ [key: number]: JSX.Element }[]>(Array(dataRows.length).fill({}));
const [iconColors, setIconColors] = useState<string[]>([]);
+ const adjustedFontSize = useMemo(() => {
+ return Math.max(0.4, (rowHeight * 0.75) / 20);
+ }, [rowHeight]);
useEffect(() => {
const iconColorsTemporal: string[] = [];
@@ -95,20 +97,32 @@ export const RowLabels = ({
{dataRows.map((row, index) => (
<g key={'´gRowTable-' + index} transform={'translate(' + accumulatedWidthHeaders[index] + ',' + 0 + ')'}>
<rect
- width={row.width}
+ width={dataRows.length - 1 === index ? row.width + rowHeight : row.width}
height={rowHeight}
fill={indexRows % 2 === 0 ? 'hsl(var(--clr-sec--50))' : 'hsl(var(--clr-sec--0))'}
strokeWidth={0}
></rect>
<foreignObject x="0" y="0" width={row.width} height={rowHeight}>
- <span className={`${classTopTextColums}`}>{row.data[indexRows]}</span>
+ <span className={`${classTopTextColums}`} style={{ fontSize: `${adjustedFontSize}rem` }}>
+ {row.data[indexRows] !== undefined &&
+ (typeof row.data[indexRows] !== 'object' || Array.isArray(row.data[indexRows]))
+ ? (row.data[indexRows] as any).toString()
+ : ' '}
+ </span>
</foreignObject>
</g>
))}
</g>
- <CustomLine x1={0} x2={rowLabelColumnWidth} y1={0} y2={0} strokeWidth={1} fill="hsl(var(--clr-pri--600))" />
+ <CustomLine x1={0} x2={rowLabelColumnWidth} y1={0} y2={0} strokeWidth={0.05 * rowHeight} fill="hsl(var(--clr-pri--600))" />
{indexRows !== dataRows[0].data.length && (
- <CustomLine x1={0} x2={rowLabelColumnWidth} y1={rowHeight} y2={rowHeight} strokeWidth={1} fill="hsl(var(--clr-pri--600))" />
+ <CustomLine
+ x1={0}
+ x2={rowLabelColumnWidth}
+ y1={rowHeight}
+ y2={rowHeight}
+ strokeWidth={0.05 * rowHeight}
+ fill="hsl(var(--clr-pri--600))"
+ />
)}
</g>
))}
@@ -119,7 +133,7 @@ export const RowLabels = ({
x2={rowLabelColumnWidth - rowHeight}
y1={yOffset - rowHeight}
y2={yOffset - rowHeight}
- strokeWidth={1}
+ strokeWidth={0.05 * rowHeight}
fill="hsl(var(--clr-pri--600))"
/>
<CustomLine
@@ -152,17 +166,25 @@ export const RowLabels = ({
select(event.currentTarget).select('rect').attr('fill', 'hsl(var(--clr-sec--200))');
}}
>
- <rect width={row.width} height={rowHeight} fill={'hsl(var(--clr-sec--200))'} opacity={1.0} strokeWidth={0}></rect>
-
+ <rect
+ width={dataRows.length - 1 === indexRows ? row.width + rowHeight : row.width}
+ height={rowHeight}
+ fill={'hsl(var(--clr-sec--200))'}
+ opacity={1.0}
+ strokeWidth={0}
+ ></rect>
<foreignObject x="0" y="0" width={row.width} height={rowHeight}>
- <span className={`${classTopTextColums}`}>{row.header}</span>
+ <span className={`${classTopTextColums}`} style={{ fontSize: `${adjustedFontSize}rem` }}>
+ {row.header !== undefined && (typeof row.header !== 'object' || Array.isArray(row.header))
+ ? (row.header as any).toString()
+ : ' '}
+ </span>
</foreignObject>
-
{iconComponents[indexRows] && isHovered && (
<svg
xmlns="http://www.w3.org/2000/svg"
width={2 * row.width - rowHeight}
- height={24}
+ height={rowHeight}
style={{ color: iconColors[indexRows], stroke: 'none' }}
>
{iconComponents[indexRows][indexRows]}
@@ -175,7 +197,7 @@ export const RowLabels = ({
x2={accumulatedWidthHeaders[indexRows]}
y1={yOffset - rowHeight}
y2={yOffset + dataRows[0].data.length * rowHeight}
- strokeWidth={1}
+ strokeWidth={0.05 * rowHeight}
fill="hsl(var(--clr-pri--600))"
/>
</g>
diff --git a/libs/shared/lib/vis/visualizations/paohvis/models/PaohvisHolder.test.tsx b/libs/shared/lib/vis/visualizations/paohvis/models/PaohvisHolder.test.tsx
deleted file mode 100644
index e2811c96e..000000000
--- a/libs/shared/lib/vis/visualizations/paohvis/models/PaohvisHolder.test.tsx
+++ /dev/null
@@ -1,32 +0,0 @@
-/**
- * This program has been developed by students from the bachelor Computer Science at
- * Utrecht University within the Software Project course.
- * © Copyright Utrecht University (Department of Information and Computing Sciences)
- */
-
-import { describe, it, vi, expect } from 'vitest';
-import PaohvisListener from './PaohvisListener';
-import PaohvisHolder from './PaohvisHolder';
-
-describe('PaohvisHolder', () => {
- it('should add an remove listeners correctly', () => {
- const holder: PaohvisHolder = new PaohvisHolder();
- const mockOnTableMade1 = vi.fn();
- const mockOnTableMade2 = vi.fn();
- const l1: PaohvisListener = { onTableMade: mockOnTableMade1 };
- const l2: PaohvisListener = { onTableMade: mockOnTableMade2 };
- holder.addListener(l1);
- holder.addListener(l2);
-
- expect(mockOnTableMade1).toHaveBeenCalledTimes(0);
- expect(mockOnTableMade2).toHaveBeenCalledTimes(0);
- holder.onTableMade('', '', '');
- expect(mockOnTableMade1).toHaveBeenCalledTimes(1);
- expect(mockOnTableMade2).toHaveBeenCalledTimes(1);
-
- holder.removeListener(l2);
- holder.onTableMade('', '', '');
- expect(mockOnTableMade1).toHaveBeenCalledTimes(2);
- expect(mockOnTableMade2).toHaveBeenCalledTimes(1);
- });
-});
diff --git a/libs/shared/lib/vis/visualizations/paohvis/models/PaohvisHolder.tsx b/libs/shared/lib/vis/visualizations/paohvis/models/PaohvisHolder.tsx
deleted file mode 100644
index 4aa15a433..000000000
--- a/libs/shared/lib/vis/visualizations/paohvis/models/PaohvisHolder.tsx
+++ /dev/null
@@ -1,57 +0,0 @@
-/**
- * This program has been developed by students from the bachelor Computer Science at
- * Utrecht University within the Software Project course.
- * © Copyright Utrecht University (Department of Information and Computing Sciences)
- */
-
-import PaohvisListener from './PaohvisListener';
-
-/** PaohvisHolder is an observer class for notifying listeners when a Paohvis table is made. */
-export default class PaohvisHolder {
- private paohvisListeners: PaohvisListener[];
- private entityVertical: string;
- private entityHorizontal: string;
- private relationName: string;
-
- public constructor() {
- this.paohvisListeners = [];
- this.entityVertical = '';
- this.entityHorizontal = '';
- this.relationName = '';
- }
-
- /**
- * This is called whenever a Paohvis table is made.
- * @param entityVertical that is on the y-axis of the Paohis table.
- * @param entityHorizontal that is on the x-axis of the Paohis table.
- * @param relationName that is used as the hyperedge of the Paohis table.
- */
- public onTableMade(entityVertical: string, entityHorizontal: string, relationName: string): void {
- this.entityVertical = entityVertical;
- this.entityHorizontal = entityHorizontal;
- this.relationName = relationName;
-
- this.notifyListeners();
- }
-
- /**
- * Adds a listener to the observer.
- * @param listener The listener that we want to add.
- */
- public addListener(listener: PaohvisListener): void {
- this.paohvisListeners.push(listener);
- }
-
- /**
- * Removes a listener from the array of listeners.
- * @param listener The listener that we want to remove.
- */
- public removeListener(listener: PaohvisListener): void {
- this.paohvisListeners.splice(this.paohvisListeners.indexOf(listener), 1);
- }
-
- /** Notifies to all the listeners that a Paohvis table was made. */
- private notifyListeners(): void {
- this.paohvisListeners.forEach((listener) => listener.onTableMade(this.entityVertical, this.entityHorizontal, this.relationName));
- }
-}
diff --git a/libs/shared/lib/vis/visualizations/paohvis/models/PaohvisListener.tsx b/libs/shared/lib/vis/visualizations/paohvis/models/PaohvisListener.tsx
deleted file mode 100644
index a93293b03..000000000
--- a/libs/shared/lib/vis/visualizations/paohvis/models/PaohvisListener.tsx
+++ /dev/null
@@ -1,16 +0,0 @@
-/**
- * This program has been developed by students from the bachelor Computer Science at
- * Utrecht University within the Software Project course.
- * © Copyright Utrecht University (Department of Information and Computing Sciences)
- */
-
-/** Interface for the listener of the PaohvisHolder observer class. */
-export default interface PaohvisListener {
- /**
- * This is called whenever a Paohvis table is made.
- * @param entityVertical that is on the y-axis of the Paohis table.
- * @param entityHorizontal that is on the x-axis of the Paohis table.
- * @param relationName that is used as the hyperedge of the Paohis table.
- */
- onTableMade(entityVertical: string, entityHorizontal: string, relationName: string): void;
-}
diff --git a/libs/shared/lib/vis/visualizations/paohvis/paohvis.tsx b/libs/shared/lib/vis/visualizations/paohvis/paohvis.tsx
index 30f23f702..bba0fdbbb 100644
--- a/libs/shared/lib/vis/visualizations/paohvis/paohvis.tsx
+++ b/libs/shared/lib/vis/visualizations/paohvis/paohvis.tsx
@@ -115,8 +115,7 @@ 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 mx-1 flex items-center overflow-hidden text-ellipsis';
+ const classTopTextColumns = 'font-inter font-medium stroke-none text-secondary-800 mx-1 flex items-center truncate';
const configStyle = {
colorText: 'hsl(var(--clr-sec--800))',
@@ -642,7 +641,7 @@ export const PaohVis = ({ data, graphMetadata, schema, settings, updateSettings
setInformationColumn(filteredInformationColumnTemporal);
setInformationColumnOriginal(informationColumnTemporalOriginal);
setInformationColumnAllData(informationColumnTemporalOriginal);
- const totalWidthColumnInformation = filteredInformationColumnTemporal.reduce((acc, row) => acc + row.width, 0);
+ const totalWidthColumnInformation = filteredInformationColumnTemporal.reduce((acc, row) => acc + row.width, 0) + settings.rowHeight;
setWidthTotalColumnInformation(totalWidthColumnInformation);
} else {
console.error(`Nodes for entity are undefined or empty.`);
@@ -700,7 +699,7 @@ export const PaohVis = ({ data, graphMetadata, schema, settings, updateSettings
setInformationRow(filteredInformationRowTemporal);
setInformationRowOriginal(informationRowTemporalOriginal);
setInformationRowAllData(informationRowTemporalOriginal);
- const totalWidthRowInformation = filteredInformationRowTemporal.reduce((acc, row) => acc + row.width, 0);
+ const totalWidthRowInformation = filteredInformationRowTemporal.reduce((acc, row) => acc + row.width, 0) + settings.rowHeight;
setWidthTotalRowInformation(totalWidthRowInformation);
}, [
@@ -839,50 +838,51 @@ export const PaohVis = ({ data, graphMetadata, schema, settings, updateSettings
};
return (
- <svg
- className="m-1"
- ref={svgRef}
- style={{
- // width: computedSizesSvg.tableWidthWithExtraColumnLabelWidth,
- width: '100%',
- height: computedSizesSvg.colWidth + (numRowsVisible + 1) * settings.rowHeight,
- }}
- onWheel={onWheel}
- >
- <RowLabels
- dataRows={informationRow}
- rowHeight={settings.rowHeight}
- yOffset={computedSizesSvg.colWidth}
- rowLabelColumnWidth={widthTotalRowInformation}
- classTopTextColumns={classTopTextColumns}
- onMouseEnterRowLabels={onMouseEnterRowLabels}
- onMouseLeaveRowLabels={onMouseLeaveRowLabels}
- marginText={configPaohvis.marginText}
- handleClickHeaderSorting={handleClickHeaderSorting}
- sortState={sortingOrderRow}
- headerState={previousHeaderRow}
- />
-
- <HyperEdgeRangesBlock
- dataModel={dataModel}
- dataLinesHyperedges={lineHyperEdges}
- rowHeight={settings.rowHeight}
- yOffset={computedSizesSvg.colWidth}
- rowLabelColumnWidth={widthTotalRowInformation}
- classTopTextColumns={classTopTextColumns}
- currentPageRows={currentPageRows}
- marginText={configPaohvis.marginText}
- widthColumns={widthTotalColumnInformation}
- columnHeaderInformation={informationColumn}
- rowsMaxPerPage={configPaohvis.rowsMaxPerPage}
- onMouseEnterHyperEdge={onMouseEnterHyperEdge}
- onMouseLeaveHyperEdge={onMouseLeaveHyperEdge}
- numRows={numRowsVisible}
- sortState={sortingOrderColumn}
- handleClickHeaderSorting={handleClickHeaderSortingColumns}
- headerState={previousHeaderColumn}
- />
- </svg>
+ <div className="flex justify-center items-center h-full w-full">
+ <svg
+ className="m-1"
+ ref={svgRef}
+ style={{
+ width: '100%',
+ height: computedSizesSvg.colWidth + (numRowsVisible + 1) * settings.rowHeight,
+ }}
+ onWheel={onWheel}
+ >
+ <RowLabels
+ dataRows={informationRow}
+ rowHeight={settings.rowHeight}
+ yOffset={computedSizesSvg.colWidth}
+ rowLabelColumnWidth={widthTotalRowInformation}
+ classTopTextColumns={classTopTextColumns}
+ onMouseEnterRowLabels={onMouseEnterRowLabels}
+ onMouseLeaveRowLabels={onMouseLeaveRowLabels}
+ marginText={configPaohvis.marginText}
+ handleClickHeaderSorting={handleClickHeaderSorting}
+ sortState={sortingOrderRow}
+ headerState={previousHeaderRow}
+ />
+
+ <HyperEdgeRangesBlock
+ dataModel={dataModel}
+ dataLinesHyperedges={lineHyperEdges}
+ rowHeight={settings.rowHeight}
+ yOffset={computedSizesSvg.colWidth}
+ rowLabelColumnWidth={widthTotalRowInformation}
+ classTopTextColumns={classTopTextColumns}
+ currentPageRows={currentPageRows}
+ marginText={configPaohvis.marginText}
+ widthColumns={widthTotalColumnInformation}
+ columnHeaderInformation={informationColumn}
+ rowsMaxPerPage={configPaohvis.rowsMaxPerPage}
+ onMouseEnterHyperEdge={onMouseEnterHyperEdge}
+ onMouseLeaveHyperEdge={onMouseLeaveHyperEdge}
+ numRows={numRowsVisible}
+ sortState={sortingOrderColumn}
+ handleClickHeaderSorting={handleClickHeaderSortingColumns}
+ headerState={previousHeaderColumn}
+ />
+ </svg>
+ </div>
);
};
diff --git a/libs/shared/lib/vis/visualizations/paohvis/utils/ToPaohvisDataParserUsecase.tsx b/libs/shared/lib/vis/visualizations/paohvis/utils/ToPaohvisDataParserUsecase.tsx
deleted file mode 100644
index 908360622..000000000
--- a/libs/shared/lib/vis/visualizations/paohvis/utils/ToPaohvisDataParserUsecase.tsx
+++ /dev/null
@@ -1,15 +0,0 @@
-/**
- * This program has been developed by students from the bachelor Computer Science at
- * Utrecht University within the Software Project course.
- * © Copyright Utrecht University (Department of Information and Computing Sciences)
- */
-
-import { getGroupName } from './ResultNodeLinkParserUseCase';
-import { GraphQueryResult, Node } from '@graphpolaris/shared/lib/data-access';
-
-import { PaohvisAxisInfo, PaohvisData, PaohvisFilters, PaohvisNodeInfo, HyperEdgeRange2, HyperEdgeI2 } from '../types';
-import AttributeFilterUsecase, { getIds } from './AttributesFilterUseCase';
-import { countRepetition } from './utils';
-
-//type Index = number;
-//type Index = number;
--
GitLab