fix: unified data icons for schema and qb

libs/shared/lib/components/DataTypeIcon/index.tsx

+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 };

libs/shared/lib/querybuilder/model/graphology/metaAttributes.ts

@@ -5,7 +5,6 @@ const metaAttribute: Record<string, QueryGraphEdgeAttribute> = {
   '(# Connection)': {
     attributeName: '(# Connection)',
     attributeType: 'float',
-    attributeDimension: 'numerical',
   },
 };
 

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 = {

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;
 

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>
                         )),
                       ]}

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>
                         )),
                       ]}

libs/shared/lib/querybuilder/pills/pillattributes/PillAttributes.tsx

 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}
             />
           );

libs/shared/lib/schema/pills/nodes/SchemaPopUp/SchemaPopUp.tsx

 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}
                         />