update playground & add workflow

.github/workflows/pr_to_gh_page_repo.yml

@@ -0,0 +1,65 @@
+name: PR To GitHub Page Repo
+
+on:
+  push:
+    branches:
+      - react-website
+
+jobs:
+  send-pull-requests:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v3
+
+      - name: Build Bundle
+        run: |
+          npm i
+          npm run build
+
+      - name: copy Bundle
+        run: |
+          mkdir -p $GITHUB_WORKSPACE/artifact
+          cp dist/*.wasm $GITHUB_WORKSPACE/artifact
+          cp dist/*.js $GITHUB_WORKSPACE/artifact
+          cp dist/*.txt $GITHUB_WORKSPACE/artifact
+          ls $GITHUB_WORKSPACE/artifact >> $GITHUB_STEP_SUMMARY
+
+
+      - name: Send pull-request
+        run: |
+          REPOSITORY="partiql/partiql.github.io"
+          FOLDER="bin/$REPOSITORY"
+          BRANCH_NAME="Update-Playground"
+
+          gh repo clone partiql/partiql.github.io $FOLDER
+          
+          echo "clone completed"
+
+          cd $FOLDER
+
+          # Setup the committers identity.
+          git config user.email "[email protected]"
+          git config user.name "PartiQL Team"
+
+          # Create a new feature branch for the changes.
+          git checkout -b $BRANCH_NAME
+
+          # Remove Static Folder
+          rm -rf $FOLDER/ui/src/static
+          mkdir $FOLDER/ui/src/static
+          cp $GITHUB_WORKSPACE/artifact/*.wasm $FOLDER/ui/src/static
+          cp $GITHUB_WORKSPACE/artifact/*.js $FOLDER/ui/src/static
+          cp $GITHUB_WORKSPACE/artifact/playground.js.LICENSE.txt  $FOLDER/ui/playground.js.LICENSE.txt
+
+          # Commit the changes and push the feature branch to origin
+          git add .
+          git commit -m "update playground"
+          git push origin $BRANCH_NAME
+
+          gh pr create \
+            --body "Port From ${{ github.head_ref }}. Commit:  ${{ github.sha }}" \
+            --title "Update Playground" \
+            --head "$BRANCH_NAME" \
+            --base "main"
+        env:
+          GH_TOKEN: ${{ secrets.GITHUB_TOKEN }}

Readme.md

@@ -28,7 +28,6 @@ PartiQL-Rust-Playground utilized WASM(web assembly) to run PartiQL-rust in the w
     git checkout main -- pkg-web
     ```
 
-2. GitHub Workflow (Not yet deployed)
+2. GitHub Workflow
 Any push towards the main branch will automatically trigger a workflow that build the wasm file and created a PR to copy the wasm file to branch `react-website`
-Simple PR: https://github.com/yliuuuu/partiql-rust-playground/pull/2
 

pkg-web/README.md

@@ -0,0 +1,58 @@
+# PartiQL Playground (Proof of Concept)
+
+PartiQL Playground provides the functionality to execute PartiQL in a web environment.
+
+_Please note, at this stage, the code as is in this package is considered experimental and should not be used for production._
+
+:raised_hands: Checkout the [playground](https://partiql.org/playground.html#/evaluate) now :raised_hands:. 
+
+## Development
+This Branch contains Rust Code for WASM generation.
+
+`PartiQL Playground` uses [WebAssembly (Wasm)](https://webassembly.org/) for integrating the front-end with PartiQL Rust back-end.
+
+Upon merging pull request, the GitHub action will automatically create a new pull request towards `react-website` branch. 
+
+The `React Website` branch contains code for the experimental web application. 
+
+To run test: 
+```
+
+```
+
+## Build and run the website application (Locally)
+1. Checkout main branch and develop
+2. Build the package using `make`
+```commandline
+make build
+```
+3. Port the wasm files to `react wesbite` branch
+```commandline
+git checkout -b temp
+make buid
+rm pkg-web/.gitignore
+git add .
+git commit -m "adding pkg-web to git"
+git checkout react-website
+git checkout temp -- pkg-web
+git add pkg-web
+git commit -m "wasm update"
+```
+
+4. Build the `react website branch`
+```commandline
+npm i
+npm run serve
+```
+
+
+## Legacy Asset
+| Branch Name | Asset                                                                                               | 
+|-------------|-----------------------------------------------------------------------------------------------------| 
+| Docker      | A version of PartiQL Playground implementation. Additional features includes docker build Rest APIs |
+
+## Dependencies
+| Package                                                                | License                                                                                         |
+|------------------------------------------------------------------------|-------------------------------------------------------------------------------------------------|
+| [wasm-bindgen](https://github.com/rustwasm/wasm-bindgen)               | [Apache License Version 2.0](https://github.com/rustwasm/wasm-bindgen/blob/main/LICENSE-APACHE) | 
+| [wasm-pack](https://github.com/rustwasm/wasm-pack)                     | [Apache License Version 2.0](https://github.com/rustwasm/wasm-pack/blob/master/LICENSE-APACHE)  |

pkg-web/partiql_playground.d.ts

@@ -1,6 +1,17 @@
 /* tslint:disable */
 /* eslint-disable */
 /**
+* @param {string} query
+* @param {string} env
+* @returns {string}
+*/
+export function generate_session(query: string, env: string): string;
+/**
+* @param {string} session
+* @returns {Array<any>}
+*/
+export function decode_session_as_array(session: string): Array<any>;
+/**
 * Parses the given query and returns the json serialized string.
 * @param {string} query
 * @returns {string}
@@ -37,6 +48,8 @@ export type InitInput = RequestInfo | URL | Response | BufferSource | WebAssembl
 
 export interface InitOutput {
   readonly memory: WebAssembly.Memory;
+  readonly generate_session: (a: number, b: number, c: number, d: number, e: number) => void;
+  readonly decode_session_as_array: (a: number, b: number) => number;
   readonly parse_as_json: (a: number, b: number, c: number) => void;
   readonly eval_as_json: (a: number, b: number, c: number, d: number, e: number) => void;
   readonly eval_as_string: (a: number, b: number, c: number, d: number, e: number) => void;

pkg-web/partiql_playground.js

@@ -18,6 +18,35 @@ function getStringFromWasm0(ptr, len) {
     return cachedTextDecoder.decode(getUint8Memory0().subarray(ptr, ptr + len));
 }
 
+const heap = new Array(128).fill(undefined);
+
+heap.push(undefined, null, true, false);
+
+let heap_next = heap.length;
+
+function addHeapObject(obj) {
+    if (heap_next === heap.length) heap.push(heap.length + 1);
+    const idx = heap_next;
+    heap_next = heap[idx];
+
+    heap[idx] = obj;
+    return idx;
+}
+
+function getObject(idx) { return heap[idx]; }
+
+function dropObject(idx) {
+    if (idx < 132) return;
+    heap[idx] = heap_next;
+    heap_next = idx;
+}
+
+function takeObject(idx) {
+    const ret = getObject(idx);
+    dropObject(idx);
+    return ret;
+}
+
 let WASM_VECTOR_LEN = 0;
 
 const cachedTextEncoder = (typeof TextEncoder !== 'undefined' ? new TextEncoder('utf-8') : { encode: () => { throw Error('TextEncoder not available') } } );
@@ -81,6 +110,43 @@ function getInt32Memory0() {
     }
     return cachedInt32Memory0;
 }
+/**
+* @param {string} query
+* @param {string} env
+* @returns {string}
+*/
+export function generate_session(query, env) {
+    let deferred3_0;
+    let deferred3_1;
+    try {
+        const retptr = wasm.__wbindgen_add_to_stack_pointer(-16);
+        const ptr0 = passStringToWasm0(query, wasm.__wbindgen_malloc, wasm.__wbindgen_realloc);
+        const len0 = WASM_VECTOR_LEN;
+        const ptr1 = passStringToWasm0(env, wasm.__wbindgen_malloc, wasm.__wbindgen_realloc);
+        const len1 = WASM_VECTOR_LEN;
+        wasm.generate_session(retptr, ptr0, len0, ptr1, len1);
+        var r0 = getInt32Memory0()[retptr / 4 + 0];
+        var r1 = getInt32Memory0()[retptr / 4 + 1];
+        deferred3_0 = r0;
+        deferred3_1 = r1;
+        return getStringFromWasm0(r0, r1);
+    } finally {
+        wasm.__wbindgen_add_to_stack_pointer(16);
+        wasm.__wbindgen_free(deferred3_0, deferred3_1, 1);
+    }
+}
+
+/**
+* @param {string} session
+* @returns {Array<any>}
+*/
+export function decode_session_as_array(session) {
+    const ptr0 = passStringToWasm0(session, wasm.__wbindgen_malloc, wasm.__wbindgen_realloc);
+    const len0 = WASM_VECTOR_LEN;
+    const ret = wasm.decode_session_as_array(ptr0, len0);
+    return takeObject(ret);
+}
+
 /**
 * Parses the given query and returns the json serialized string.
 * @param {string} query
@@ -241,6 +307,21 @@ async function __wbg_load(module, imports) {
 function __wbg_get_imports() {
     const imports = {};
     imports.wbg = {};
+    imports.wbg.__wbindgen_string_new = function(arg0, arg1) {
+        const ret = getStringFromWasm0(arg0, arg1);
+        return addHeapObject(ret);
+    };
+    imports.wbg.__wbindgen_object_drop_ref = function(arg0) {
+        takeObject(arg0);
+    };
+    imports.wbg.__wbg_new_34c624469fb1d4fd = function() {
+        const ret = new Array();
+        return addHeapObject(ret);
+    };
+    imports.wbg.__wbg_push_906164999551d793 = function(arg0, arg1) {
+        const ret = getObject(arg0).push(getObject(arg1));
+        return ret;
+    };
     imports.wbg.__wbindgen_throw = function(arg0, arg1) {
         throw new Error(getStringFromWasm0(arg0, arg1));
     };

pkg-web/partiql_playground_bg.wasm.d.ts

@@ -1,6 +1,8 @@
 /* tslint:disable */
 /* eslint-disable */
 export const memory: WebAssembly.Memory;
