From d4e3faa4b403c990c9b9b1cc35d71e8206408160 Mon Sep 17 00:00:00 2001
From: MarcosPierasNL <pieras.marcos@gmail.com>
Date: Fri, 5 Jul 2024 09:34:44 +0200
Subject: [PATCH] feat: correct position tooltip and text alignment
---
.../lib/components/CardToolTipVis/index.tsx | 30 ++++++--
libs/shared/lib/schema/panel/Schema.tsx | 1 -
.../pills/nodes/entity/SchemaEntityPill.tsx | 56 +++++++--------
.../nodes/relation/SchemaRelationPill.tsx | 71 ++++++++-----------
4 files changed, 83 insertions(+), 75 deletions(-)
diff --git a/libs/shared/lib/components/CardToolTipVis/index.tsx b/libs/shared/lib/components/CardToolTipVis/index.tsx
index 443112fbe..9c2f32d2e 100644
--- a/libs/shared/lib/components/CardToolTipVis/index.tsx
+++ b/libs/shared/lib/components/CardToolTipVis/index.tsx
@@ -1,6 +1,6 @@
import React from 'react';
import { Icon } from '@graphpolaris/shared/lib/components/icon';
-import { Numbers } from '@mui/icons-material';
+import { Numbers, Close } from '@mui/icons-material';
import styles from './cardtooltipvis.module.scss';
import { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider } from '@graphpolaris/shared/lib/components/tooltip';
import {
@@ -11,6 +11,8 @@ import {
CarbonUndefined,
} from '@graphpolaris/shared/lib/assets/carbonIcons/carbonIcons';
+import { Button } from '@graphpolaris/shared/lib/components/buttons';
+
export type CardToolTipVisProps = {
type: string;
name: string;
@@ -39,12 +41,26 @@ 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">
<div className="flex m-0 items-center border-b border-sec-200">
<div className="h-9 w-2" style={{ backgroundColor: colorHeader }}></div>
- <span className="text-xl ml-2 font-semibold">{name}</span>
+ <div className="flex-1 min-w-0">
+ <Tooltip>
+ <TooltipTrigger>
+ <span className="text-xl ml-2 font-semibold truncate">{name}</span>
+ </TooltipTrigger>
+ <TooltipContent side={'top'}>
+ <span>{name}</span>
+ </TooltipContent>
+ </Tooltip>
+ </div>
+ {/*
+ <div className="flex-shrink-0 ml-2">
+ <Button variantType="secondary" variant="ghost" size="xs" rounded={true} iconComponent={<Close />} onClick={() => {}} />
+ </div>
+ */}
</div>
{type === 'schema' && numberOfElements && (
@@ -81,7 +97,7 @@ export const CardToolTipVis: React.FC<CardToolTipVisProps> = ({
<div className="flex flex-row gap-3 items-center">
<span className={`font-semibold truncate ${type === 'schema' ? 'w-[90%]' : 'w-[40%]'}`}>{k}</span>
<TooltipTrigger asChild>
- <span className="ml-auto text-right truncate w-[60%] min-h-[24px]">
+ <span className="ml-auto text-right truncate w-[60%] min-h-[24px] flex items-center">
{type === 'schema' ? (
<Icon
className="ml-auto text-right flex-shrink-0"
@@ -113,8 +129,10 @@ export const CardToolTipVis: React.FC<CardToolTipVisProps> = ({
</span>
</TooltipTrigger>
<TooltipContent side="right">
- <div>
- <span>{v !== undefined && (typeof v !== 'object' || Array.isArray(v)) && v != '' ? v : 'noData'}</span>
+ <div className="max-w-[12rem]">
+ <span className="truncate">
+ {v !== undefined && (typeof v !== 'object' || Array.isArray(v)) && v != '' ? v : 'noData'}
+ </span>
</div>
</TooltipContent>
</div>
diff --git a/libs/shared/lib/schema/panel/Schema.tsx b/libs/shared/lib/schema/panel/Schema.tsx
index 6e4d8a4d9..898e63108 100644
--- a/libs/shared/lib/schema/panel/Schema.tsx
+++ b/libs/shared/lib/schema/panel/Schema.tsx
@@ -96,7 +96,6 @@ 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);
- console.log('SCHEMA ', schemaFlow.nodes);
const nodesWithRef = schemaFlow.nodes.map((node) => ({
...node,
diff --git a/libs/shared/lib/schema/pills/nodes/entity/SchemaEntityPill.tsx b/libs/shared/lib/schema/pills/nodes/entity/SchemaEntityPill.tsx
index 893634e83..3567bb22d 100644
--- a/libs/shared/lib/schema/pills/nodes/entity/SchemaEntityPill.tsx
+++ b/libs/shared/lib/schema/pills/nodes/entity/SchemaEntityPill.tsx
@@ -1,4 +1,4 @@
-import React, { useState, useRef } from 'react';
+import React, { useState, useRef, useEffect } from 'react';
import { Handle, Position, NodeProps } from 'reactflow';
import { SchemaReactflowNodeWithFunctions } from '../../../model/reactflow';
import { QueryElementTypes } from '@graphpolaris/shared/lib/querybuilder';
@@ -8,8 +8,6 @@ import { Tooltip, TooltipContent, TooltipTrigger } from '@graphpolaris/shared/li
import { CardToolTipVis, CardToolTipVisProps } from '@graphpolaris/shared/lib/components/CardToolTipVis';
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);
/**
@@ -42,31 +40,6 @@ export const SchemaEntityPill = React.memo(({ id, selected, data }: NodeProps<Sc
return (
<>
- {openPopup && (
- <Tooltip key={data.name} open={true} boundaryElement={data.reactFlowRef} showArrow={true}>
- <TooltipTrigger x={data.x} y={data.y} />
- <TooltipContent side="top">
- <div>
- <CardToolTipVis
- type="schema"
- typeOfSchema="node"
- name={data.name}
- colorHeader="#fb7b04"
- numberOfElements={1000}
- data={data.attributes.reduce(
- (acc, attr) => {
- if (attr.name && attr.type) {
- acc[attr.name] = attr.type;
- }
- return acc;
- },
- {} as Record<string, string>,
- )}
- />
- </div>
- </TooltipContent>
- </Tooltip>
- )}
<div
className="w-fit h-fit"
onDragStart={(event) => onDragStart(event)}
@@ -78,7 +51,34 @@ export const SchemaEntityPill = React.memo(({ id, selected, data }: NodeProps<Sc
setOpenPopup(!openPopup);
}}
draggable
+ ref={ref}
>
+ {openPopup && (
+ <Tooltip key={data.name} open={true} boundaryElement={data.reactFlowRef} showArrow={true}>
+ <TooltipTrigger />
+ <TooltipContent side="right">
+ <div>
+ <CardToolTipVis
+ type="schema"
+ typeOfSchema="node"
+ name={data.name}
+ colorHeader="#fb7b04"
+ numberOfElements={1000}
+ data={data.attributes.reduce(
+ (acc, attr) => {
+ if (attr.name && attr.type) {
+ acc[attr.name] = attr.type;
+ }
+ return acc;
+ },
+ {} as Record<string, string>,
+ )}
+ />
+ </div>
+ </TooltipContent>
+ </Tooltip>
+ )}
+
<EntityPill
draggable
title={id}
diff --git a/libs/shared/lib/schema/pills/nodes/relation/SchemaRelationPill.tsx b/libs/shared/lib/schema/pills/nodes/relation/SchemaRelationPill.tsx
index 06c42c6e0..ac346ae1e 100644
--- a/libs/shared/lib/schema/pills/nodes/relation/SchemaRelationPill.tsx
+++ b/libs/shared/lib/schema/pills/nodes/relation/SchemaRelationPill.tsx
@@ -49,46 +49,6 @@ export const SchemaRelationPill = React.memo(({ id, selected, data, ...props }:
};
return (
<>
- {/*
- {openPopup && (
- <Popup open={openPopup} hAnchor="left" className="-top-8" offset="-20rem">
- <SchemaRelationshipPopup data={data} onClose={() => setOpenPopup(false)} />
- </Popup>
- )}
- */}
-
- {openPopup && (
- <Tooltip key={data.name} open={true} boundaryElement={ref} showArrow={true}>
- <TooltipTrigger x={data.x} y={data.y} />
- <TooltipContent side="top">
- <div>
- <CardToolTipVis
- type="schema"
- typeOfSchema="relationship"
- name={data.collection}
- colorHeader="#0676C1"
- numberOfElements={1000}
- connectedFrom={data.from}
- connectedTo={data.to}
- data={
- data.attributes.length > 0
- ? data.attributes.reduce(
- (acc, attr) => {
- if (attr.name && attr.type) {
- acc[attr.name] = attr.type;
- }
- return acc;
- },
- {} as Record<string, string>,
- )
- : {}
- }
- />
- </div>
- </TooltipContent>
- </Tooltip>
- )}
-
<div
className="w-fit h-fit"
onDragStart={(event) => onDragStart(event)}
@@ -101,6 +61,37 @@ export const SchemaRelationPill = React.memo(({ id, selected, data, ...props }:
}}
draggable
>
+ {openPopup && (
+ <Tooltip key={data.name} open={true} boundaryElement={ref} showArrow={true}>
+ <TooltipTrigger />
+ <TooltipContent side="top">
+ <div>
+ <CardToolTipVis
+ type="schema"
+ typeOfSchema="relationship"
+ name={data.collection}
+ colorHeader="#0676C1"
+ numberOfElements={1000}
+ connectedFrom={data.from}
+ connectedTo={data.to}
+ data={
+ data.attributes.length > 0
+ ? data.attributes.reduce(
+ (acc, attr) => {
+ if (attr.name && attr.type) {
+ acc[attr.name] = attr.type;
+ }
+ return acc;
+ },
+ {} as Record<string, string>,
+ )
+ : {}
+ }
+ />
+ </div>
+ </TooltipContent>
+ </Tooltip>
+ )}
<RelationPill
draggable
title={data.collection}
--
GitLab