From efd8b930fb768a016b7b5716b0f156420709f36d Mon Sep 17 00:00:00 2001
From: Leonardo Christino <leomilho@gmail.com>
Date: Wed, 9 Aug 2023 16:35:40 +0200
Subject: [PATCH] feat(schema): update schema panel handle positions and css
---
.../querybuilder/query-utils/query2backend.ts | 15 +--------------
.../schema/pills/nodes/entity/entity-node.tsx | 17 +++++++++--------
.../pills/nodes/entity/entity.module.scss | 6 ++++++
.../pills/nodes/entity/entity.module.scss.d.ts | 1 +
.../pills/nodes/relation/relation-node.tsx | 15 +++------------
5 files changed, 20 insertions(+), 34 deletions(-)
diff --git a/libs/shared/lib/querybuilder/query-utils/query2backend.ts b/libs/shared/lib/querybuilder/query-utils/query2backend.ts
index f25f6a533..09df80be8 100644
--- a/libs/shared/lib/querybuilder/query-utils/query2backend.ts
+++ b/libs/shared/lib/querybuilder/query-utils/query2backend.ts
@@ -191,24 +191,11 @@ export function Query2BackendQuery(
const newOrigin = graphologyQuery.addNode(origin + 'cycle', graphologyQuery.getNodeAttributes(origin));
const edgeAttributes = graphologyQuery.getEdgeAttributes(target, origin);
graphologyQuery.dropEdge(target, origin);
- // edgeAttributes.target = newOrigin;
graphologyQuery.addEdge(target, newOrigin, edgeAttributes);
});
});
- // console.log('graph', graph);
return Query2BackendQuery(databaseName, graphologyQuery.export());
-
- // if (
- // relations.some((entity, i) => {
- // return allSimplePaths(graphologyQuery, entity.id, entity.id);
- // })
- // )
- // throw Error('Cycles in query are not supported yet');
- // console.log('cycles', cycles);
- // return null;
- // }
- // return null;
}
// Chunk extraction: traverse graph to find all paths of logic between relations and entities
let graphSequenceChunks: QueryGraphNodes[][] = [];
@@ -264,7 +251,7 @@ export function Query2BackendQuery(
ID: currNode?.id,
label: currNode?.name || undefined,
// depth: QuerySearchDepthStruct;
- direction: 'TO',
+ direction: 'FROM',
node: chunk.length === position + 1 ? undefined : (processConnection(chunk, position + 1) as NodeStruct),
};
return ret;
diff --git a/libs/shared/lib/schema/pills/nodes/entity/entity-node.tsx b/libs/shared/lib/schema/pills/nodes/entity/entity-node.tsx
index 50156cb6d..81cfe7a4b 100644
--- a/libs/shared/lib/schema/pills/nodes/entity/entity-node.tsx
+++ b/libs/shared/lib/schema/pills/nodes/entity/entity-node.tsx
@@ -97,14 +97,14 @@ export const EntityNode = React.memo(({ id, data }: NodeProps<SchemaReactflowNod
</span>
<span className={styles.nodeSpan}>{data.nodeCount}</span>
</div> */}
- <Handle
+ {/* <Handle
style={{ pointerEvents: 'none' }}
id="entitySourceLeft"
position={Position.Left}
className={styles.handleTriangleLeft}
type="source"
// hidden={Array.from(data.handles).includes('entitySourceLeft') ? false : true}
- ></Handle>
+ ></Handle> */}
<Handle
style={{ pointerEvents: 'none' }}
id="entityTargetLeft"
@@ -117,17 +117,18 @@ export const EntityNode = React.memo(({ id, data }: NodeProps<SchemaReactflowNod
style={{ pointerEvents: 'none' }}
id="entitySourceRight"
position={Position.Right}
+ className={styles.handleTriangleRight}
type="source"
// hidden={Array.from(data.handles).includes('entitySourceRight') ? false : true}
></Handle>
- <Handle
+ {/* <Handle
style={{ pointerEvents: 'none' }}
id="entityTargetRight"
position={Position.Right}
type="target"
// hidden={Array.from(data.handles).includes('entityTargetRight') ? false : true}
- ></Handle>
- <Handle
+ ></Handle> */}
+ {/* <Handle
style={{ pointerEvents: 'none' }}
id="entitySourceTop"
position={Position.Top}
@@ -140,8 +141,8 @@ export const EntityNode = React.memo(({ id, data }: NodeProps<SchemaReactflowNod
position={Position.Top}
type="target"
// hidden={Array.from(data.handles).includes('entityTargetTop') ? false : true}
- ></Handle>
- <Handle
+ ></Handle> */}
+ {/* <Handle
style={{ pointerEvents: 'none' }}
id="entitySourceBottom"
position={Position.Bottom}
@@ -154,7 +155,7 @@ export const EntityNode = React.memo(({ id, data }: NodeProps<SchemaReactflowNod
position={Position.Bottom}
type="target"
// hidden={Array.from(data.handles).includes('entityTargetBottom') ? false : true}
- ></Handle>
+ ></Handle> */}
<div className={styles.nodeWrapper}>
<span className={styles.nodeData}>{id}</span>
</div>
diff --git a/libs/shared/lib/schema/pills/nodes/entity/entity.module.scss b/libs/shared/lib/schema/pills/nodes/entity/entity.module.scss
index d2ed00c09..6c88a9bec 100644
--- a/libs/shared/lib/schema/pills/nodes/entity/entity.module.scss
+++ b/libs/shared/lib/schema/pills/nodes/entity/entity.module.scss
@@ -35,6 +35,12 @@
transform: rotate(-90deg) translate(50%, -55%) scale(0.65) !important;
}
+.handleTriangleRight {
+ @extend .handleTriangle;
+ transform: rotate(90deg) translate(-50%, -45%) scale(0.65) !important;
+ @apply border-b-entity-300 #{!important};
+}
+
// nodeWrapper: {
// display: 'inherit',
// color: SchemaThemeHolder.entity.textColor,
diff --git a/libs/shared/lib/schema/pills/nodes/entity/entity.module.scss.d.ts b/libs/shared/lib/schema/pills/nodes/entity/entity.module.scss.d.ts
index ff6009ccf..ad5150215 100644
--- a/libs/shared/lib/schema/pills/nodes/entity/entity.module.scss.d.ts
+++ b/libs/shared/lib/schema/pills/nodes/entity/entity.module.scss.d.ts
@@ -6,6 +6,7 @@ declare const classNames: {
readonly entityNode: 'entityNode';
readonly entityNodeAttributesBox: 'entityNodeAttributesBox';
readonly handleTriangle: 'handleTriangle';
+ readonly handleTriangleRight: 'handleTriangleRight';
readonly handleTriangleLeft: 'handleTriangleLeft';
};
export = classNames;
diff --git a/libs/shared/lib/schema/pills/nodes/relation/relation-node.tsx b/libs/shared/lib/schema/pills/nodes/relation/relation-node.tsx
index 87729a11e..760231dd8 100644
--- a/libs/shared/lib/schema/pills/nodes/relation/relation-node.tsx
+++ b/libs/shared/lib/schema/pills/nodes/relation/relation-node.tsx
@@ -64,13 +64,11 @@ export const RelationNode = React.memo(({ id, data }: NodeProps<SchemaReactflowR
>
<div className={styles.relationNode}>
<Handle
- style={{
- pointerEvents: 'none',
- }}
+ style={{ pointerEvents: 'none' }}
className={styles.handleTriangleTop}
id="entitySourceLeft"
position={Position.Top}
- type="source"
+ type="target"
></Handle>
{/* <div
className={styles.relationNodeAttributesBox}
@@ -119,14 +117,7 @@ export const RelationNode = React.memo(({ id, data }: NodeProps<SchemaReactflowR
<span className={styles.nodeData}>{data.collection}</span>
</div>
- <Handle
- className={styles.handleTriangleBottom}
- style={{
- pointerEvents: 'none',
- }}
- position={Position.Bottom}
- type="target"
- ></Handle>
+ <Handle className={styles.handleTriangleBottom} style={{ pointerEvents: 'none' }} position={Position.Bottom} type="source"></Handle>
</div>
</div>
);
--
GitLab