fix(wren-ui): Align column types with backend connectors provided typ…

…es (#216) * fix(wren-ui): align column types with connectors provided types, add UUID icon & Binary icon * fix(wren-ui): update calculated field functions types checking
Canner · May 8, 2024 · c00ec4c · c00ec4c
1 parent db42d07
commit c00ec4c
Show file tree

Hide file tree

Showing 4 changed files with 106 additions and 63 deletions.
diff --git a/wren-ui/src/utils/columnType.tsx b/wren-ui/src/utils/columnType.tsx
@@ -2,63 +2,65 @@ import {
   NumericIcon,
   ColumnsIcon,
   JsonBracesIcon,
-  ArrayBracketsIcon,
   StringIcon,
   TextIcon,
   CalendarIcon,
   TickIcon,
+  IdIcon,
+  BinaryIcon,
 } from './icons';
 import { COLUMN_TYPE } from './enum';
 
 export const getColumnTypeIcon = (payload: { type: string }, attrs?: any) => {
   const { type } = payload;
   const compareString = type.toUpperCase();
   switch (compareString) {
-    case COLUMN_TYPE.INTEGER:
+    case COLUMN_TYPE.BOOLEAN:
+      return <TickIcon {...attrs} />;
+
+    case COLUMN_TYPE.JSON:
+      return <JsonBracesIcon {...attrs} />;
+
+    case COLUMN_TYPE.TEXT:
+      return <TextIcon {...attrs} />;
+
+    case COLUMN_TYPE.BYTEA:
+      return <BinaryIcon {...attrs} />;
+
+    case COLUMN_TYPE.UUID:
+    case COLUMN_TYPE.OID:
+      return <IdIcon {...attrs} />;
+
     case COLUMN_TYPE.TINYINT:
+    case COLUMN_TYPE.INT2:
     case COLUMN_TYPE.SMALLINT:
+    case COLUMN_TYPE.INT4:
+    case COLUMN_TYPE.INTEGER:
+    case COLUMN_TYPE.INT8:
     case COLUMN_TYPE.BIGINT:
-    case COLUMN_TYPE.INT:
+    case COLUMN_TYPE.NUMERIC:
     case COLUMN_TYPE.DECIMAL:
-    case COLUMN_TYPE.DOUBLE:
+    case COLUMN_TYPE.FLOAT4:
     case COLUMN_TYPE.REAL:
-    case COLUMN_TYPE.NUMBER:
+    case COLUMN_TYPE.FLOAT8:
+    case COLUMN_TYPE.DOUBLE:
+    case COLUMN_TYPE.INET:
       return <NumericIcon {...attrs} />;
 
-    case COLUMN_TYPE.BOOLEAN:
-      return <TickIcon {...attrs} />;
-
-    case COLUMN_TYPE.CHAR:
-    case COLUMN_TYPE.JSON:
-    case COLUMN_TYPE.VARBINARY:
     case COLUMN_TYPE.VARCHAR:
+    case COLUMN_TYPE.CHAR:
+    case COLUMN_TYPE.BPCHAR:
     case COLUMN_TYPE.STRING:
+    case COLUMN_TYPE.NAME:
       return <StringIcon {...attrs} />;
 
-    case COLUMN_TYPE.TEXT:
-      return <TextIcon {...attrs} />;
-
-    case COLUMN_TYPE.DATE:
-    case COLUMN_TYPE.DATETIME:
-    case COLUMN_TYPE.TIME:
     case COLUMN_TYPE.TIMESTAMP:
+    case COLUMN_TYPE.TIMESTAMPTZ:
+    case COLUMN_TYPE.DATE:
+    case COLUMN_TYPE.INTERVAL:
       return <CalendarIcon {...attrs} />;
 
-    case COLUMN_TYPE.MONGO_ARRAY:
-      return <ArrayBracketsIcon {...attrs} />;
-
-    case COLUMN_TYPE.MONGO_ROW:
-      return <JsonBracesIcon {...attrs} />;
-
     default: {
-      // int* or uint* or float*
-      if (
-        compareString.startsWith('INT') ||
-        compareString.startsWith('UINT') ||
-        compareString.startsWith('FLOAT')
-      ) {
-        return <NumericIcon {...attrs} />;
-      }
       return <ColumnsIcon {...attrs} />;
     }
   }

diff --git a/wren-ui/src/utils/enum/columnType.ts b/wren-ui/src/utils/enum/columnType.ts
@@ -1,37 +1,62 @@
+// Refer to backend connector types:
+// src/apollo/server/connectors/types.ts
+
 export enum COLUMN_TYPE {
-  // Boolean
+  // Boolean Types
   BOOLEAN = 'BOOLEAN',
 
-  // Date and Time
-  DATE = 'DATE',
-  TIME = 'TIME',
-  TIMESTAMP = 'TIMESTAMP',
-  DATETIME = 'DATETIME',
-
-  // Integer
-  INTEGER = 'INTEGER',
+  // Numeric Types
   TINYINT = 'TINYINT',
-  SMALLINT = 'SMALLINT',
-  BIGINT = 'BIGINT',
-  INT = 'INT',
-  NUMBER = 'NUMBER',
 
-  // Floating-Point
-  DOUBLE = 'DOUBLE',
-  REAL = 'REAL',
+  INT2 = 'INT2',
+  SMALLINT = 'SMALLINT', // alias for INT2
+
+  INT4 = 'INT4',
+  INTEGER = 'INTEGER', // alias for INT4
 
-  // Fixed-Precision
+  INT8 = 'INT8',
+  BIGINT = 'BIGINT', // alias for INT8
+
+  NUMERIC = 'NUMERIC',
   DECIMAL = 'DECIMAL',
 
-  // String
+  // Floating-Point Types
+  FLOAT4 = 'FLOAT4',
+  REAL = 'REAL', // alias for FLOAT4
+
+  FLOAT8 = 'FLOAT8',
+  DOUBLE = 'DOUBLE', // alias for FLOAT8
+
+  // Character Types
+  VARCHAR = 'VARCHAR',
   CHAR = 'CHAR',
+  BPCHAR = 'BPCHAR', // BPCHAR is fixed-length, blank padded string
+  TEXT = 'TEXT', // alias for VARCHAR
+  STRING = 'STRING', // alias for VARCHAR
+  NAME = 'NAME', // alias for VARCHAR
+
+  // Date/Time Types
+  TIMESTAMP = 'TIMESTAMP',
+  TIMESTAMPTZ = 'TIMESTAMP WITH TIME ZONE',
+  DATE = 'DATE',
+  INTERVAL = 'INTERVAL',
+
+  // JSON Types
   JSON = 'JSON',
-  TEXT = 'TEXT',
-  VARBINARY = 'VARBINARY',
-  VARCHAR = 'VARCHAR',
-  STRING = 'STRING',
 
-  // Mongo DB
-  MONGO_ARRAY = 'ARRAY',
-  MONGO_ROW = 'ROW',
+  // Object identifiers (OIDs) are used internally by PostgreSQL as primary keys for various system tables.
+  // https://www.postgresql.org/docs/current/datatype-oid.html
+  OID = 'OID',
+
+  // Binary Data Types
+  BYTEA = 'BYTEA',
+
+  // UUID Type
+  UUID = 'UUID',
+
+  // Network Address Types
+  INET = 'INET',
+
+  // Unknown Type
+  UNKNOWN = 'UNKNOWN',
 }
diff --git a/wren-ui/src/utils/icons.ts b/wren-ui/src/utils/icons.ts
@@ -6,8 +6,9 @@ import {
   InfoCircle,
   Cube,
   LineChart,
+  IdCard,
 } from '@styled-icons/boxicons-regular';
-import { Braces, Brackets, Map2 } from '@styled-icons/remix-line';
+import { Braces, Map2 } from '@styled-icons/remix-line';
 import {
   SortNumerically,
   SortAlphabetically,
@@ -20,6 +21,7 @@ import {
   Pageview,
   Explore,
 } from '@styled-icons/material-outlined';
+import FieldBinaryOutlined from '@ant-design/icons/FieldBinaryOutlined';
 import MonitorOutlined from '@ant-design/icons/MonitorOutlined';
 import SwapOutlined from '@ant-design/icons/SwapOutlined';
 import ShareAltOutlined from '@ant-design/icons/ShareAltOutlined';
@@ -43,12 +45,15 @@ export const TextIcon = styled(Text)`
 export const CalendarIcon = styled(Calendar)`
   height: 1em;
 `;
-export const ArrayBracketsIcon = styled(Brackets)`
+export const IdIcon = styled(IdCard)`
   height: 1em;
 `;
 export const JsonBracesIcon = styled(Braces)`
   height: 1em;
 `;
+export const BinaryIcon = styled(FieldBinaryOutlined)`
+  height: 1em;
+`;
 export const ColumnsIcon = styled(Columns)`
   height: 1em;
 `;

diff --git a/wren-ui/src/utils/validator/calculatedFieldValidator.ts b/wren-ui/src/utils/validator/calculatedFieldValidator.ts
@@ -37,19 +37,30 @@ const makeCheckAllowType =
 
 export const checkStringFunctionAllowType = makeCheckAllowType(
   stringFunctions,
-  [COLUMN_TYPE.VARCHAR, COLUMN_TYPE.CHAR, COLUMN_TYPE.TEXT, COLUMN_TYPE.STRING],
+  [
+    COLUMN_TYPE.VARCHAR,
+    COLUMN_TYPE.CHAR,
+    COLUMN_TYPE.BPCHAR,
+    COLUMN_TYPE.TEXT,
+    COLUMN_TYPE.STRING,
+    COLUMN_TYPE.NAME,
+  ],
 );
 
 export const checkNumberFunctionAllowType = makeCheckAllowType(mathFunctions, [
-  COLUMN_TYPE.INTEGER,
   COLUMN_TYPE.TINYINT,
+  COLUMN_TYPE.INT2,
   COLUMN_TYPE.SMALLINT,
+  COLUMN_TYPE.INT4,
+  COLUMN_TYPE.INTEGER,
+  COLUMN_TYPE.INT8,
   COLUMN_TYPE.BIGINT,
-  COLUMN_TYPE.INT,
+  COLUMN_TYPE.NUMERIC,
   COLUMN_TYPE.DECIMAL,
-  COLUMN_TYPE.DOUBLE,
+  COLUMN_TYPE.FLOAT4,
   COLUMN_TYPE.REAL,
-  COLUMN_TYPE.NUMBER,
+  COLUMN_TYPE.FLOAT8,
+  COLUMN_TYPE.DOUBLE,
 ]);
 
 export const createLineageSelectorValidator =