From 0777130c99b435dff45b2861d779ec70a0485297 Mon Sep 17 00:00:00 2001
From: Milho001 <l.milhomemfrancochristino@uu.nl>
Date: Wed, 30 Aug 2023 18:03:01 +0000
Subject: [PATCH] fix(qb): added an invisible padding to entity nodes
---
apps/web/.env | 3 +-
apps/web/.env.development | 1 -
apps/web/.env.production | 1 -
apps/web/src/components/navbar/navbar.tsx | 6 +-
.../entitypill/entitypill.module.scss | 98 -----------------
.../entitypill/entitypill.module.scss.d.ts | 11 --
.../customFlowPills/entitypill/entitypill.tsx | 103 ++++++++++--------
.../logicpill/logicpill.module.scss.d.ts | 2 -
.../relationpill.module.scss.d.ts | 2 -
.../querybuilder/pills/handles.module.scss | 14 ---
.../pills/handles.module.scss.d.ts | 2 -
.../pills/querypills.module.scss.d.ts | 2 -
12 files changed, 65 insertions(+), 180 deletions(-)
diff --git a/apps/web/.env b/apps/web/.env
index e024c90ec..6639126b6 100644
--- a/apps/web/.env
+++ b/apps/web/.env
@@ -1,3 +1,2 @@
VITE_BACKEND_URL=https://api.graphpolaris.com
-VITE_STAGING=local
-VITE_GRAPHPOLARIS_VERSION=dev-build
\ No newline at end of file
+VITE_STAGING=local
\ No newline at end of file
diff --git a/apps/web/.env.development b/apps/web/.env.development
index d13895bd9..ae8b069cf 100644
--- a/apps/web/.env.development
+++ b/apps/web/.env.development
@@ -5,4 +5,3 @@ VITE_SKIP_LOGIN=true
VITE_BACKEND_USER=:3000
VITE_BACKEND_QUERY=:3003
VITE_BACKEND_SCHEMA=:3002
-VITE_GRAPHPOLARIS_VERSION=dev-build
diff --git a/apps/web/.env.production b/apps/web/.env.production
index 4127ac68b..af3e58d1c 100644
--- a/apps/web/.env.production
+++ b/apps/web/.env.production
@@ -6,5 +6,4 @@ VITE_SKIP_LOGIN=false
VITE_BACKEND_USER=/user
VITE_BACKEND_QUERY=/query
VITE_BACKEND_SCHEMA=/schema
-GRAPHPOLARIS_VERSION=prod-build
diff --git a/apps/web/src/components/navbar/navbar.tsx b/apps/web/src/components/navbar/navbar.tsx
index aca99f1ee..4dcd98d87 100644
--- a/apps/web/src/components/navbar/navbar.tsx
+++ b/apps/web/src/components/navbar/navbar.tsx
@@ -69,6 +69,8 @@ export const Navbar = (props: NavbarComponentProps) => {
const currentLogo = !'dark' ? logo_white : logo; // TODO: support dark mode
+ const buildInfo = import.meta.env.VITE_GRAPHPOLAIRS_VERSION || 'dev';
+
return (
<div className="w-full h-auto px-5">
<NewDatabaseForm open={addDatabaseFormOpen} onClose={() => setAddDatabaseFormOpen(false)} />
@@ -163,7 +165,7 @@ export const Navbar = (props: NavbarComponentProps) => {
</li>
<div className="menu-title">
<div className="absolute left-0 h-0.5 w-full bg-offwhite-300"></div>
- <h3 className="text-xs mt-3">Version: {import.meta.env.VITE_GRAPHPOLARIS_VERSION}</h3>
+ <h3 className="text-xs mt-3">Version: {buildInfo}</h3>
</div>
</>
) : (
@@ -185,7 +187,7 @@ export const Navbar = (props: NavbarComponentProps) => {
</div>
<div className="menu-title">
<div className="absolute left-0 h-0.5 w-full bg-offwhite-300"></div>
- <h3 className="text-xs mt-3">Version: {import.meta.env.VITE_GRAPHPOLARIS_VERSION}</h3>
+ <h3 className="text-xs mt-3">Version: {buildInfo}</h3>
</div>
</>
)}
diff --git a/libs/shared/lib/querybuilder/pills/customFlowPills/entitypill/entitypill.module.scss b/libs/shared/lib/querybuilder/pills/customFlowPills/entitypill/entitypill.module.scss
index e72268545..df212f7f6 100644
--- a/libs/shared/lib/querybuilder/pills/customFlowPills/entitypill/entitypill.module.scss
+++ b/libs/shared/lib/querybuilder/pills/customFlowPills/entitypill/entitypill.module.scss
@@ -1,99 +1 @@
@import '../../querypills.module.scss';
-
-.highlighted {
- box-shadow: black 0 0 2px;
-}
-
-.react-flow__edge-default .selected {
- stroke: gray !important;
-}
-
-.contentWrapper {
- margin-left: 3ch;
-
- span {
- max-width: 20ch;
- text-overflow: ellipsis;
- overflow: hidden;
- white-space: nowrap;
- display: block;
- }
-}
-
-// Entity element
-.entity {
- border-left: 3px solid;
- @apply bg-entity-50;
- @apply border-l-entity-600;
- font-weight: bold;
- min-width: 8rem;
- font-size: 13px;
-
- .title {
- position: relative;
- border-top-left-radius: inherit;
- border-top-right-radius: inherit;
- padding: 0.2rem 1.2rem;
- text-align: center;
- flex-grow: 1;
- background-color: '#eee';
- }
-
- @keyframes slide-down {
- 0% {
- max-height: 0px;
- opacity: 0;
- transform: translateY(0%);
- }
- 100% {
- max-height: 100000px;
- opacity: 1;
- transform: translateY(0);
- }
- }
-
- .content {
- padding: 0.2rem 1.2rem;
- // visibility: hidden;
- display: none;
- animation: slide-down 0.2s ease-out;
- overflow: hidden;
- max-height: 0;
- font-weight: normal;
- // border-left: 1px solid;
- // @apply bg-entity-50;
- // @apply border-l-entity-800;
- // @apply bg-base-100;
- }
-
- .content_display {
- // visibility: visible;
- display: block;
- max-height: unset;
- }
-
- .io {
- top: auto;
- transform: translate(0, -115%);
- }
- .io_right {
- right: 0.5rem;
- }
-}
-
-.entityFade {
- opacity: 1;
- animation-iteration-count: 1;
- animation: fade-id, 600ms, cubic-bezier(0.4, 0, 1, 1);
- @keyframes fade-id {
- 0% {
- opacity: 0;
- }
- 40% {
- opacity: 0;
- }
- 100% {
- opacity: 1;
- }
- }
-}
diff --git a/libs/shared/lib/querybuilder/pills/customFlowPills/entitypill/entitypill.module.scss.d.ts b/libs/shared/lib/querybuilder/pills/customFlowPills/entitypill/entitypill.module.scss.d.ts
index e37860555..e478e565f 100644
--- a/libs/shared/lib/querybuilder/pills/customFlowPills/entitypill/entitypill.module.scss.d.ts
+++ b/libs/shared/lib/querybuilder/pills/customFlowPills/entitypill/entitypill.module.scss.d.ts
@@ -9,8 +9,6 @@ declare const classNames: {
readonly handle_logic_float: 'handle_logic_float';
readonly handle_logic_int: 'handle_logic_int';
readonly handle_logic_string: 'handle_logic_string';
- readonly handle_from_relation: 'handle_from_relation';
- readonly handle_to_relation: 'handle_to_relation';
readonly 'react-flow__node': 'react-flow__node';
readonly selected: 'selected';
readonly entityWrapper: 'entityWrapper';
@@ -21,14 +19,5 @@ declare const classNames: {
readonly handleConnectedBorderRight: 'handleConnectedBorderRight';
readonly handleConnectedBorderLeft: 'handleConnectedBorderLeft';
readonly handleFunction: 'handleFunction';
- readonly highlighted: 'highlighted';
- readonly contentWrapper: 'contentWrapper';
- readonly entity: 'entity';
- readonly title: 'title';
- readonly content: 'content';
- readonly content_display: 'content_display';
- readonly io: 'io';
- readonly io_right: 'io_right';
- readonly entityFade: 'entityFade';
};
export = classNames;
diff --git a/libs/shared/lib/querybuilder/pills/customFlowPills/entitypill/entitypill.tsx b/libs/shared/lib/querybuilder/pills/customFlowPills/entitypill/entitypill.tsx
index c8391055c..f92ddde07 100644
--- a/libs/shared/lib/querybuilder/pills/customFlowPills/entitypill/entitypill.tsx
+++ b/libs/shared/lib/querybuilder/pills/customFlowPills/entitypill/entitypill.tsx
@@ -47,52 +47,69 @@ export const EntityFlowElement = React.memo((node: SchemaReactflowEntityNode) =>
console.log('EntityPill onConnect', params);
};
- const showingDropdown = hovered || handleBeingDragged !== -1 || attributeEdges.length > 0;
+ const showingDropdown = hovered || handleBeingDragged !== -1 || attributeEdges.length > 0 || forceOpen;
+
+ const dropDown = useMemo(() => {
+ if (!data?.attributes) return null;
+ return data.attributes
+ .filter(
+ (attribute, i) =>
+ forceOpen ||
+ hovered ||
+ handleBeingDragged === i ||
+ (attributeEdges.some(
+ (edge) =>
+ edge?.attributes?.sourceHandleData &&
+ toHandleId(edge?.attributes?.sourceHandleData) === handleDataFromReactflowToId(node, attribute)
+ ) &&
+ !!attribute.handleData.attributeName)
+ )
+ .map((attribute, i) => (
+ <div
+ className="px-5 py-1 font-semibold"
+ key={(attribute.handleData.attributeName || '') + i}
+ onMouseDown={(event: React.MouseEvent) => {
+ onHandleMouseDown(attribute, i, event);
+ }}
+ >
+ {attribute.handleData.attributeName}
+ <Handle
+ id={handleDataFromReactflowToId(node, attribute)}
+ type="source"
+ position={Position.Right}
+ className={
+ styles.handle +
+ ' ' +
+ (attribute.handleData.attributeType ? styleHandleMap[attribute.handleData.attributeType] : '') +
+ ' !top-auto !-translate-y-[115%] !right-[1.2rem]'
+ }
+ ></Handle>
+ </div>
+ ));
+ }, [data.attributes, hovered, handleBeingDragged, attributeEdges]);
return (
- <div className={`${styles.entity} ${styles.entityFade} query_builder-entity`} onMouseEnter={onMouseEnter} onMouseLeave={onMouseLeave}>
- <Handle id={toHandleId(data.leftRelationHandleId)} type="target" position={Position.Left} className={styles.handle_from_relation} />
- <Handle id={toHandleId(data.rightRelationHandleId)} type="source" position={Position.Right} className={styles.handle_to_relation} />
- <div className={styles.title}>{data.name}</div>
- {data?.attributes && (
- <div className={styles.content + ' ' + (showingDropdown || forceOpen || hovered ? styles.content_display : '')}>
- {data.attributes
- .filter(
- (attribute, i) =>
- forceOpen ||
- hovered ||
- handleBeingDragged === i ||
- (attributeEdges.some(
- (edge) =>
- edge?.attributes?.sourceHandleData &&
- toHandleId(edge?.attributes?.sourceHandleData) === handleDataFromReactflowToId(node, attribute)
- ) &&
- !!attribute.handleData.attributeName)
- )
- .map((attribute, i) => (
- <div
- key={(attribute.handleData.attributeName || '') + i}
- onMouseDown={(event: React.MouseEvent) => {
- onHandleMouseDown(attribute, i, event);
- }}
- >
- {attribute.handleData.attributeName}
- <Handle
- id={handleDataFromReactflowToId(node, attribute)}
- type="source"
- position={Position.Right}
- className={
- (attribute.handleData.attributeType ? styleHandleMap[attribute.handleData.attributeType] : '') +
- ' ' +
- styles.io +
- ' ' +
- styles.io_right
- }
- ></Handle>
- </div>
- ))}
+ <div className="p-3 bg-transparent" onMouseEnter={onMouseEnter} onMouseLeave={onMouseLeave}>
+ <div className={`border-l-[3px] border-solid bg-entity-50 border-l-entity-600 font-bold text-xs min-w-[8rem] query_builder-entity`}>
+ <div>
+ <Handle
+ id={toHandleId(data.leftRelationHandleId)}
+ type="target"
+ position={Position.Left}
+ className={styles.handle + ' !top-6 !left-2 !bg-entity-800 !rounded-none'}
+ />
+ <Handle
+ id={toHandleId(data.rightRelationHandleId)}
+ type="source"
+ position={Position.Right}
+ className={styles.handle + ' !top-6 !right-2 !bg-entity-800 !rounded-none'}
+ />
+ <div className="text-center py-1">{data.name}</div>
</div>
- )}
+ {data?.attributes && showingDropdown && (
+ <div className={'collapse-content ' + showingDropdown ? 'animate-openmenu ' : 'animate-closemenu '}>{dropDown}</div>
+ )}
+ </div>
</div>
);
});
diff --git a/libs/shared/lib/querybuilder/pills/customFlowPills/logicpill/logicpill.module.scss.d.ts b/libs/shared/lib/querybuilder/pills/customFlowPills/logicpill/logicpill.module.scss.d.ts
index e9035be6b..1ed06c620 100644
--- a/libs/shared/lib/querybuilder/pills/customFlowPills/logicpill/logicpill.module.scss.d.ts
+++ b/libs/shared/lib/querybuilder/pills/customFlowPills/logicpill/logicpill.module.scss.d.ts
@@ -9,8 +9,6 @@ declare const classNames: {
readonly handle_logic_float: 'handle_logic_float';
readonly handle_logic_int: 'handle_logic_int';
readonly handle_logic_string: 'handle_logic_string';
- readonly handle_from_relation: 'handle_from_relation';
- readonly handle_to_relation: 'handle_to_relation';
readonly 'react-flow__node': 'react-flow__node';
readonly selected: 'selected';
readonly entityWrapper: 'entityWrapper';
diff --git a/libs/shared/lib/querybuilder/pills/customFlowPills/relationpill/relationpill.module.scss.d.ts b/libs/shared/lib/querybuilder/pills/customFlowPills/relationpill/relationpill.module.scss.d.ts
index 55a3ce3a8..432ea72c9 100644
--- a/libs/shared/lib/querybuilder/pills/customFlowPills/relationpill/relationpill.module.scss.d.ts
+++ b/libs/shared/lib/querybuilder/pills/customFlowPills/relationpill/relationpill.module.scss.d.ts
@@ -9,8 +9,6 @@ declare const classNames: {
readonly handle_logic_float: 'handle_logic_float';
readonly handle_logic_int: 'handle_logic_int';
readonly handle_logic_string: 'handle_logic_string';
- readonly handle_from_relation: 'handle_from_relation';
- readonly handle_to_relation: 'handle_to_relation';
readonly 'react-flow__node': 'react-flow__node';
readonly selected: 'selected';
readonly entityWrapper: 'entityWrapper';
diff --git a/libs/shared/lib/querybuilder/pills/handles.module.scss b/libs/shared/lib/querybuilder/pills/handles.module.scss
index aa9f29005..4ee3f0b4b 100644
--- a/libs/shared/lib/querybuilder/pills/handles.module.scss
+++ b/libs/shared/lib/querybuilder/pills/handles.module.scss
@@ -4,20 +4,6 @@
width: 8px !important;
}
-.handle_to_relation {
- @extend .handle;
- border-radius: 1px !important;
- top: 0.75rem !important;
- @apply bg-entity-800 #{!important}; //css-ignore
-}
-
-.handle_from_relation {
- @extend .handle;
- border-radius: 1px !important;
- top: 0.75rem !important;
- @apply bg-entity-800 #{!important}; //css-ignore
-}
-
.handle_logic {
@extend .handle;
diff --git a/libs/shared/lib/querybuilder/pills/handles.module.scss.d.ts b/libs/shared/lib/querybuilder/pills/handles.module.scss.d.ts
index 78139bdb5..59638411a 100644
--- a/libs/shared/lib/querybuilder/pills/handles.module.scss.d.ts
+++ b/libs/shared/lib/querybuilder/pills/handles.module.scss.d.ts
@@ -9,7 +9,5 @@ declare const classNames: {
readonly handle_logic_float: 'handle_logic_float';
readonly handle_logic_int: 'handle_logic_int';
readonly handle_logic_string: 'handle_logic_string';
- readonly handle_from_relation: 'handle_from_relation';
- readonly handle_to_relation: 'handle_to_relation';
};
export = classNames;
diff --git a/libs/shared/lib/querybuilder/pills/querypills.module.scss.d.ts b/libs/shared/lib/querybuilder/pills/querypills.module.scss.d.ts
index 442165543..e478e565f 100644
--- a/libs/shared/lib/querybuilder/pills/querypills.module.scss.d.ts
+++ b/libs/shared/lib/querybuilder/pills/querypills.module.scss.d.ts
@@ -9,8 +9,6 @@ declare const classNames: {
readonly handle_logic_float: 'handle_logic_float';
readonly handle_logic_int: 'handle_logic_int';
readonly handle_logic_string: 'handle_logic_string';
- readonly handle_from_relation: 'handle_from_relation';
- readonly handle_to_relation: 'handle_to_relation';
readonly 'react-flow__node': 'react-flow__node';
readonly selected: 'selected';
readonly entityWrapper: 'entityWrapper';
--
GitLab