Merge pull request #14 from partiql/website-update-and-workflow

Website update and workflow

.github/workflows/pr_to_gh_page_repo.yml

@@ -0,0 +1,59 @@
+name: PR To GitHub Page Repo
+
+on:
+  push:
+    branches:
+      - react-website
+
+jobs:
+  send-pull-requests:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+
+      - name: Build Bundle
+        run: |
+          npm i
+          npm run build
+
+      - name: copy Bundle
+        run: |
+          mkdir -p ~/artifact
+          cp dist/*.wasm ~/artifact
+          cp dist/*.js ~/artifact
+          cp dist/*.txt ~/artifact
+          ls ~/artifact >> $GITHUB_STEP_SUMMARY
+
+      - name: checkout github page repo
+        uses: actions/checkout@v4
+        with:
+          repository: 'partiql/partiql.github.io'
+          ref: 'main'
+          token: ${{ secrets.ACTION_TOKEN }}
+
+      - name: port changes
+        run: |
+          # Setup the committers identity.
+          git config user.email "[email protected]"
+          git config user.name "PartiQL Team"
+          
+          # port in the changes
+          rm -r ui/src/static
+          mkdir ui/src/static
+          cp ~/artifact/*.wasm ui/src/static
+          cp ~/artifact/*.js ui/src/static
+          cp ~/artifact/playground.js.LICENSE.txt ui/playground.js.LICENSE.txt
+          
+          git add .
+
+      - name: create pull-request
+        uses: peter-evans/create-pull-request@v5
+        with:
+          token: ${{ secrets.ACTION_TOKEN }}
+          commit-message: Update report
+          committer: PartiQL Team <[email protected]>
+          branch: update-playground
+          delete-branch: true
+          title: 'Update Playground'
+          body: |
+            Update Playground

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)  |

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">

src/component/Modal/ExportModal.jsx

@@ -1,8 +1,8 @@
 import {Alert, Box, Button, Modal, Typography} from "@mui/material";
-import React, {useContext} from "react";
+import React, {useContext, useEffect} from "react";
 import AppContext from "../../store/app-context";
-import {useLocation, useSearchParams} from "react-router-dom";
-import {encodeSearchParams} from "../../util/util";
+import {useLocation} from "react-router-dom";
+import {encodeSession} from "../../util/util";
 
 
 const style = {
@@ -19,25 +19,21 @@ const style = {
 export function ExportModal(props) {
     const appContext = useContext(AppContext);
     const [open, setOpen] = React.useState(appContext.showModal);
+    const [url, setUrl] = React.useState('')
     const location = useLocation()
     const handleClose = () => {
         setOpen(false);
         appContext.setShowModal(false)
     }
 
-    function setUrl() {
+    useEffect(() => {
         const str = window.location.href,
             rest = str.substring(0, str.lastIndexOf("/"))
 
-        let params = {}
-        if (props.env !== undefined) {
-            params['env'] = props.env
-        }
-        if (props.query !== undefined) {
-            params['query'] = props.query
-        }
-        return rest + location.pathname + "?session=" + encodeSearchParams(params)
-    }
+        encodeSession(props.query, props.env).then((session) => {
+            setUrl(rest + location.pathname + "?session=" + session)
+        })
+    })
 
 
     return (
@@ -50,12 +46,12 @@ export function ExportModal(props) {
             >
                 <Box sx={style}>
                     <Alert severity="warning">Do not use the link to store data. </Alert>
-                    <Typography id="modal-modal-title" variant="h6" component="h2" style={{ wordWrap: "break-word" }}>
-                        {setUrl()}
+                    <Typography id="modal-modal-title" variant="h6" component="h2" style={{wordWrap: "break-word"}}>
+                        {url}
                     </Typography>
                     <Button
                         onClick={() => {
-                            navigator.clipboard.writeText(setUrl())
+                            navigator.clipboard.writeText(url)
                             handleClose()
                         }}
                     >

src/component/Response/EvalResponse.jsx

@@ -1,8 +1,7 @@
-import {Drawer, Stack, Typography} from "@mui/material";
+import {Stack, Typography} from "@mui/material";
 import {Editor} from "../Editor/Editor";
 import AppContext from "../../store/app-context";
 import {useContext, useEffect, useState} from "react";
-import {OPERATION} from "../../const";
 
 function EvalResponse(props) {
 
@@ -14,20 +13,20 @@ function EvalResponse(props) {
         setRes(appContext.result)
     }, [appContext.result])
 
-        return (
+    return (
         <Stack>
             <Typography
                 sx={{
                     ml: 1,
-                    mb : 1,
+                    mb: 1,
                     display: 'flex',
                     fontWeight: 700,
                     letterSpacing: '.3rem',
                 }}>
                 Result </Typography>
             <Editor tag="result" value={res} height={props.height}/>
         </Stack>
-        )
+    )
 }
 
 export default EvalResponse

src/component/Response/ExplainResponse.jsx

@@ -16,7 +16,7 @@ function ExplainResponse() {
             <Typography
                 sx={{
                     ml: 1,
-                    mb : 1,
+                    mb: 1,
                     display: {xs: 'none', md: 'flex'},
                     fontWeight: 700,
                     letterSpacing: '.3rem',

src/component/Response/ParseResponse.jsx

@@ -1,4 +1,4 @@
-import {Box, Container, Grid, Stack, TextField, ToggleButton, ToggleButtonGroup, Typography} from "@mui/material";
+import {Box, Grid, Stack, TextField, ToggleButton, ToggleButtonGroup, Typography} from "@mui/material";
 import * as React from "react";
 import {useContext, useEffect, useState} from "react";
 import AppContext from "../../store/app-context";
@@ -24,7 +24,7 @@ export function ParseResponse(props) {
 
     function jsonViewer() {
         return <ReactJson src={JSON.parse(res)}
-                      theme="tomorrow"/>
+                          theme="tomorrow"/>
     }
 
     function rawJsonViwer() {
@@ -65,7 +65,7 @@ export function ParseResponse(props) {
                     <Typography
                         sx={{
                             ml: 1,
-                            mb : 1,
+                            mb: 1,
                             fontWeight: 700,
                             letterSpacing: '.3rem',
                             color: 'inherit'
@@ -75,7 +75,7 @@ export function ParseResponse(props) {
                 <Grid item xs={12} md={10}>
                     <ToggleButtonGroup
                         color="primary"
-                        sx={{padding: "0px", mr:2}}
+                        sx={{padding: "0px", mr: 2}}
 
                         value={parseOption}
                         exclusive