Migrate ui codebase (#11)

* chore(wren-ui): migrate ui codebase

* fix(wren-ui): remove package-lock file, remove unused test files. Add eslint plugins

* fix(wren-ui): fix usedvars lint issue

* fix(wren-ui): fix gitignore

* Chore(wren-ui): Add prettier for eslint (#13)

* chore(wren-ui): add prettier, eslint-config-prettier, eslint-plugin-prettier packages

* fix(wren-ui): prettier format lint

---------

Co-authored-by: shimin <[email protected]>

* fix generate-gql issue (#14)

---------

Co-authored-by: Shimin <[email protected]>
Co-authored-by: shimin <[email protected]>
Co-authored-by: Andy Yen <[email protected]>

.editorconfig

@@ -0,0 +1,13 @@
+# Editor configuration, see http://editorconfig.org
+root = true
+
+[*]
+charset = utf-8
+indent_style = space
+indent_size = 2
+insert_final_newline = true
+trim_trailing_whitespace = true
+
+[*.md]
+max_line_length = off
+trim_trailing_whitespace = false

.gitignore

@@ -11,7 +11,7 @@ wren-ai-service/qdrant_storage/
 src/eval/vulcansql-core-server/config.properties
 outputs/
 spider/
-data/
+wren-ai-service/**/data/
 !wren-ai-service/tests/data
 !src/eval/data
 poetry.lock
@@ -29,4 +29,40 @@ local_cache
 
 # os
 .DS_Store
-__MACOSX/
+__MACOSX/
+*.pem
+
+# sqlite
+*.sqlite
+*.sqlite3
+
+# ui
+## dependencies
+node_modules
+.pnp
+.pnp.js
+
+## testing
+wren-ui/coverage
+
+## next.js
+wren-ui/.next
+wren-ui/out
+
+## production
+wren-ui/build
+
+## debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+## local env files
+.env*.local
+
+## vercel
+.vercel
+
+## typescript
+*.tsbuildinfo
+next-env.d.ts

wren-ui/.eslintignore

@@ -0,0 +1 @@
+**/node_modules

wren-ui/.eslintrc.json

@@ -0,0 +1,56 @@
+{
+  "root": true,
+  "parser": "@typescript-eslint/parser",
+  "extends": ["next/core-web-vitals", "plugin:@typescript-eslint/recommended", "prettier"],
+  "plugins": ["@typescript-eslint", "eslint-plugin-prettier"],
+  "ignorePatterns": [
+    "!**/*",
+    ".next/**/*",
+    "src/apollo/client/graphql/__types__.ts",
+    "src/apollo/client/graphql/*.generated.ts"
+  ],
+  "overrides": [
+    {
+      "files": ["*.ts", "*.tsx", "*.js", "*.jsx"],
+      "rules": {
+        "@next/next/no-html-link-for-pages": [
+          "error",
+          "src/pages"
+        ],
+        "@next/next/no-img-element": "off",
+        "react-hooks/exhaustive-deps": "off"
+      }
+    },
+    {
+      "files": ["*.ts", "*.tsx"],
+      "rules": {}
+    },
+    {
+      "files": ["*.js", "*.jsx"],
+      "rules": {}
+    }
+  ],
+  "rules": {
+    "prettier/prettier": "error",
+    "@next/next/no-html-link-for-pages": "off",
+    "react/display-name": 0,
+    "react/no-unescaped-entities": 0,
+    "@typescript-eslint/no-explicit-any": "off",
+    "@typescript-eslint/no-non-null-assertion": "off",
+    "@typescript-eslint/no-unused-vars": [
+      "error",
+      {
+        "args": "all",
+        "argsIgnorePattern": "^_",
+        "caughtErrors": "all",
+        "caughtErrorsIgnorePattern": "^_",
+        "destructuredArrayIgnorePattern": "^_",
+        "varsIgnorePattern": "^_",
+        "ignoreRestSiblings": true
+      }
+    ]
+  },
+  "env": {
+    "jest": true
+  }
+}

wren-ui/.prettierrc

@@ -0,0 +1,3 @@
+{
+  "singleQuote": true
+}

wren-ui/README.md

@@ -0,0 +1,36 @@
+This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app).
+
+## Getting Started
+
+First, run the development server:
+
+```bash
+npm run dev
+# or
+yarn dev
+# or
+pnpm dev
+# or
+bun dev
+```
+
+Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
+
+You can start editing the page by modifying `app/page.tsx`. The page auto-updates as you edit the file.
+
+This project uses [`next/font`](https://nextjs.org/docs/basic-features/font-optimization) to automatically optimize and load Inter, a custom Google Font.
+
+## Learn More
+
+To learn more about Next.js, take a look at the following resources:
+
+- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
+- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
+
+You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome!
+
+## Deploy on Vercel
+
+The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
+
+Check out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details.

wren-ui/codegen.yaml

@@ -0,0 +1,20 @@
+overwrite: true
+schema:
+  [
+    'http://localhost:3000/api/graphql'
+  ]
+generates:
+  ./src/apollo/client/graphql/__types__.ts:
+    plugins:
+      - typescript
+      - typescript-operations
+      - typescript-react-apollo
+  ./:
+    preset: near-operation-file
+    presetConfig:
+      extension: .generated.ts
+      baseTypesPath: ./src/apollo/client/graphql/__types__.ts
+    documents: ./src/apollo/client/graphql/!(*.generated).{ts,tsx}
+    plugins:
+      - typescript-operations
+      - typescript-react-apollo

wren-ui/jest.config.js

@@ -0,0 +1,5 @@
+/** @type {import('ts-jest').JestConfigWithTsJest} */
+module.exports = {
+  preset: 'ts-jest',
+  testEnvironment: 'node',
+};

wren-ui/knexfile.js

@@ -0,0 +1,19 @@
+// Update with your config settings.
+
+/**
+ * @type { Object.<string, import("knex").Knex.Config> }
+ */
+if (process.env.DB_TYPE === 'pg') {
+    console.log('Using Postgres');
+    module.exports = {
+      client: 'pg',
+      connection: process.env.PG_URL,
+    };
+  } else {
+    console.log('Using SQLite');
+    module.exports = {
+      client: 'better-sqlite3',
+      connection: process.env.SQLITE_FILE,
+    };
+  }
+

wren-ui/migrations/20240125070643_create_project_table.js

@@ -0,0 +1,39 @@
+/**
+ * @param { import("knex").Knex } knex
+ * @returns { Promise<void> }
+ */
+exports.up = function (knex) {
+  return knex.schema.createTable('project', (table) => {
+    table.increments('id').comment('ID');
+    table
+      .string('type')
+      .comment(
+        'project datasource type. ex: bigquery, mysql, postgresql, mongodb, etc'
+      );
+    table.string('display_name').comment('project display name');
+
+    // bq
+    table.string('project_id').comment('gcp project id, big query specific');
+    table
+      .text('credentials')
+      .comment('project credentials, big query specific');
+    table
+      .string('location')
+      .comment('where the dataset been stored, big query specific');
+    table.string('dataset').comment('big query dataset name');
+
+    // not sure to store or not, the catalog & schema in the manifest
+    table.string('catalog').comment('catalog name');
+    table.string('schema').comment('');
+
+    table.timestamps(true, true);
+  });
+};
+
+/**
+ * @param { import("knex").Knex } knex
+ * @returns { Promise<void> }
+ */
+exports.down = function (knex) {
+  return knex.schema.dropTable('project');
+};

wren-ui/migrations/20240125071855_create_model_table.js

@@ -0,0 +1,44 @@
+/**
+ * @param { import("knex").Knex } knex
+ * @returns { Promise<void> }
+ */
+exports.up = function (knex) {
+  return knex.schema.createTable('model', (table) => {
+    table.increments('id').comment('ID');
+    table.integer('project_id').comment('Reference to project.id');
+
+    // basic info
+    table.string('name').comment('the model display name');
+    table
+      .string('table_name')
+      .comment('referenced table name in the datasource');
+    table.text('ref_sql').comment('Reference SQL');
+
+    // cache setting
+    table.boolean('cached').comment('model is cached or not');
+    table
+      .string('refresh_time')
+      .comment(
+        'contain a number followed by a time unit (ns, us, ms, s, m, h, d). For example, "2h"'
+      )
+      .nullable();
+
+    // model properties
+    table
+      .text('properties')
+      .comment(
+        'model properties, a json string, the description and displayName should be stored here'
+      )
+      .nullable();
+
+    table.timestamps(true, true);
+  });
+};
+
+/**
+ * @param { import("knex").Knex } knex
+ * @returns { Promise<void> }
+ */
+exports.down = function (knex) {
+  return knex.schema.dropTable('model');
+};

wren-ui/migrations/20240125081244_create_model_column_table.js

@@ -0,0 +1,59 @@
+/**
+ * @param { import("knex").Knex } knex
+ * @returns { Promise<void> }
+ */
+exports.up = function (knex) {
+  return knex.schema.createTable('model_column', (table) => {
+    table.increments('id').comment('ID');
+    table.integer('model_id').comment('Reference to model ID');
+    // column name
+    table.boolean('is_calculated').comment('Is calculated field');
+    table.string('name').comment('Column name');
+
+    // aggregation
+    table
+      .text('aggregation')
+      .comment(
+        'Expression for the column, could be custom field or calculated field expression, eg: sum, aggregate'
+      )
+      .nullable();
+    table
+      .text('lineage')
+      .comment(
+        'the selected field in calculated field, array of ids, [relationId 1, relationId 2, columnId], last one should be columnId, while others are relationId'
+      )
+      .nullable();
+    table
+      .text('diagram')
+      .comment('for FE to store the calculated field diagram')
+      .nullable();
+
+    table
+      .text('custom_expression')
+      .comment('for custom field or custom expression of calculated field.')
+      .nullable();
+
+    table
+      .string('type')
+      .comment('Data type, refer to the column type in the datasource');
+    table.boolean('not_null').comment('Is not null');
+    // is primary key
+    table.boolean('is_pk').comment('Is primary key of the table');
+    table
+      .text('properties')
+      .comment(
+        'column properties, a json string, the description and displayName should be stored here'
+      )
+      .nullable();
+
+    table.timestamps(true, true);
+  });
+};
+
+/**
+ * @param { import("knex").Knex } knex
+ * @returns { Promise<void> }
+ */
+exports.down = function (knex) {
+  return knex.schema.dropTable('model_column');
+};

wren-ui/migrations/20240125083821_create_relation_table.js

@@ -0,0 +1,33 @@
+/**
+ * @param { import("knex").Knex } knex
+ * @returns { Promise<void> }
+ */
+exports.up = function (knex) {
+  return knex.schema.createTable('relation', (table) => {
+    table.increments('id').comment('ID');
+    table.integer('project_id').comment('Reference to project.id');
+    table.string('name').comment('relation name').unique();
+    table
+      .string('join_type')
+      .comment('join type, eg:"ONE_TO_ONE", "ONE_TO_MANY", "MANY_TO_ONE"');
+    table
+      .integer('left_column_id')
+      .comment(
+        'left column id, "{leftSideColumn} {joinType} {rightSideColumn}"'
+      );
+    table
+      .integer('right_column_id')
+      .comment(
+        'right column id, "{leftSideColumn} {joinType} {rightSideColumn}"'
+      );
+    table.timestamps(true, true);
+  });
+};
+
+/**
+ * @param { import("knex").Knex } knex
+ * @returns { Promise<void> }
+ */
+exports.down = function (knex) {
+  return knex.schema.dropTable('relation');
+};