[Coral-Service] New React UI with Rewrites + Graph Visualizations

README.md

@@ -141,29 +141,54 @@ Then you can interact with the service using your [browser](#coral-service-ui) o
 
 ### Coral Service UI
 After running `../gradlew bootRun --args='--spring.profiles.active=localMetastore'` (for local metastore mode) 
-or `../gradlew bootRun` (for remote metastore mode) from coral-service module, 
-the UI can be accessed from the browser. Use the URL http://localhost:8080 to run the UI on a local browser.
+or `../gradlew bootRun` (for remote metastore mode) from coral-service module, configure and start the UI.
+
+#### To configure environment variables:
+1. Create a `.env.local` file in the frontend project's root directory
+2. Copy over the template from `.env.local.example` into the new `.env.local` file
+3. Fill in the environment variable values in `.env.local`
+
+#### Now you can start the Coral Service UI by running:
+```bash  
+npm run dev
+```
+Once compiled, the UI can be accessed from the browser at http://localhost:3000.
 <p align="center">
  <img src="docs/coral-service-ui/start.png" title="Coral Service UI">
 </p>
+The UI provides 3 features:
 
-The UI provides 2 features:
 #### Create a database/table/view in local metastore mode
 This feature is only available with Coral Service in local metastore mode, it calls `/api/catalog-ops/execute` API above.
 
-You can enter a SQL statement to create a database/table/view in the local metastore:
+You can enter a SQL statement to create a database/table/view in the local metastore.
 <p align="center">
  <img src="docs/coral-service-ui/creation.png" title="Coral Service Creation Feature">
 </p>
 
-#### Translate SQL from source language to target language
+#### Translate SQL from source language to target language (with rewrites)
 This feature is available with Coral Service in both local and remote metastore modes, it calls `/api/translations/translate` API above.
 
-You can enter a SQL query and specify the source and target language to use Coral translation service:
+You can enter a SQL query and specify the source and target language to use Coral translation service. You can also 
+specify the rewrite type to apply on the input query.
 <p align="center">
  <img src="docs/coral-service-ui/translation.png" title="Coral Service Translation Feature">
 </p>
 
+#### Generate graphviz visualizations of Coral intermediate representations
+During translation, graphs of the Coral intermediate representations
+will also be generated and shown on screen. This will also include any post-rewrite nodes.
+<p align="center">
+ <img src="docs/coral-service-ui/graphs.png" title="Coral Service Translation Feature">
+</p>
+
+#### Developing on the frontend code
+
+#### To lint/format your code:
+```bash  
+npm run lint:fix
+npm run format
+```
 ### Coral Service CLI
 Apart from the UI above, you can also interact with the service using the CLI.
 

coral-service/frontend/.env.local.example

@@ -0,0 +1,2 @@
+# Base URL of the Coral Service API, default is http://localhost:8080
+NEXT_PUBLIC_CORAL_SERVICE_API_URL=""

coral-service/frontend/.eslintrc.json

@@ -0,0 +1,3 @@
+{
+  "extends": ["eslint:recommended", "next", "plugin:prettier/recommended"]
+}

coral-service/frontend/.gitignore

@@ -0,0 +1,35 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# local env files
+.env*.local
+
+# vercel
+.vercel
+
+# typescript
+*.tsbuildinfo
+next-env.d.ts

coral-service/frontend/.prettierignore

@@ -0,0 +1 @@
+node_modules

coral-service/frontend/.prettierrc.json

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

coral-service/frontend/jsconfig.json

@@ -0,0 +1,7 @@
+{
+  "compilerOptions": {
+    "paths": {
+      "@/*": ["./src/*"]
+    }
+  }
+}

coral-service/frontend/next.config.js

@@ -0,0 +1,4 @@
+/** @type {import('next').NextConfig} */
+const nextConfig = {};
+
+module.exports = nextConfig;