From 5a6187d19b23a1eb07b18e5f5e7564aa86d79559 Mon Sep 17 00:00:00 2001
From: Milho001 <l.milhomemfrancochristino@uu.nl>
Date: Mon, 22 Jul 2024 16:27:12 +0000
Subject: [PATCH] fix(reload): removed css modules from viz due to dynamic
loading bug
---
.../matrixvis/components/MatrixPixi.tsx | 43 +++++++++--
.../components/matrixPixi.module.scss | 37 ---------
.../tablevis/components/Table.tsx | 75 ++++++++++++-------
.../tablevis/components/table.module.scss | 55 --------------
4 files changed, 82 insertions(+), 128 deletions(-)
delete mode 100644 libs/shared/lib/vis/visualizations/matrixvis/components/matrixPixi.module.scss
delete mode 100644 libs/shared/lib/vis/visualizations/tablevis/components/table.module.scss
diff --git a/libs/shared/lib/vis/visualizations/matrixvis/components/MatrixPixi.tsx b/libs/shared/lib/vis/visualizations/matrixvis/components/MatrixPixi.tsx
index acc16d05b..bcdb109fa 100644
--- a/libs/shared/lib/vis/visualizations/matrixvis/components/MatrixPixi.tsx
+++ b/libs/shared/lib/vis/visualizations/matrixvis/components/MatrixPixi.tsx
@@ -27,7 +27,7 @@ import {
} from 'd3';
import { MatrixVisProps } from '../matrixvis';
-import styles from './matrixPixi.module.scss';
+const styleMatrixSize = 50;
type Props = {
// onClick: (node: NodeType, pos: IPointData) => void;
@@ -479,7 +479,7 @@ export const MatrixPixi = (props: Props) => {
.text(label);
// Click handler for reordering columns
- const axisTopHandle = ref.current?.querySelector(`.${styles.axisTop}`) as HTMLDivElement;
+ const axisTopHandle = ref.current?.querySelector(`.axisTop`) as HTMLDivElement;
axisTopHandle.addEventListener('click', () => {
if (!props.graph) throw new Error('Graph is undefined; cannot reorder matrix');
@@ -577,7 +577,7 @@ export const MatrixPixi = (props: Props) => {
.text(label);
// Click handler for reordering columns
- const axisLeftHandle = ref.current?.querySelector(`.${styles.axisLeft}`) as HTMLDivElement;
+ const axisLeftHandle = ref.current?.querySelector(`.axisLeft`) as HTMLDivElement;
axisLeftHandle.addEventListener('click', () => {
if (!props.graph) throw new Error('Graph is undefined; cannot reorder matrix');
@@ -648,11 +648,40 @@ export const MatrixPixi = (props: Props) => {
<NLPopup onClose={() => {}} data={popup} key={popup.node.id} />
))}
{quickPopup && <NLPopup onClose={() => {}} data={quickPopup} />}
- <div ref={ref} className={`h-full w-full overflow-hidden relative ${styles.matrix}`}>
+ <div ref={ref} className={`h-full w-full overflow-hidden relative matrix`}>
<canvas ref={canvas}></canvas>
- <div className={styles.axisLeft}></div>
- <div className={styles.axisTop}></div>
- <svg ref={svg}></svg>
+ <div
+ className={`axisLeft`}
+ style={{
+ position: 'absolute',
+ top: styleMatrixSize,
+ left: 0,
+ bottom: 0,
+ width: styleMatrixSize,
+ backdropFilter: 'blur(10px)',
+ background: 'rgba(255,255,255, 0.5)',
+ boxShadow: '1px 0px 0px 0px rgba(0,0,0,0.2)',
+ }}
+ ></div>
+ <div
+ className={`axisTop`}
+ style={{
+ position: 'absolute',
+ top: 0,
+ left: 0,
+ right: 0,
+ height: styleMatrixSize,
+ backdropFilter: 'blur(10px)',
+ background: 'rgba(255,255,255, 0.5)',
+ boxShadow: `${styleMatrixSize}px 0px 0px 0px rgba(0,0,0,0.2)`,
+ }}
+ ></div>
+ <svg
+ ref={svg}
+ style={{
+ clipPath: `polygon(0% 0%, 0% 100%, 100% 100%, 100% 0%, ${styleMatrixSize}px 0%, ${styleMatrixSize}px ${styleMatrixSize}px, 0% ${styleMatrixSize}px)`,
+ }}
+ ></svg>
</div>
</>
);
diff --git a/libs/shared/lib/vis/visualizations/matrixvis/components/matrixPixi.module.scss b/libs/shared/lib/vis/visualizations/matrixvis/components/matrixPixi.module.scss
deleted file mode 100644
index b41a7d661..000000000
--- a/libs/shared/lib/vis/visualizations/matrixvis/components/matrixPixi.module.scss
+++ /dev/null
@@ -1,37 +0,0 @@
-.matrix {
- --size: 50px;
-}
-
-.axisLeft, .axisTop {
- position: absolute;
- left: 0;
- top: 0;
- backdrop-filter: blur(10px);
- background: rgba(255,255,255, 0.5);
-}
-
-.axisLeft {
- top: var(--size);
- bottom: 0;
- width: var(--size);
- box-shadow: 1px 0px 0px 0px rgba(0,0,0,0.2);
-}
-
-.axisTop {
- right: 0;
- height: var(--size);
- box-shadow: var(--size) 1px 0px 0px rgba(0,0,0,0.2);
-}
-
-/* mask top left corner */
-.axisTop + svg {
- clip-path: polygon(
- 0% 0%,
- 0% 100%,
- 100% 100%,
- 100% 0%,
- var(--size) 0%,
- var(--size) var(--size),
- 0% var(--size)
- );
-}
\ No newline at end of file
diff --git a/libs/shared/lib/vis/visualizations/tablevis/components/Table.tsx b/libs/shared/lib/vis/visualizations/tablevis/components/Table.tsx
index 83442da2a..fd6cdc6c6 100644
--- a/libs/shared/lib/vis/visualizations/tablevis/components/Table.tsx
+++ b/libs/shared/lib/vis/visualizations/tablevis/components/Table.tsx
@@ -4,7 +4,6 @@ import { BarPlot } from '@graphpolaris/shared/lib/components/charts/barplot';
import { NodeAttributes } from '@graphpolaris/shared/lib/data-access/store/graphQueryResultSlice';
import { SchemaAttributeTypes } from '@graphpolaris/shared/lib/schema';
-import styles from './table.module.scss';
import { Icon } from '@graphpolaris/shared/lib/components';
import { group } from 'd3';
@@ -246,13 +245,13 @@ export const Table = ({ data, itemsPerPage, showBarPlot, showAttributes, selecte
<>
{currentPage && currentPage?.currentData?.length > 0 && data2Render?.length > 0 && (
<div className="h-full flex flex-col">
- <div className={styles['table-container']}>
- <table className={`${styles.table} bg-secondary-100`}>
- <thead className="thead">
- <tr>
+ <div className="w-full relative overflow-x-auto">
+ <table className={`mx-auto table-fixed text-sm bg-secondary-100`}>
+ <thead>
+ <tr className="p-0 border-0">
{dataColumns.map((item, index) => (
<th
- className="border-light group hover:bg-secondary-300 bg-secondary-200 text-left overflow-x-hidden truncate capitalize cursor-pointer"
+ className="px-0 py-0 font-semibold border-light group hover:bg-secondary-300 bg-secondary-200 text-left overflow-x-hidden truncate capitalize cursor-pointer"
key={index + item}
ref={(el) => (thRefs.current[index] = el)}
onClick={() => toggleSort(item)}
@@ -282,7 +281,7 @@ export const Table = ({ data, itemsPerPage, showBarPlot, showAttributes, selecte
</tr>
<tr>
{dataColumns.map((item, index) => (
- <th className="border-light bg-light" key={index}>
+ <th className="border-light bg-light max-w-[20rem] border-r-2 text-left" key={index}>
<div className="th p-0" key={index + item}>
<div className="h-full w-full overflow-hidden">
{data2Render[index] &&
@@ -321,28 +320,46 @@ export const Table = ({ data, itemsPerPage, showBarPlot, showAttributes, selecte
</thead>
<tbody>
{currentPage.currentData.map((item, rowIndex) => (
- <tr key={rowIndex}>
- {dataColumns.map((col, colIndex) => (
- <td
- className={`px-4 py-2 ${
- item.attribute[col] === undefined ||
- ((typeof item.attribute[col] !== 'object' || Array.isArray(item.attribute[col])) &&
- (item.attribute[col] as any).toString().trim() === '') ||
- (typeof item.attribute[col] === 'object' &&
- item.attribute[col] !== null &&
- Object.keys(item.attribute[col] as object).length === 0)
- ? styles['diagonal-lines']
- : 'border-light'
- }`}
- data-datatype={item.type[col]}
- key={colIndex}
- >
- {item.attribute[col] !== undefined &&
- (typeof item.attribute[col] !== 'object' || Array.isArray(item.attribute[col]))
- ? (item.attribute[col] as any).toString()
- : ''}
- </td>
- ))}
+ <tr key={rowIndex} className="border-b border-secondary-200 hover:bg-secondary-200">
+ {dataColumns.map((col, colIndex) => {
+ const isEmpty =
+ item.attribute[col] === undefined ||
+ ((typeof item.attribute[col] !== 'object' || Array.isArray(item.attribute[col])) &&
+ (item.attribute[col] as any).toString().trim() === '') ||
+ (typeof item.attribute[col] === 'object' &&
+ item.attribute[col] !== null &&
+ Object.keys(item.attribute[col] as object).length === 0);
+
+ let style = {};
+ let className = `px-4 py-2 ${isEmpty ? '' : 'border-light'} px-1.5 py-1.5 m-0 overflow-x-hidden truncate max-w-[20rem] border-r-2 text-left font-mono`;
+
+ if (item.type[col] === 'string') {
+ className += ' text-left overflow-ellipsis overflow-hidden';
+ }
+ if (item.type[col] === 'bool') {
+ className += ' text-center';
+ }
+
+ if (item.type[col] === 'int' || item.type[col] === 'float') {
+ className += ' text-right';
+ }
+
+ if (isEmpty) {
+ className += ' border-[1px] solid border-white';
+ style = {
+ background:
+ 'repeating-linear-gradient(-45deg, transparent, transparent 6px, #eaeaea 6px, #eaeaea 8px), linear-gradient(to bottom, transparent, transparent)',
+ };
+ } else {
+ className += ' border-light';
+ }
+
+ return (
+ <td className={className} key={colIndex} style={style}>
+ {!isEmpty ? (item.attribute[col] as any).toString() : ''}
+ </td>
+ );
+ })}
</tr>
))}
</tbody>
diff --git a/libs/shared/lib/vis/visualizations/tablevis/components/table.module.scss b/libs/shared/lib/vis/visualizations/tablevis/components/table.module.scss
deleted file mode 100644
index a78018bb8..000000000
--- a/libs/shared/lib/vis/visualizations/tablevis/components/table.module.scss
+++ /dev/null
@@ -1,55 +0,0 @@
-.diagonal-lines {
- border: 1px solid white;
- background:
- repeating-linear-gradient(-45deg, transparent, transparent 6px, #eaeaea 6px, #eaeaea 8px),
- /* Gray diagonal lines */ linear-gradient(to bottom, transparent, transparent); /* Vertical gradient */
-}
-.table-container {
- @apply w-full relative overflow-x-auto;
-}
-.table {
- @apply mx-auto table-fixed text-sm;
- thead {
- tr {
- @apply p-0 border-0;
- th {
- @apply px-0 py-0 font-semibold;
- }
- }
- }
- tbody {
- tr {
- @apply border-b;
- border-color: hsl(var(--clr-sec--200));
- &:hover {
- background-color: hsl(var(--clr-sec--200));
- }
- }
- td {
- @apply px-1.5 py-1.5 m-0 overflow-x-hidden truncate;
- }
- }
- td,
- th {
- max-width: 20rem;
- @apply border-r-2 text-left;
- }
- td[data-datatype='int'],
- td[data-datatype='float'] {
- @apply font-mono text-right;
- }
- td[data-datatype='bool'] {
- @apply font-mono text-center;
- }
- td[data-datatype='string'] {
- @apply text-left overflow-ellipsis overflow-hidden;
- }
- td[data-datatype='date'],
- td[data-datatype='datetime'],
- td[data-datatype='time'] {
- @apply font-mono;
- }
- td[data-datatype='duration'] {
- @apply font-mono;
- }
-}
--
GitLab