From e81a5689f9ea6d72822f6e959f7526f7b1904074 Mon Sep 17 00:00:00 2001
From: Sjoerd <svink@graphpolaris.com>
Date: Sat, 26 Oct 2024 18:19:11 +0000
Subject: [PATCH] fix: unified data icons for schema and qb
---
.../lib/components/DataTypeIcon/index.tsx | 22 +++++++++++++++++++
.../model/graphology/metaAttributes.ts | 1 -
.../querybuilder/model/graphology/model.ts | 4 ++--
.../querybuilder/model/graphology/utils.ts | 12 +++++-----
.../entitypill/QueryEntityPill.tsx | 19 +++-------------
.../relationpill/QueryRelationPill.tsx | 17 ++------------
.../pills/pillattributes/PillAttributes.tsx | 22 ++++---------------
.../pills/nodes/SchemaPopUp/SchemaPopUp.tsx | 17 ++------------
8 files changed, 40 insertions(+), 74 deletions(-)
create mode 100644 libs/shared/lib/components/DataTypeIcon/index.tsx
diff --git a/libs/shared/lib/components/DataTypeIcon/index.tsx b/libs/shared/lib/components/DataTypeIcon/index.tsx
new file mode 100644
index 000000000..11932ec5b
--- /dev/null
+++ b/libs/shared/lib/components/DataTypeIcon/index.tsx
@@ -0,0 +1,22 @@
+import React from 'react';
+import { SchemaAttributeTypes } from '../../schema';
+
+const IconMap: Record<SchemaAttributeTypes, string> = {
+ float: 'icon-[carbon--string-integer]',
+ string: 'icon-[carbon--string-text]',
+ int: 'icon-[carbon--string-integer]',
+ boolean: 'icon-[carbon--boolean]',
+ bool: 'icon-[carbon--boolean]',
+ date: 'icon-[carbon--calendar]',
+ time: 'icon-[carbon--calendar]',
+ datetime: 'icon-[carbon--calendar]',
+ duration: 'icon-[carbon--calendar]',
+ number: 'icon-[carbon--string-integer]',
+ location: 'icon-[carbon--location]',
+};
+
+function getDataTypeIcon(data_type?: SchemaAttributeTypes): string {
+ return data_type && IconMap[data_type] ? IconMap[data_type] : 'icon-[carbon--undefined]';
+}
+
+export { getDataTypeIcon };
diff --git a/libs/shared/lib/querybuilder/model/graphology/metaAttributes.ts b/libs/shared/lib/querybuilder/model/graphology/metaAttributes.ts
index 3892d17fb..819415b55 100644
--- a/libs/shared/lib/querybuilder/model/graphology/metaAttributes.ts
+++ b/libs/shared/lib/querybuilder/model/graphology/metaAttributes.ts
@@ -5,7 +5,6 @@ const metaAttribute: Record<string, QueryGraphEdgeAttribute> = {
'(# Connection)': {
attributeName: '(# Connection)',
attributeType: 'float',
- attributeDimension: 'numerical',
},
};
diff --git a/libs/shared/lib/querybuilder/model/graphology/model.ts b/libs/shared/lib/querybuilder/model/graphology/model.ts
index b47deeb6e..9c72b3f08 100644
--- a/libs/shared/lib/querybuilder/model/graphology/model.ts
+++ b/libs/shared/lib/querybuilder/model/graphology/model.ts
@@ -5,6 +5,7 @@ import './utils';
import { GeneralDescription, InputNodeDimension, InputNodeType, InputNodeTypeTypes } from '../logic/general';
import { AllLogicTypes } from '../logic';
import { Handles, QueryElementTypes } from '../reactflow';
+import { SchemaAttributeTypes } from '@graphpolaris/shared/lib/schema';
// export interface Attributes extends EntityNode | RelationNode | AttributeNode | FunctionNode | ModifierNode {
// }
@@ -66,8 +67,7 @@ export type QueryGraphNodes = EntityNodeAttributes | RelationNodeAttributes | Lo
export type QueryGraphEdgeAttribute = {
attributeName: string;
- attributeType: InputNodeType;
- attributeDimension: InputNodeDimension;
+ attributeType: SchemaAttributeTypes;
};
export type QueryGraphEdgeHandle = {
diff --git a/libs/shared/lib/querybuilder/model/graphology/utils.ts b/libs/shared/lib/querybuilder/model/graphology/utils.ts
index 2597347d3..d05f1c764 100644
--- a/libs/shared/lib/querybuilder/model/graphology/utils.ts
+++ b/libs/shared/lib/querybuilder/model/graphology/utils.ts
@@ -11,7 +11,7 @@ import {
} from './model';
import { XYPosition } from 'reactflow';
import { Handles, QueryElementTypes } from '../reactflow';
-import { SchemaAttribute, SchemaGraphInference } from '@graphpolaris/shared/lib/schema';
+import { SchemaAttribute, SchemaAttributeTypes, SchemaGraphInference } from '@graphpolaris/shared/lib/schema';
import { InputNodeType, InputNodeTypeTypes } from '../logic/general';
import { checkForMetaAttributes } from './metaAttributes';
@@ -84,8 +84,7 @@ export class QueryMultiGraphology extends Graph<QueryGraphNodes, QueryGraphEdges
handleData: {
...defaultHandleData,
attributeName: optAttribute.name,
- // attributeType: optAttribute.type,
- attributeDimension: undefined, // FIXME
+ attributeType: optAttribute.type,
handleType: Handles.EntityAttribute,
},
});
@@ -100,8 +99,7 @@ export class QueryMultiGraphology extends Graph<QueryGraphNodes, QueryGraphEdges
handleData: {
...defaultHandleData,
attributeName: optAttribute.name,
- // attributeType: optAttribute.type,
- attributeDimension: undefined, // FIXME
+ attributeType: optAttribute.type,
handleType: Handles.RelationAttribute,
},
});
@@ -152,9 +150,9 @@ export class QueryMultiGraphology extends Graph<QueryGraphNodes, QueryGraphEdges
options: AddEdge2GraphologyOptions = {},
): string | null {
let sourceAttributeName = '';
- let sourceAttributeType: InputNodeType | undefined;
+ let sourceAttributeType: SchemaAttributeTypes | undefined;
let targetAttributeName = '';
- let targetAttributeType: InputNodeType | undefined;
+ let targetAttributeType: SchemaAttributeTypes | undefined;
let sourceHandleType: Handles = Handles.EntityRight;
let targetHandleType: Handles = Handles.EntityRight;
diff --git a/libs/shared/lib/querybuilder/pills/customFlowPills/entitypill/QueryEntityPill.tsx b/libs/shared/lib/querybuilder/pills/customFlowPills/entitypill/QueryEntityPill.tsx
index f3900d7a4..97b5865fc 100644
--- a/libs/shared/lib/querybuilder/pills/customFlowPills/entitypill/QueryEntityPill.tsx
+++ b/libs/shared/lib/querybuilder/pills/customFlowPills/entitypill/QueryEntityPill.tsx
@@ -11,7 +11,7 @@ import {
setQueryUnionType,
QueryUnionType,
} from '@graphpolaris/shared/lib/data-access/store/querybuilderSlice';
-import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import React, { useMemo, useRef, useState } from 'react';
import { Button } from '@graphpolaris/shared/lib/components/buttons';
import { Icon } from '@graphpolaris/shared/lib/components/icon';
import { TextInput } from '@graphpolaris/shared/lib/components/inputs';
@@ -23,6 +23,7 @@ import { DropdownTrigger, DropdownContainer, DropdownItemContainer, DropdownItem
import { PopoverContext } from '@graphpolaris/shared/lib/components/layout/Popover';
import { useDispatch } from 'react-redux';
import { isEqual } from 'lodash-es';
+import { getDataTypeIcon } from '@graphpolaris/shared/lib/components/DataTypeIcon';
/**
* Component to render an entity flow element
@@ -42,14 +43,6 @@ export const QueryEntityPill = React.memo((node: SchemaReactflowEntityNode) => {
[graph],
);
- const IconMap = {
- temporal: 'icon-[ic--baseline-calendar-today]',
- spatial: 'icon-[ic--baseline-map]',
- numerical: 'icon-[ic--baseline-numbers]',
- categorical: 'icon-[ic--baseline-abc]',
- default: 'icon-[ic--baseline-place]',
- };
-
const [openDropdown, setOpenDropdown] = useState(false);
const [filter, setFilter] = useState<string>('');
const resource = 'query';
@@ -131,13 +124,7 @@ export const QueryEntityPill = React.memo((node: SchemaReactflowEntityNode) => {
selected={isAttributeAdded(attr)}
onClick={(_) => addAttribute(attr)}
>
- <Icon
- component={
- attr?.handleData?.attributeDimension != null ? IconMap[attr.handleData.attributeDimension] : undefined
- }
- className="ms-2 float-end"
- size={16}
- />
+ <Icon component={getDataTypeIcon(attr?.handleData?.attributeType)} className="ms-2 float-end" size={16} />
</DropdownItem>
)),
]}
diff --git a/libs/shared/lib/querybuilder/pills/customFlowPills/relationpill/QueryRelationPill.tsx b/libs/shared/lib/querybuilder/pills/customFlowPills/relationpill/QueryRelationPill.tsx
index f97bbda5d..de647855b 100644
--- a/libs/shared/lib/querybuilder/pills/customFlowPills/relationpill/QueryRelationPill.tsx
+++ b/libs/shared/lib/querybuilder/pills/customFlowPills/relationpill/QueryRelationPill.tsx
@@ -28,6 +28,7 @@ import { Handle, Position } from 'reactflow';
import { pillWidth } from '@graphpolaris/shared/lib/components/pills/pill.const';
import { useQuerybuilderAttributesShown } from '@graphpolaris/shared/lib/data-access/store';
import { isEqual } from 'lodash-es';
+import { getDataTypeIcon } from '@graphpolaris/shared/lib/components/DataTypeIcon';
export const QueryRelationPill = memo((node: SchemaReactflowRelationNode) => {
const data = node.data;
@@ -40,14 +41,6 @@ export const QueryRelationPill = memo((node: SchemaReactflowRelationNode) => {
[node.id],
);
- const IconMap = {
- temporal: 'icon-[ic--baseline-calendar-today]',
- spatial: 'icon-[ic--baseline-map]',
- numerical: 'icon-[ic--baseline-numbers]',
- categorical: 'icon-[ic--baseline-abc]',
- default: 'icon-[ic--baseline-place]',
- };
-
const attributeEdges = useMemo(
() => graph.edges.filter((edge) => edge.source === node.id && !!edge?.attributes?.sourceHandleData.attributeType),
[graph],
@@ -162,13 +155,7 @@ export const QueryRelationPill = memo((node: SchemaReactflowRelationNode) => {
selected={isAttributeAdded(attr)}
onClick={(_) => addAttribute(attr)}
>
- <Icon
- component={
- attr?.handleData?.attributeDimension != null ? IconMap[attr.handleData.attributeDimension] : undefined
- }
- className="ms-2 float-end"
- size={16}
- />
+ <Icon component={getDataTypeIcon(attr?.handleData?.attributeType)} className="ms-2 float-end" size={16} />
</DropdownItem>
)),
]}
diff --git a/libs/shared/lib/querybuilder/pills/pillattributes/PillAttributes.tsx b/libs/shared/lib/querybuilder/pills/pillattributes/PillAttributes.tsx
index 28e63fefb..21f1315cd 100644
--- a/libs/shared/lib/querybuilder/pills/pillattributes/PillAttributes.tsx
+++ b/libs/shared/lib/querybuilder/pills/pillattributes/PillAttributes.tsx
@@ -1,9 +1,10 @@
import { useMemo, useState } from 'react';
import { NodeAttribute, QueryGraphEdges, SchemaReactflowEntityNode, SchemaReactflowRelationNode } from '../../model';
-import { useAppDispatch, useQuerybuilderAttributesShown } from '../../..';
+import { useQuerybuilderAttributesShown } from '../../..';
import { isEqual } from 'lodash-es';
import { PillAttributesItem } from './PillAttributesItem';
import { QueryUnionType } from '@graphpolaris/shared/lib/data-access/store/querybuilderSlice';
+import { getDataTypeIcon } from '@graphpolaris/shared/lib/components/DataTypeIcon';
type PillAttributesProps = {
node: SchemaReactflowEntityNode | SchemaReactflowRelationNode;
@@ -14,18 +15,6 @@ type PillAttributesProps = {
unionType?: QueryUnionType;
};
-type IconMapType = {
- [key: string]: string | undefined;
-};
-
-const IconMap: IconMapType = {
- temporal: 'icon-[ic--baseline-calendar-today]',
- spatial: 'icon-[ic--baseline-map]',
- numerical: 'icon-[ic--baseline-numbers]',
- categorical: 'icon-[ic--baseline-abc]',
- default: 'icon-[ic--baseline-place]',
-};
-
export const PillAttributes = (props: PillAttributesProps) => {
const attributesBeingShown = useQuerybuilderAttributesShown();
@@ -40,6 +29,7 @@ export const PillAttributes = (props: PillAttributesProps) => {
{attributesOfInterest &&
attributesOfInterest.map((showing, i) => {
if (!showing) return null;
+ console.log('props.attributes', props.attributes);
return (
<PillAttributesItem
key={props.attributes[i].handleData.attributeName || i}
@@ -47,11 +37,7 @@ export const PillAttributes = (props: PillAttributesProps) => {
attribute={props.attributes[i]}
mr={props.mr}
className={props.className}
- icon={
- props.attributes[i].handleData?.attributeDimension
- ? IconMap[props.attributes[i].handleData.attributeDimension || 0]
- : 'icon-[ic--outline-question-mark]'
- }
+ icon={getDataTypeIcon(props.attributes[i].handleData.attributeType)}
unionType={props.unionType}
/>
);
diff --git a/libs/shared/lib/schema/pills/nodes/SchemaPopUp/SchemaPopUp.tsx b/libs/shared/lib/schema/pills/nodes/SchemaPopUp/SchemaPopUp.tsx
index 91865cf57..837d658f4 100644
--- a/libs/shared/lib/schema/pills/nodes/SchemaPopUp/SchemaPopUp.tsx
+++ b/libs/shared/lib/schema/pills/nodes/SchemaPopUp/SchemaPopUp.tsx
@@ -1,6 +1,7 @@
import React from 'react';
import { Icon } from '@graphpolaris/shared/lib/components/icon';
import { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider } from '@graphpolaris/shared/lib/components/tooltip';
+import { getDataTypeIcon } from '@graphpolaris/shared/lib/components/DataTypeIcon';
const formatNumber = (number: number) => {
return number.toLocaleString('de-DE');
@@ -51,21 +52,7 @@ export const SchemaPopUp: React.FC<SchemaPopUpProps> = ({ data, numberOfElements
<span className="ml-auto text-right truncate grow-1 flex items-center">
<Icon
className="ml-auto text-right flex-shrink-0"
- component={
- v === 'int' || v === 'float' ? (
- <Icon component="icon-[carbon--string-integer]" size={24} color={'hsl(var(--clr-sec--500))'} />
- ) : v === 'string' ? (
- <Icon component="icon-[carbon--string-text]" size={24} color={'hsl(var(--clr-sec--500))'} />
- ) : v === 'boolean' || v === 'bool' ? (
- <Icon component="icon-[carbon--boolean]" size={24} color={'hsl(var(--clr-sec--500))'} />
- ) : v === 'date' || v === 'time' || v === 'duration' || v === 'datetime' ? (
- <Icon component="icon-[carbon--calendar]" size={24} color={'hsl(var(--clr-sec--500))'} />
- ) : v === 'undefined' ? (
- <Icon component="icon-[carbon--undefined]" size={24} color={'hsl(var(--clr-sec--500))'} />
- ) : (
- <Icon component="icon-[carbon--undefined]" size={24} color={'hsl(var(--clr-sec--500))'} />
- )
- }
+ component={<Icon component={getDataTypeIcon(v)} size={24} color={'hsl(var(--clr-sec--500))'} />}
color="hsl(var(--clr-sec--400))"
size={24}
/>
--
GitLab