+export function generate_session(a: number, b: number, c: number, d: number, e: number): void;
+export function decode_session_as_array(a: number, b: number): number;
 export function parse_as_json(a: number, b: number, c: number): void;
 export function eval_as_json(a: number, b: number, c: number, d: number, e: number): void;
 export function eval_as_string(a: number, b: number, c: number, d: number, e: number): void;

src/App.jsx

@@ -1,14 +1,11 @@
 import {Navigate, Route, Routes} from 'react-router-dom';
-import React, {useContext, useEffect, useRef} from "react";
+import React from "react";
 
 import EvalPage from "./pages/Eval";
 import ExplainPage from "./pages/Explain";
 import ParsePage from "./pages/Parse";
-import Topbar from "./component/Layout/Topbar";
 import {createTheme, ThemeProvider} from "@mui/material/styles";
-import {Alert, Box, CssBaseline, Stack} from "@mui/material";
-import {ExportModal} from "./component/Modal/ExportModal";
-import AppContext from "./store/app-context";
+import {CssBaseline} from "@mui/material";
 
 function App(props) {
     const darkTheme = createTheme({
@@ -21,7 +18,7 @@ function App(props) {
         <ThemeProvider theme={darkTheme}>
             <CssBaseline/>
             <Routes>
-                <Route path='/' element={<Navigate to='/evaluate' />}/>
+                <Route path='/' element={<Navigate to='/evaluate'/>}/>
                 <Route path='/parse' element={<ParsePage/>}/>
                 <Route path='/explain' element={<ExplainPage/>}/>
                 <Route path='/evaluate' element={<EvalPage/>}/>

src/component/Editor/Editor.jsx

@@ -28,12 +28,12 @@ export function Editor(props) {
     }
 
     return (
-        <Stack direction="column" height={props.height-35} width='100%'>
+        <Stack direction="column" height={props.height - 35} width='100%'>
             {(props.tag !== "result") &&
                 <Typography
                     sx={{
                         ml: 1,
-                        mb : 1,
+                        mb: 1,
                         display: 'flex',
                         fontWeight: 700,
                         letterSpacing: '.3rem',

src/component/Layout/Topbar.jsx

@@ -1,13 +1,13 @@
 import * as React from "react";
-import {useContext, useEffect} from "react";
+import {useContext} from "react";
 
-import {AppBar, Box, Button, Container, MenuItem, Select, TextField, Toolbar, Typography} from "@mui/material";
+import {AppBar, Box, Button, Container, MenuItem, Select, TextField, Toolbar} from "@mui/material";
 import FileDownloadOutlinedIcon from '@mui/icons-material/FileDownloadOutlined';
 import SendIcon from '@mui/icons-material/Send';
-import {useLocation, useNavigate} from "react-router-dom";
+import {useNavigate} from "react-router-dom";
 import {OPERATION} from "../../const";
 import AppContext from "../../store/app-context";
-import init, {eval_as_string, parse_as_json, explain_as_string} from "../../../pkg-web";
+import init, {eval_as_string, explain_as_string, parse_as_json} from "../../../pkg-web";
 
 
 function Topbar(props) {
@@ -59,37 +59,37 @@ function Topbar(props) {
     }
 
     return (<AppBar elevation={0}
-                    sx={{ bgcolor: "#121212" }}
+                    sx={{bgcolor: "#121212"}}
                     position="relative">
         <Container maxWidth={false} style={{margin: 0}}>
             <Toolbar disableGutters>
-                <Box sx={{ m: 2 }} display = "flex" justifyContent="space-between">
-                <Select
-                    labelId="select-operation"
-                    id="select-operation"
-                    value={op}
-                    onChange={opHandler}
-                >
-                    {Object.values(OPERATION).map((operation) => (<MenuItem
-                        key={operation}
-                        value={operation}
+                <Box sx={{m: 2}} display="flex" justifyContent="space-between">
+                    <Select
+                        labelId="select-operation"
+                        id="select-operation"
+                        value={op}
+                        onChange={opHandler}
                     >
-                        {operation.charAt(0).toUpperCase() + operation.slice(1)}
-                    </MenuItem>))})
-                </Select>
-                <TextField
-                    disabled
-                    id="outlined-disabled"
-                    label="PartiQL Rust Version"
-                    defaultValue="V0.3.*"
-                    sx={{
-                        maxWidth: 150,
-                        ml: 2,
-                        "& .MuiInputBase-input.Mui-disabled": {
-                            WebkitTextFillColor: "#ffffff",
-                        }
-                    }}
-                />
+                        {Object.values(OPERATION).map((operation) => (<MenuItem
+                            key={operation}
+                            value={operation}
+                        >
+                            {operation.charAt(0).toUpperCase() + operation.slice(1)}
+                        </MenuItem>))})
+                    </Select>
+                    <TextField
+                        disabled
+                        id="outlined-disabled"
+                        label="PartiQL Rust Version"
+                        defaultValue="V0.3.*"
+                        sx={{
+                            maxWidth: 150,
+                            ml: 2,
+                            "& .MuiInputBase-input.Mui-disabled": {
+                                WebkitTextFillColor: "#ffffff",
+                            }
+                        }}
+                    />
                 </Box>
                 <Box sx={{flexGrow: 1}}/>
                 <Box display="flex" justifyContent="space-between">