diff --git a/libs/shared/lib/vis/visualizations/paohvis/paohvis.tsx b/libs/shared/lib/vis/visualizations/paohvis/paohvis.tsx index 3c33765dedbc5e9067190f1a85972768c3d93032..51274d3a3ae0fa92231a93ba9bde4ea756850708 100644 --- a/libs/shared/lib/vis/visualizations/paohvis/paohvis.tsx +++ b/libs/shared/lib/vis/visualizations/paohvis/paohvis.tsx @@ -37,8 +37,8 @@ const settings: PaohVisProps = { columnNode: '', attributeRowShow: ['_id', '# Connections'], attributeColumnShow: ['_id', '# Connections'], - numRowsDisplay: 20, - numColumnsDisplay: 30, + numRowsDisplay: 200, + numColumnsDisplay: 200, rowJumpAmount: 3, colJumpAmount: 3, mergeData: false, @@ -479,6 +479,19 @@ export const PaohVis = ({ data, graphMetadata, schema, settings, updateSettings } }; + function svgResize() { + console.log('resize'); + } + + useEffect(() => { + if (!svgRef.current) return; + const resizeObserver = new ResizeObserver(() => { + console.log('resize'); + }); + resizeObserver.observe(svgRef.current); + return () => resizeObserver.disconnect(); // clean up + }, []); + useEffect(() => { if ( graphMetadata && @@ -768,7 +781,7 @@ export const PaohVis = ({ data, graphMetadata, schema, settings, updateSettings const onPageChangeColumns = (delta: number) => { const startIndexColumn = (currentPageColumns?.startIndexColumn || 0) + delta; - if (startIndexColumn < 0 || startIndexColumn + configPaohvis.columnsMaxPerPage > dataModel.data.hyperEdgeRanges.length) return; + if (startIndexColumn < 0 || startIndexColumn + 10 > dataModel.data.hyperEdgeRanges.length) return; const endIndexColumn = Math.min(startIndexColumn + configPaohvis.columnsMaxPerPage, dataModel.data.hyperEdgeRanges.length); const slicedHyperEdgeRanges = dataModel.data.hyperEdgeRanges.slice(startIndexColumn, endIndexColumn); @@ -806,7 +819,7 @@ export const PaohVis = ({ data, graphMetadata, schema, settings, updateSettings const onPageChangeRows = (delta: number) => { const startIndexRow = (currentPageRows?.startIndexRow || 0) + delta; - if (startIndexRow < 0 || startIndexRow + configPaohvis.rowsMaxPerPage > dataModel.data.rowLabels.length) return; + if (startIndexRow < 0 || startIndexRow + 10 > dataModel.data.rowLabels.length) return; const endIndexRow = Math.min(startIndexRow + configPaohvis.rowsMaxPerPage, dataModel.data.rowLabels.length); setNumRowsVisible(endIndexRow - startIndexRow); @@ -838,11 +851,11 @@ export const PaohVis = ({ data, graphMetadata, schema, settings, updateSettings return ( <svg - className="m-1" + className="m-1 overflow-hidden" ref={svgRef} style={{ width: '100%', - height: computedSizesSvg.colWidth + (numRowsVisible + 1) * settings.rowHeight, + height: '99%', }} onWheel={onWheel} > @@ -1045,8 +1058,8 @@ const PaohSettings = ({ settings, graphMetadata, updateSettings }: Visualization label="# Rows" value={settings.numRowsDisplay} onChange={(val) => updateSettings({ numRowsDisplay: val })} - min={1} - max={40} + min={30} + max={400} step={1} /> <Input @@ -1054,8 +1067,8 @@ const PaohSettings = ({ settings, graphMetadata, updateSettings }: Visualization label="# Columns" value={settings.numColumnsDisplay} onChange={(val) => updateSettings({ numColumnsDisplay: val })} - min={1} - max={60} + min={30} + max={400} step={1} /> <Input