diff --git a/libs/shared/lib/components/CardToolTipVis/index.tsx b/libs/shared/lib/components/CardToolTipVis/index.tsx
index acf6b7fa3787572394dba05eaa6a5b509e4273c7..443112fbe873328bccb32633451829bad511766b 100644
--- a/libs/shared/lib/components/CardToolTipVis/index.tsx
+++ b/libs/shared/lib/components/CardToolTipVis/index.tsx
@@ -39,7 +39,6 @@ export const CardToolTipVis: React.FC<CardToolTipVisProps> = ({
numberOfElements,
}) => {
const itemsToShow = Object.entries(data).slice(0, maxVisibleItems);
-
// shadow-md
return (
<div className="border-1 border-sec-200 bg-white w-[12rem] -mx-2 -my-1">
@@ -85,7 +84,7 @@ export const CardToolTipVis: React.FC<CardToolTipVisProps> = ({
<span className="ml-auto text-right truncate w-[60%] min-h-[24px]">
{type === 'schema' ? (
<Icon
- className="ml-auto text-right"
+ className="ml-auto text-right flex-shrink-0"
component={
v === 'int' || v === 'float' ? (
<CarbonStringInteger />
@@ -104,16 +103,18 @@ export const CardToolTipVis: React.FC<CardToolTipVisProps> = ({
color="hsl(var(--clr-sec--400))"
size={24}
/>
- ) : v !== undefined && (typeof v !== 'object' || Array.isArray(v) || v === '') ? (
- <span className="ml-auto text-right truncate">{typeof v === 'number' ? formatNumber(v) : v.toString()}</span>
+ ) : v !== undefined && (typeof v !== 'object' || Array.isArray(v)) && v != '' ? (
+ <span className="ml-auto text-right truncate flex-shrink-0">
+ {typeof v === 'number' ? formatNumber(v) : v.toString()}
+ </span>
) : (
- <div className={`ml-auto mt-auto h-6 w-12 ${styles['diagonal-lines']}`}></div>
+ <div className={`ml-auto mt-auto h-4 w-12 ${styles['diagonal-lines']}`}></div>
)}
</span>
</TooltipTrigger>
<TooltipContent side="right">
<div>
- <span>{v !== undefined && (typeof v !== 'object' || Array.isArray(v)) ? v : 'noData'}</span>
+ <span>{v !== undefined && (typeof v !== 'object' || Array.isArray(v)) && v != '' ? v : 'noData'}</span>
</div>
</TooltipContent>
</div>
diff --git a/libs/shared/lib/schema/model/reactflow.tsx b/libs/shared/lib/schema/model/reactflow.tsx
index 3af36d3b0d57536ca5ab37937688893d309f3393..d03ac91359ca2df9017ee351b923550b1c5bde11 100644
--- a/libs/shared/lib/schema/model/reactflow.tsx
+++ b/libs/shared/lib/schema/model/reactflow.tsx
@@ -36,6 +36,7 @@ export type SchemaReactflowEntity = SchemaReactflowData & {
name: string;
x: number;
y: number;
+ reactFlowRef: any;
};
export type SchemaReactflowRelation = SchemaReactflowData & {
diff --git a/libs/shared/lib/schema/panel/Schema.tsx b/libs/shared/lib/schema/panel/Schema.tsx
index 6bc23f973680633519aaf88b6b02b36da0e8ea9a..6e4d8a4d952bc4e142c308d2a381403c6708ded5 100644
--- a/libs/shared/lib/schema/panel/Schema.tsx
+++ b/libs/shared/lib/schema/panel/Schema.tsx
@@ -1,6 +1,6 @@
import React, { useEffect, useMemo, useRef, useState } from 'react';
import { SmartBezierEdge, SmartStepEdge, SmartStraightEdge } from '@tisoap/react-flow-smart-edge';
-import ReactFlow, { Edge, Node, ReactFlowInstance, ReactFlowProvider, useEdgesState, useNodesState } from 'reactflow';
+import ReactFlow, { Edge, Node, ReactFlowInstance, ReactFlowProvider, useEdgesState, useNodesState, MiniMap } from 'reactflow';
import 'reactflow/dist/style.css';
import { Button } from '../../components/buttons';
import { useSchemaGraph, useSchemaSettings, useSearchResultSchema } from '../../data-access';
@@ -10,8 +10,7 @@ import { SelfEdge } from '../pills/edges/self-edge';
import { SchemaEntityPill } from '../pills/nodes/entity/SchemaEntityPill';
import { SchemaRelationPill } from '../pills/nodes/relation/SchemaRelationPill';
import { SchemaSettings } from './SchemaSettings';
-import { Settings } from '@mui/icons-material';
-import { ContentCopy, FitScreen, Fullscreen, KeyboardArrowDown, KeyboardArrowRight, Remove } from '@mui/icons-material';
+import { Settings, ContentCopy, Fullscreen, Remove } from '@mui/icons-material';
import { AlgorithmToLayoutProvider, AllLayoutAlgorithms, LayoutFactory } from '../../graph-layout';
import { ConnectionLine, ConnectionDragLine } from '../../querybuilder';
import { schemaExpandRelation, schemaGraphology2Reactflow } from '../schema-utils';
@@ -97,7 +96,15 @@ export const Schema = (props: Props) => {
const xy = bounds ? { x1: 50, x2: bounds.width - 50, y1: 50, y2: bounds.height - 200 } : { x1: 0, x2: 500, y1: 0, y2: 1000 };
await layout.current?.layout(expandedSchema, xy);
const schemaFlow = schemaGraphology2Reactflow(expandedSchema, settings.connectionType, settings.animatedEdges);
- setNodes(schemaFlow.nodes);
+ console.log('SCHEMA ', schemaFlow.nodes);
+
+ const nodesWithRef = schemaFlow.nodes.map((node) => ({
+ ...node,
+ data: { ...node.data, reactFlowRef },
+ }));
+
+ //setNodes(schemaFlow.nodes);
+ setNodes(nodesWithRef);
setEdges(schemaFlow.edges);
setTimeout(() => fitView(), 100);
}
@@ -115,6 +122,17 @@ export const Schema = (props: Props) => {
);
}, [searchResults]);
+ const nodeColor = (node: any) => {
+ switch (node.type) {
+ case 'entity':
+ return '#fb7b04';
+ case 'relation':
+ return '#0676C1';
+ default:
+ return '#ff0072';
+ }
+ };
+
return (
<Panel
title="Schema"
@@ -155,7 +173,7 @@ export const Schema = (props: Props) => {
</Tooltip>
<Tooltip>
<TooltipTrigger>
- <Button variantType="secondary" variant="ghost" size="xs" iconComponent={<FitScreen />} onClick={() => {}} />
+ <Button variantType="secondary" variant="ghost" size="xs" iconComponent={<Fullscreen />} onClick={() => {}} />
</TooltipTrigger>
<TooltipContent side={'top'}>
<p>Fit to screen</p>
@@ -202,7 +220,9 @@ export const Schema = (props: Props) => {
onInit(reactFlowInstance);
}}
proOptions={{ hideAttribution: true }}
- ></ReactFlow>
+ >
+ <MiniMap nodeColor={nodeColor} />
+ </ReactFlow>
</ReactFlowProvider>
)}
{/* <div>
diff --git a/libs/shared/lib/schema/pills/nodes/entity/SchemaEntityPill.tsx b/libs/shared/lib/schema/pills/nodes/entity/SchemaEntityPill.tsx
index 515d7b007174347bf98b443d8088248257724acb..893634e83eae1c4ae68cce915dbcc751ded0cf4e 100644
--- a/libs/shared/lib/schema/pills/nodes/entity/SchemaEntityPill.tsx
+++ b/libs/shared/lib/schema/pills/nodes/entity/SchemaEntityPill.tsx
@@ -2,15 +2,14 @@ import React, { useState, useRef } from 'react';
import { Handle, Position, NodeProps } from 'reactflow';
import { SchemaReactflowNodeWithFunctions } from '../../../model/reactflow';
import { QueryElementTypes } from '@graphpolaris/shared/lib/querybuilder';
-import { SchemaEntityPopup } from './SchemaEntityPopup';
-import { Popup } from '@graphpolaris/shared/lib/components/Popup';
import { SchemaNode } from '../../../model';
import { EntityPill } from '@graphpolaris/shared/lib/components';
import { Tooltip, TooltipContent, TooltipTrigger } from '@graphpolaris/shared/lib/components/tooltip';
import { CardToolTipVis, CardToolTipVisProps } from '@graphpolaris/shared/lib/components/CardToolTipVis';
-import { StringDecoder } from 'string_decoder';
export const SchemaEntityPill = React.memo(({ id, selected, data }: NodeProps<SchemaReactflowNodeWithFunctions>) => {
+ console.log('SchemaEntityPI ', data.reactFlowRef);
+
const [openPopup, setOpenPopup] = useState(false);
const ref = useRef<HTMLDivElement>(null);
/**
@@ -43,16 +42,8 @@ export const SchemaEntityPill = React.memo(({ id, selected, data }: NodeProps<Sc
return (
<>
- {/*
- {openPopup && (
- <Popup open={openPopup} hAnchor="left" className="-top-8" offset="-20rem">
- <SchemaEntityPopup data={data} onClose={() => setOpenPopup(false)} />
- </Popup>
- )}
- */}
-
{openPopup && (
- <Tooltip key={data.name} open={true} boundaryElement={ref} showArrow={true}>
+ <Tooltip key={data.name} open={true} boundaryElement={data.reactFlowRef} showArrow={true}>
<TooltipTrigger x={data.x} y={data.y} />
<TooltipContent side="top">
<div>