Skip to content
Snippets Groups Projects
Commit 5a6187d1 authored by Leonardo Christino's avatar Leonardo Christino
Browse files

fix(reload): removed css modules from viz due to dynamic loading bug

parent 1910b4f9
No related branches found
No related tags found
1 merge request!170fix(reload): removed css modules from viz due to dynamic loading bug
Pipeline #137857 failed
Stage: tag-release
Stage: get-release-tag
Stage: container-image
Stage: deploy-staging
Hide whitespace changes
Inline Side-by-side
libs/shared/lib/vis/visualizations/matrixvis/components/MatrixPixi.tsx
+ 36
− 7
View file @ 5a6187d1
...@@ -27,7 +27,7 @@ import { ...@@ -27,7 +27,7 @@ import {
} from 'd3'; } from 'd3';
import { MatrixVisProps } from '../matrixvis'; import { MatrixVisProps } from '../matrixvis';
import styles from './matrixPixi.module.scss'; const styleMatrixSize = 50;
type Props = { type Props = {
// onClick: (node: NodeType, pos: IPointData) => void; // onClick: (node: NodeType, pos: IPointData) => void;
...@@ -479,7 +479,7 @@ export const MatrixPixi = (props: Props) => { ...@@ -479,7 +479,7 @@ export const MatrixPixi = (props: Props) => {
.text(label); .text(label);
// Click handler for reordering columns // 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', () => { axisTopHandle.addEventListener('click', () => {
if (!props.graph) throw new Error('Graph is undefined; cannot reorder matrix'); if (!props.graph) throw new Error('Graph is undefined; cannot reorder matrix');
...@@ -577,7 +577,7 @@ export const MatrixPixi = (props: Props) => { ...@@ -577,7 +577,7 @@ export const MatrixPixi = (props: Props) => {
.text(label); .text(label);
// Click handler for reordering columns // 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', () => { axisLeftHandle.addEventListener('click', () => {
if (!props.graph) throw new Error('Graph is undefined; cannot reorder matrix'); if (!props.graph) throw new Error('Graph is undefined; cannot reorder matrix');
...@@ -648,11 +648,40 @@ export const MatrixPixi = (props: Props) => { ...@@ -648,11 +648,40 @@ export const MatrixPixi = (props: Props) => {
<NLPopup onClose={() => {}} data={popup} key={popup.node.id} /> <NLPopup onClose={() => {}} data={popup} key={popup.node.id} />
))} ))}
{quickPopup && <NLPopup onClose={() => {}} data={quickPopup} />} {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> <canvas ref={canvas}></canvas>
<div className={styles.axisLeft}></div> <div
<div className={styles.axisTop}></div> className={`axisLeft`}
<svg ref={svg}></svg> 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> </div>
</> </>
); );
......
libs/shared/lib/vis/visualizations/matrixvis/components/matrixPixi.module.scss deleted 100644 → 0
+ 0
− 37
View file @ 1910b4f9
.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
libs/shared/lib/vis/visualizations/tablevis/components/Table.tsx
+ 46
− 29
View file @ 5a6187d1
...@@ -4,7 +4,6 @@ import { BarPlot } from '@graphpolaris/shared/lib/components/charts/barplot'; ...@@ -4,7 +4,6 @@ import { BarPlot } from '@graphpolaris/shared/lib/components/charts/barplot';
import { NodeAttributes } from '@graphpolaris/shared/lib/data-access/store/graphQueryResultSlice'; import { NodeAttributes } from '@graphpolaris/shared/lib/data-access/store/graphQueryResultSlice';
import { SchemaAttributeTypes } from '@graphpolaris/shared/lib/schema'; import { SchemaAttributeTypes } from '@graphpolaris/shared/lib/schema';
import styles from './table.module.scss';
import { Icon } from '@graphpolaris/shared/lib/components'; import { Icon } from '@graphpolaris/shared/lib/components';
import { group } from 'd3'; import { group } from 'd3';
...@@ -246,13 +245,13 @@ export const Table = ({ data, itemsPerPage, showBarPlot, showAttributes, selecte ...@@ -246,13 +245,13 @@ export const Table = ({ data, itemsPerPage, showBarPlot, showAttributes, selecte
<> <>
{currentPage && currentPage?.currentData?.length > 0 && data2Render?.length > 0 && ( {currentPage && currentPage?.currentData?.length > 0 && data2Render?.length > 0 && (
<div className="h-full flex flex-col"> <div className="h-full flex flex-col">
<div className={styles['table-container']}> <div className="w-full relative overflow-x-auto">
<table className={`${styles.table} bg-secondary-100`}> <table className={`mx-auto table-fixed text-sm bg-secondary-100`}>
<thead className="thead"> <thead>
<tr> <tr className="p-0 border-0">
{dataColumns.map((item, index) => ( {dataColumns.map((item, index) => (
<th <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} key={index + item}
ref={(el) => (thRefs.current[index] = el)} ref={(el) => (thRefs.current[index] = el)}
onClick={() => toggleSort(item)} onClick={() => toggleSort(item)}
...@@ -282,7 +281,7 @@ export const Table = ({ data, itemsPerPage, showBarPlot, showAttributes, selecte ...@@ -282,7 +281,7 @@ export const Table = ({ data, itemsPerPage, showBarPlot, showAttributes, selecte
</tr> </tr>
<tr> <tr>
{dataColumns.map((item, index) => ( {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="th p-0" key={index + item}>
<div className="h-full w-full overflow-hidden"> <div className="h-full w-full overflow-hidden">
{data2Render[index] && {data2Render[index] &&
...@@ -321,28 +320,46 @@ export const Table = ({ data, itemsPerPage, showBarPlot, showAttributes, selecte ...@@ -321,28 +320,46 @@ export const Table = ({ data, itemsPerPage, showBarPlot, showAttributes, selecte
</thead> </thead>
<tbody> <tbody>
{currentPage.currentData.map((item, rowIndex) => ( {currentPage.currentData.map((item, rowIndex) => (
<tr key={rowIndex}> <tr key={rowIndex} className="border-b border-secondary-200 hover:bg-secondary-200">
{dataColumns.map((col, colIndex) => ( {dataColumns.map((col, colIndex) => {
<td const isEmpty =
className={`px-4 py-2 ${ item.attribute[col] === undefined ||
item.attribute[col] === undefined || ((typeof item.attribute[col] !== 'object' || Array.isArray(item.attribute[col])) &&
((typeof item.attribute[col] !== 'object' || Array.isArray(item.attribute[col])) && (item.attribute[col] as any).toString().trim() === '') ||
(item.attribute[col] as any).toString().trim() === '') || (typeof item.attribute[col] === 'object' &&
(typeof item.attribute[col] === 'object' && item.attribute[col] !== null &&
item.attribute[col] !== null && Object.keys(item.attribute[col] as object).length === 0);
Object.keys(item.attribute[col] as object).length === 0)
? styles['diagonal-lines'] let style = {};
: 'border-light' 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`;
}`}
data-datatype={item.type[col]} if (item.type[col] === 'string') {
key={colIndex} className += ' text-left overflow-ellipsis overflow-hidden';
> }
{item.attribute[col] !== undefined && if (item.type[col] === 'bool') {
(typeof item.attribute[col] !== 'object' || Array.isArray(item.attribute[col])) className += ' text-center';
? (item.attribute[col] as any).toString() }
: ''}
</td> 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> </tr>
))} ))}
</tbody> </tbody>
......
libs/shared/lib/vis/visualizations/tablevis/components/table.module.scss deleted 100644 → 0
+ 0
− 55
View file @ 1910b4f9
.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;
}
}
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment