Desktop build works with electron-packager (#8)

* Start working on desktop builds

* More progress...

* Building works!

* Building works!

* PostgreSQL working

Author: eatonphil

.gitignore

@@ -5,4 +5,6 @@ ui/build
 ui/data
 data
 build
-electron/build
+electron/build
+yarn-error.log
+releases

.prettierrc.json

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

README.md

@@ -1,6 +1,6 @@
 # DataStation Community Edition
 
-DataStation allows you to seamless connect SQL queries, HTTP requests,
+DataStation allows you to seamlessly connect SQL queries, HTTP requests,
 scripting, and visualization in a single platform.
 
 ![A screenshot of app.datastation.multiprocess.io](./screenshot.jpg)
@@ -29,4 +29,4 @@ interested in commercial support or to partner on the roadmap, please
 
 ## License
 
-This software is licensed under an Apache 2 license.
+This software is licensed under an Apache 2.0 license.

desktop/app.ts

@@ -23,7 +23,7 @@ app.whenReady().then(() => {
     // In addition to removing the menu on Windows/Linux this also disables Chrome devtools.
     win.removeMenu();
   }
-  win.loadFile('index.html');
+  win.loadFile(path.join(__dirname, 'index.html'));
 
   registerRPCHandlers(ipcMain, [
     ...storeHandlers,

package.json

@@ -1,43 +1,52 @@
 {
-    "name": "ui",
-    "version": "1.0.0",
-    "license": "MIT",
-    "scripts": {
-        "typecheck": "yarn tsc",
-        "build-desktop": "python ./scripts/build.py ./desktop/scripts/desktop.build",
-        "build-ui": "python ./scripts/build.py ./ui/scripts/ui.build",
-        "start-desktop": "yarn build-ui && yarn build-desktop && yarn electron --trace-warnings build/desktop.js",
-        "start-ui": "yarn build-ui && python3 -m http.server --directory build 8080",
-        "format": "yarn prettier --write \"**/*.ts\" \"**/*.tsx\" \"**/*.css\""
-    },
-    "dependencies": {
-        "@types/pg": "^8.6.0",
-        "@types/uuid": "^8.3.0",
-        "chart.js": "^3.3.2",
-        "electron": "^13.0.1",
-        "node-fetch": "^2.6.1",
-        "pako": "^2.0.3",
-        "papaparse": "^5.3.1",
-        "parquetjs-lite": "^0.8.7",
-        "pg": "^8.6.0",
-        "prismjs": "^1.23.0",
-        "react": "^17.0.2",
-        "react-dom": "^17.0.2",
-        "react-simple-code-editor": "^0.11.0",
-        "sql.js": "^1.5.0",
-        "uuid": "^8.3.2",
-        "xlsx": "^0.17.0"
-    },
-    "devDependencies": {
-        "@types/electron": "^1.6.10",
-        "@types/node-fetch": "^2.5.10",
-        "@types/pako": "^1.0.1",
-        "@types/papaparse": "^5.2.5",
-        "@types/prismjs": "^1.16.5",
-        "@types/react": "^17.0.9",
-        "@types/react-dom": "^17.0.6",
-        "esbuild": "^0.12.7",
-        "prettier": "^2.3.0",
-        "typescript": "^4.3.2"
-    }
+  "name": "datastation",
+  "productName": "DataStation Community Edition",
+  "version": "0.0.1",
+  "license": "Apache-2.0",
+  "description": "The Data IDE for Developers",
+  "author": "DataStation Authors",
+  "main": "build/desktop.js",
+  "scripts": {
+    "typecheck": "yarn tsc",
+    "build-desktop": "python ./scripts/build.py ./desktop/scripts/desktop.build",
+    "build-ui": "python ./scripts/build.py ./ui/scripts/ui.build",
+    "start-desktop": "yarn build-ui && yarn build-desktop && yarn electron --trace-warnings build/desktop.js",
+    "start-ui": "yarn build-ui && python3 -m http.server --directory build 8080",
+    "build-desktop-app": "yarn electron-packager --overwrite --out=releases .",
+    "format": "yarn prettier --write \"**/*.ts\" \"**/*.tsx\" \"**/*.css\" \"**/*.json\""
+  },
+  "dependencies": {
+    "@types/lodash.debounce": "^4.0.6",
+    "@types/pg": "^8.6.0",
+    "@types/uuid": "^8.3.0",
+    "chart.js": "^3.3.2",
+    "lodash.debounce": "^4.0.8",
+    "node-fetch": "^2.6.1",
+    "pako": "^2.0.3",
+    "papaparse": "^5.3.1",
+    "parquetjs-lite": "^0.8.7",
+    "pg": "^8.6.0",
+    "prismjs": "^1.23.0",
+    "react": "^17.0.2",
+    "react-dom": "^17.0.2",
+    "react-simple-code-editor": "^0.11.0",
+    "sql.js": "^1.5.0",
+    "uuid": "^8.3.2",
+    "xlsx": "^0.17.0"
+  },
+  "devDependencies": {
+    "@types/electron": "^1.6.10",
+    "@types/node-fetch": "^2.5.10",
+    "@types/pako": "^1.0.1",
+    "@types/papaparse": "^5.2.5",
+    "@types/prismjs": "^1.16.5",
+    "@types/react": "^17.0.9",
+    "@types/react-dom": "^17.0.6",
+    "electron": "^13.1.2",
+    "electron-packager": "^15.2.0",
+    "electron-winstaller": "^5.0.0",
+    "esbuild": "^0.12.7",
+    "prettier": "^2.3.0",
+    "typescript": "^4.3.2"
+  }
 }

scripts/build.py

@@ -58,7 +58,7 @@ def lex_command(command):
     return line
 
 for command in script:
-    if command.strip().startswith('#'):
+    if command.strip().startswith('#') or not command.strip():
         continue
 
     line = lex_command(command)

shared/state.ts

@@ -147,11 +147,22 @@ export class GraphPanelInfo extends PanelInfo {
 }
 
 export class SQLPanelInfo extends PanelInfo {
-  sql: SQLConnectorInfo;
+  sql: {
+    type: SQLConnectorInfoType;
+    connectorIndex: number;
+  };
 
-  constructor(name?: string, sql?: SQLConnectorInfo, content?: string) {
+  constructor(
+    name?: string,
+    type?: SQLConnectorInfoType,
+    connectorIndex?: number,
+    content?: string
+  ) {
     super('sql', name, content);
-    this.sql = new SQLConnectorInfo();
+    this.sql = {
+      type: type || 'in-memory',
+      connectorIndex: connectorIndex || 0,
+    };
   }
 }
 
@@ -269,7 +280,8 @@ export const DEFAULT_PROJECT: ProjectState = new ProjectState(
       ),
       new SQLPanelInfo(
         'Transform with SQL',
-        new SQLConnectorInfo('In Memory', 'in-memory'),
+        'in-memory',
+        0,
         'SELECT name, age+5 AS age FROM DM_getPanel(0);'
       ),
       (() => {

tsconfig.json

@@ -1,16 +1,13 @@
 {
-    "compilerOptions": {
-	"noImplicitAny": true,
-	"noEmit": true,
-	"jsx": "react",
-	"target": "esnext",
-	"module": "commonjs",
-	"skipLibCheck": true,
-	"esModuleInterop": true,
-	"typeRoots": [
-	    "./node_modules/@types",
-	    "./type-overrides"
-	]
-    },
-    "exclude": ["node_modules", "*.js", "build"]
+  "compilerOptions": {
+    "noImplicitAny": true,
+    "noEmit": true,
+    "jsx": "react",
+    "target": "esnext",
+    "module": "commonjs",
+    "skipLibCheck": true,
+    "esModuleInterop": true,
+    "typeRoots": ["./node_modules/@types", "./type-overrides"]
+  },
+  "exclude": ["node_modules", "*.js", "build"]
 }

ui/Page.tsx

@@ -1,25 +1,27 @@
 import * as React from 'react';
 
-import { ProjectPage } from './../shared/state';
+import { ConnectorInfo, ProjectPage } from './../shared/state';
 
 import { Panels } from './Panels';
 import { evalPanel } from './Panel';
 import { PanelResult } from './ProjectStore';
 
 export function Page({
   page,
+  connectors,
   updatePage,
   panelResults,
   setPanelResults,
 }: {
   page: ProjectPage;
   updatePage: (page: ProjectPage) => void;
+  connectors: Array<ConnectorInfo>;
   panelResults: Array<PanelResult>;
   setPanelResults: (panelIndex: number, results: PanelResult) => void;
 }) {
   async function reevalPanel(panelIndex: number) {
     try {
-      const r = await evalPanel(page, panelIndex, panelResults);
+      const r = await evalPanel(page, panelIndex, panelResults, connectors);
       setPanelResults(panelIndex, { lastRun: new Date(), value: r });
     } catch (e) {
       setPanelResults(panelIndex, {

ui/Pages.tsx

@@ -77,6 +77,7 @@ export function Pages({
 
       <Page
         page={page}
+        connectors={state.connectors}
         updatePage={updatePage}
         panelResults={panelResultsByPage[page.id]}
         setPanelResults={setPanelResults}

ui/Panel.tsx

@@ -1,6 +1,7 @@
 import * as React from 'react';
 
 import {
+  ConnectorInfo,
   ProjectPage,
   PanelInfo,
   GraphPanelInfo,
@@ -38,7 +39,8 @@ export const PANEL_TYPE_ICON = {
 export async function evalPanel(
   page: ProjectPage,
   panelId: number,
-  panelResults: Array<PanelResult>
+  panelResults: Array<PanelResult>,
+  connectors: Array<ConnectorInfo>
 ) {
   const panel = page.panels[panelId];
   switch (panel.type) {
@@ -47,7 +49,7 @@ export async function evalPanel(
     case 'literal':
       return await evalLiteralPanel(panel as LiteralPanelInfo);
     case 'sql':
-      return evalSQLPanel(panel as SQLPanelInfo, panelResults);
+      return evalSQLPanel(panel as SQLPanelInfo, panelResults, connectors);
     case 'graph':
       return (panelResults[(panel as GraphPanelInfo).graph.panelSource] || {})
         .value;

ui/SQLPanel.tsx

@@ -14,7 +14,8 @@ import { Select } from './component-library/Select';
 
 export async function evalSQLPanel(
   panel: SQLPanelInfo,
-  panelResults: Array<PanelResult>
+  panelResults: Array<PanelResult>,
+  connectors: Array<ConnectorInfo>
 ) {
   if (!panel.content.trim().toLowerCase().startsWith('select ')) {
     throw new Error('SQL must be read-only SELECT');
@@ -78,15 +79,15 @@ export async function evalSQLPanel(
     throw new Error('Malformed substitution in SQL');
   }
 
-  if (panel.sql.sql.type === 'postgres') {
+  if (panel.sql.type === 'postgres') {
     return await asyncRPC<SQLConnectorInfo, string, Array<object>>(
       'evalSQL',
       content,
-      panel.sql
+      connectors[+panel.sql.connectorIndex] as SQLConnectorInfo
     );
   }
 
-  if (panel.sql.sql.type === 'in-memory') {
+  if (panel.sql.type === 'in-memory') {
     let sql = (window as any).SQL;
     if (!sql) {
       sql = (window as any).SQL = await (window as any).initSqlJs({
@@ -96,12 +97,7 @@ export async function evalSQLPanel(
 
     const db = new sql.Database();
     let res: any;
-    try {
-      res = db.exec(content)[0];
-    } catch (e) {
-      console.error(e, content);
-      throw new Error('Syntax error');
-    }
+    res = db.exec(content)[0];
 
     return res.values.map((row: Array<any>) => {
       const formattedRow: { [k: string]: any } = {};
@@ -132,32 +128,31 @@ export function SQLPanelDetails({
           className="block"
           value={panel.sql.type}
           onChange={(value: string) => {
-            panel.sql.sql.type = value as SQLConnectorInfoType;
+            panel.sql.type = value as SQLConnectorInfoType;
             updatePanel(panel);
           }}
         >
           {MODE_FEATURES.sql && <option value="postgres">PostgreSQL</option>}
           <option value="in-memory">In-Memory SQL</option>
         </Select>
-        {MODE_FEATURES.sql && (
+        {MODE_FEATURES.sql && panel.sql.type !== 'in-memory' && (
           <Select
             label="Connector"
             className="block"
-            value={panel.sql.type}
+            value={panel.sql.connectorIndex.toString()}
             onChange={(connectorIndex: string) => {
-              panel.sql.sql = (
-                connectors[+connectorIndex] as SQLConnectorInfo
-              ).sql;
+              panel.sql.connectorIndex = +connectorIndex;
               updatePanel(panel);
             }}
+            nodefault
           >
             {connectors
               .map((c: ConnectorInfo, index: number) => {
                 if (c.type != 'sql') {
                   return null;
                 }
 
-                return <option value={index}>c.name</option>;
+                return <option value={index}>{c.name}</option>;
               })
               .filter(Boolean)}
           </Select>

ui/app.tsx

@@ -1,6 +1,7 @@
 import * as pako from 'pako';
 import * as React from 'react';
 import * as ReactDOM from 'react-dom';
+import debounce from 'lodash.debounce';
 
 import { APP_NAME, MODE, MODE_FEATURES } from '../shared/constants';
 import {
@@ -66,7 +67,8 @@ function useProjectState(
   const [state, setProjectState] = React.useState<ProjectState>(null);
 
   function setState(newState: ProjectState) {
-    store.update(projectId, newState);
+    const syncMillis = 5000;
+    debounce(() => store.update(projectId, newState), syncMillis);
     setProjectState(newState);
   }
 

ui/component-library/Select.tsx

@@ -7,13 +7,15 @@ export function Select({
   disabled,
   label,
   className,
+  nodefault,
 }: {
   value: string;
   onChange: (value: string) => void;
   children: React.ReactNode;
   disabled?: boolean;
   label?: string;
   className?: string;
+  nodefault?: boolean;
 }) {
   let selectClass = 'select';
   if (className) {
@@ -27,9 +29,11 @@ export function Select({
       onChange={(e: React.ChangeEvent<HTMLSelectElement>) =>
         onChange(e.target.value)
       }
-      children={children}
       disabled={disabled}
-    />
+    >
+      {nodefault && <option label=" "></option>}
+      {children}
+    </select>
   );
 
   if (label) {