diff --git a/cozo-lib-wasm/wasm-react-demo/package.json b/cozo-lib-wasm/wasm-react-demo/package.json index 005ab5d5..92d13652 100644 --- a/cozo-lib-wasm/wasm-react-demo/package.json +++ b/cozo-lib-wasm/wasm-react-demo/package.json @@ -10,6 +10,7 @@ "@testing-library/user-event": "^13.5.0", "ansicolor": "^1.1.100", "cozo-lib-wasm": "file:../pkg", + "file-saver": "^2.0.5", "react": "^18.2.0", "react-dom": "^18.2.0", "react-scripts": "5.0.1", diff --git a/cozo-lib-wasm/wasm-react-demo/src/App.js b/cozo-lib-wasm/wasm-react-demo/src/App.js index b62a66d3..cb86406b 100644 --- a/cozo-lib-wasm/wasm-react-demo/src/App.js +++ b/cozo-lib-wasm/wasm-react-demo/src/App.js @@ -7,15 +7,28 @@ */ import './App.css'; -import {Button, Intent, Tag, TextArea} from "@blueprintjs/core"; +import { + Button, + Checkbox, + Classes, + Dialog, + FileInput, + InputGroup, + Intent, + Tag, + TextArea, + Toaster +} from "@blueprintjs/core"; import {Cell, Column, Table2} from "@blueprintjs/table"; import React, {useEffect, useState} from "react"; import init, {CozoDb} from "cozo-lib-wasm"; import {parse} from "ansicolor"; +import {saveAs} from 'file-saver'; + function App() { const [db, setDb] = useState(null); - const [params, setParams] = useState('{\n\n}'); + const [params, setParams] = useState('{}'); const [showParams, setShowParams] = useState(false); const [queryText, setQueryText] = useState(''); const [inProgress, setInProgress] = useState(false); @@ -83,7 +96,7 @@ function App() { const t1 = performance.now(); const res = JSON.parse(res_str); if (res.ok) { - setStatusMessage(`finished with ${res.rows.length} rows in ${(t1 - t0).toFixed(2)}ms`); + setStatusMessage(`finished with ${res.rows.length} rows in ${(t1 - t0).toFixed(1)}ms`); if (!res.headers) { res.headers = []; if (res.rows.length) { @@ -140,20 +153,26 @@ function App() {
@@ -223,4 +242,165 @@ function App() { ); } +function ImportUrl({db}) { + const [open, setOpen] = useState(false); + const [url, setUrl] = useState(''); + + function handleClose() { + setOpen(false) + } + + async function handleImport() { + try { + let resp = await fetch(url); + let content = await resp.text(); + const res = JSON.parse(db.import_relations(content)); + if (res.ok) { + handleClose() + } else { + AppToaster.show({message: res.message, intent: Intent.DANGER}) + } + } catch (e) { + AppToaster.show({message: '' + e, intent: Intent.DANGER}) + } + + + } + + return <> +{ + setUrl(''); + setOpen(true) + }}> + URL + + + > +} + +function ImportFile({db}) { + const [open, setOpen] = useState(false); + const [file, setFile] = useState(null); + + function handleClose() { + setOpen(false) + } + + async function handleImport() { + try { + let content = await file.text(); + const res = JSON.parse(db.import_relations(content)); + if (res.ok) { + handleClose() + } else { + AppToaster.show({message: res.message, intent: Intent.DANGER}) + } + } catch (e) { + AppToaster.show({message: '' + e, intent: Intent.DANGER}) + } + + + } + + return <> +setOpen(true)}> + File + + + > +} + +function Export({db}) { + const [rels, setRels] = useState([]); + const [selected, setSelected] = useState([]); + + function toggle() { + if (rels.length) { + setRels([]) + } else { + const relations = JSON.parse(db.run('::relations', '')).rows; + if (!relations.length) { + AppToaster.show({message: 'No stored relations to export', intent: Intent.WARNING}) + return; + } + + setSelected([]); + setRels(relations) + } + } + + function handleClose() { + setRels([]) + } + + function handleExport() { + const res = JSON.parse(db.export_relations(JSON.stringify({relations: selected}))); + if (res.ok) { + const blob = new Blob([JSON.stringify(res.data)], {type: "text/plain;charset=utf-8"}); + saveAs(blob, "export.json"); + handleClose() + } else { + AppToaster.show({message: res.message, intent: Intent.DANGER}) + } + } + + return <> ++ Export + + + > +} + +const AppToaster = Toaster.create({position: 'top-right'}); + + export default App; diff --git a/cozo-lib-wasm/wasm-react-demo/src/index.js b/cozo-lib-wasm/wasm-react-demo/src/index.js index be95b604..5f3b3169 100644 --- a/cozo-lib-wasm/wasm-react-demo/src/index.js +++ b/cozo-lib-wasm/wasm-react-demo/src/index.js @@ -14,9 +14,9 @@ import reportWebVitals from './reportWebVitals'; const root = ReactDOM.createRoot(document.getElementById('root')); root.render( -- + //- + ); // If you want to start measuring performance in your app, pass a function diff --git a/cozo-lib-wasm/wasm-react-demo/yarn.lock b/cozo-lib-wasm/wasm-react-demo/yarn.lock index b0940f26..519e562a 100644 --- a/cozo-lib-wasm/wasm-react-demo/yarn.lock +++ b/cozo-lib-wasm/wasm-react-demo/yarn.lock @@ -4510,6 +4510,11 @@ file-loader@^6.2.0: loader-utils "^2.0.0" schema-utils "^3.0.0" +file-saver@^2.0.5: + version "2.0.5" + resolved "https://registry.npmmirror.com/file-saver/-/file-saver-2.0.5.tgz#d61cfe2ce059f414d899e9dd6d4107ee25670c38" + integrity sha512-P9bmyZ3h/PRG+Nzga+rbdI4OEpNDzAVyy74uVO9ATgzLK6VtAsYybF/+TOCvrc0MO793d6+42lLyZTw7/ArVzA== + filelist@^1.0.1: version "1.0.4" resolved "https://registry.npmmirror.com/filelist/-/filelist-1.0.4.tgz#f78978a1e944775ff9e62e744424f215e58352b5"+ //