(this.node = d)} />
16 | }
17 | }
18 |
--------------------------------------------------------------------------------
/CONTRIBUTING.md:
--------------------------------------------------------------------------------
1 | ## Prerequisites
2 |
3 | [Node.js](http://nodejs.org/) >= v4 must be installed.
4 |
5 | ## Installation
6 |
7 | - Running `npm install` in the app's root directory will install everything you need for development.
8 |
9 | ## Development Server
10 |
11 | - `npm start` will run the app's development server at [http://localhost:3000](http://localhost:3000) with hot module reloading.
12 |
13 | ## Running Tests
14 |
15 | - `npm test` will run the tests once.
16 |
17 | - `npm run test:coverage` will run the tests and produce a coverage report in `coverage/`.
18 |
19 | - `npm run test:watch` will run the tests on every change.
20 |
21 | ## Building
22 |
23 | - `npm run build` creates a production build by default.
24 |
25 | To create a development build, set the `NODE_ENV` environment variable to `development` while running this command.
26 |
27 | - `npm run clean` will delete built resources.
28 |
--------------------------------------------------------------------------------
/LICENSE.md:
--------------------------------------------------------------------------------
1 | Copyright (c) 2017 Kevin Kwok, Guillermo Webster
2 |
3 | Permission is hereby granted, free of charge, to any person obtaining a copy
4 | of this software and associated documentation files (the "Software"), to deal
5 | in the Software without restriction, including without limitation the rights
6 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
7 | copies of the Software, and to permit persons to whom the Software is
8 | furnished to do so, subject to the following conditions:
9 |
10 | The above copyright notice and this permission notice shall be included in all
11 | copies or substantial portions of the Software.
12 |
13 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
14 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
15 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
16 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
17 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
18 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
19 | SOFTWARE.
20 |
--------------------------------------------------------------------------------
/public/reciever.html:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/nwb.config.js:
--------------------------------------------------------------------------------
1 | var StatsPlugin = require('stats-webpack-plugin')
2 | var webpack = require('webpack')
3 |
4 | module.exports = {
5 | type: 'react-app',
6 | webpack: {
7 | node: {
8 | fs: 'empty',
9 | net: 'empty',
10 | tls: 'empty',
11 | },
12 | extra: {
13 | plugins: [
14 | new StatsPlugin('stats.json', {
15 | chunkModules: true,
16 | }),
17 | new webpack.ContextReplacementPlugin(
18 | /graphql-language-service-interface[\\/]dist$/,
19 | new RegExp(`^\\./.*\\.js$`)
20 | ),
21 | ],
22 | },
23 |
24 | publicPath: '',
25 | uglify: {
26 | compress: {
27 | warnings: false,
28 | },
29 | output: {
30 | comments: false,
31 | },
32 | sourceMap: true,
33 | exclude: /worker\.js/,
34 | },
35 | },
36 | babel: {
37 | stage: 1,
38 | // cherryPick: 'lodash',
39 | // runtime: false,
40 | // presets: [["env", {
41 | // loose: true,
42 | // targets: {
43 | // chrome: 59
44 | // }
45 | // }]]
46 | },
47 | }
48 |
--------------------------------------------------------------------------------
/DEPLOYING_LOCALLY.md:
--------------------------------------------------------------------------------
1 | If you want to try franchise out, there's an online version you try right now [right here](https://franchise.cloud).
2 |
3 | If you're interested in contributing, there are instructions for running franchise in development mode in [the readme](https://github.com/HVF/franchise#running-locally).
4 |
5 | Otherwise...
6 |
7 | # Deploying Locally
8 | 0. **If you don't have `npm` or `yarn`, install** [yarn](https://yarnpkg.com/en/docs/install).
9 |
10 | 1. **Open up a terminal and run**
11 |
12 | ```bash
13 | git clone --depth 1 https://github.com/HVF/franchise.git
14 | ```
15 |
16 | 2. **cd into the project directory**
17 | ```bash
18 | cd franchise
19 | ```
20 |
21 | 3. **Install the project dependencies**
22 | ```bash
23 | yarn install
24 | ```
25 |
26 | (you can also run `npm install`)
27 |
28 | 4. **Build franchise to static files**
29 | ```bash
30 | yarn build
31 | ```
32 | This command makes a folder named `/bundle` containing an `index.html` file which runs franchise when you open it in a browser.
33 |
34 | 5. **Serve the static files**
35 |
36 | Use the http server of your choice to serve the contents of the `/bundle` directory. Using python, you might write:
37 |
38 | ```bash
39 | cd bundle
40 | python -m SimpleHTTPServer
41 | ```
42 |
43 | 6. (optional) **Email us at sql@hvflabs.com if you're doing something interesting with franchise!**
44 |
--------------------------------------------------------------------------------
/src/util/error.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 |
3 | // largely shamelessly plagiarized from https://github.com/bvaughn/react-error-boundary
4 |
5 | const toTitle = (error, componentStack) => {
6 | return `${error.toString()}\n\nThis is located at:${componentStack}`
7 | }
8 |
9 | function FallbackComponent({ componentStack, error }) {
10 | return (
11 |
12 | ${error.toString()}
13 |
14 | )
15 | }
16 |
17 | export default class ErrorBoundary extends React.Component {
18 | constructor() {
19 | super()
20 | this.state = {
21 | error: null,
22 | info: null,
23 | }
24 | }
25 | componentDidCatch(error, info) {
26 | this.setState({ error, info })
27 | }
28 |
29 | render() {
30 | const { children } = this.props
31 | const { error, info } = this.state
32 |
33 | if (error !== null) {
34 | return (
35 |
24 | {db.Clippy ? (
25 |
28 |
29 |
30 | )
31 | }
32 |
33 | function ease(t) {
34 | return t < 0.5 ? 4 * t * t * t : (t - 1) * (2 * t - 2) * (2 * t - 2) + 1
35 | }
36 |
37 | function animateScrollHere(el) {
38 | let s0 = document.body.scrollTop,
39 | s1 = el.offsetTop - 10,
40 | t0 = Date.now(),
41 | t1 = t0 + 400
42 |
43 | function helper() {
44 | document.body.scrollTop = s0 + ease((Date.now() - t0) / (t1 - t0)) * (s1 - s0)
45 |
46 | if (Date.now() < t1) {
47 | requestAnimationFrame(helper)
48 | }
49 | }
50 | helper()
51 | }
52 |
--------------------------------------------------------------------------------
/src/cell/carto.less:
--------------------------------------------------------------------------------
1 | .inline {
2 | .pivot-visualizer,
3 | .bp-table-container {
4 | max-height: 300px;
5 | }
6 |
7 | .single-row {
8 | max-height: 400px;
9 | }
10 |
11 | .carto-container {
12 | height: 600px;
13 | display: flex;
14 | flex-wrap: wrap-reverse;
15 | flex-direction: column;
16 |
17 | .cartocss,
18 | .carto-css .pt-popover-target,
19 | .input-wrap,
20 | .input-wrap .ReactCodeMirror {
21 | width: 320px;
22 | }
23 | }
24 | }
25 |
26 | .cm-s-monokai .CodeMirror-lines,
27 | .cm-s-monokai .stale.CodeMirror-focused.CodeMirror-lines,
28 | .cm-s-monokai.CodeMirror {
29 | background: #2b3c43 !important;
30 | }
31 |
32 | .carto-css {
33 | height: 600px;
34 |
35 | .input-wrap,
36 | .ReactCodeMirror,
37 | .CodeMirror-wrap {
38 | height: 100% !important;
39 | }
40 |
41 | .fa {
42 | margin-left: -3px;
43 | color: #aaa;
44 | }
45 |
46 | .input-wrap,
47 | .ReactCodeMirror,
48 | .CodeMirror-wrap,
49 | button {
50 | z-index: 2;
51 | }
52 |
53 | button {
54 | margin-left: -15px;
55 | background: #f5f8fa;
56 | border: none;
57 | }
58 |
59 | button:focus {
60 | outline: none;
61 | }
62 | }
63 |
64 | .carto-container {
65 | width: 100%;
66 |
67 | .leaflet-left {
68 | left: 340px;
69 | }
70 | }
71 |
72 | .carto-css .input-wrap {
73 | transition: 1s;
74 | left: 0;
75 | height: 600px;
76 | }
77 |
78 | .carto-css.hide .input-wrap {
79 | transition: 1s;
80 | left: -305px;
81 | }
82 |
--------------------------------------------------------------------------------
/src/state/index.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import * as U from './update'
3 |
4 | let currentState
5 | let batchDepth = 0
6 | let isRendering = false
7 | let renderCallback
8 |
9 | export function get(...combinators) {
10 | if (isRendering) console.warn(new Error('State.get must not be called during render call'))
11 | return U.get(currentState, ...combinators)
12 | }
13 |
14 | export function getAll(...combinators) {
15 | if (isRendering) console.warn(new Error('State.get must not be called during render call'))
16 | return U.getAll(currentState, ...combinators)
17 | }
18 |
19 | export function set(next_state) {
20 | if (isRendering) console.warn(new Error('State.set must not be called during render call'))
21 | batch((_) => (currentState = next_state))
22 | }
23 |
24 | export function apply(...combinators) {
25 | set(U.apply(get(), ...combinators))
26 | }
27 |
28 | export const batch = (fn) => batchify(fn)()
29 |
30 | export function batchify(fn) {
31 | return function(...args) {
32 | let originalState = currentState
33 | batchDepth++
34 | try {
35 | return fn(...args)
36 | } finally {
37 | batchDepth--
38 | if (batchDepth === 0 && originalState !== currentState && renderCallback)
39 | renderCallback()
40 | }
41 | }
42 | }
43 |
44 | export function Application(render) {
45 | return class Application extends React.Component {
46 | componentDidUpdate() {
47 | isRendering = false
48 | }
49 | componentDidMount() {
50 | isRendering = false
51 | renderCallback = (e) => this.setState({})
52 | }
53 | render() {
54 | isRendering = true
55 | return render(currentState)
56 | }
57 | }
58 | }
59 |
--------------------------------------------------------------------------------
/src/cell/hipster.less:
--------------------------------------------------------------------------------
1 | .cm-s-hipster span.cm-meta {
2 | color: #ff1717;
3 | }
4 | .cm-s-hipster span.cm-keyword {
5 | line-height: 1em;
6 | font-weight: bold;
7 | color: #7f0055;
8 | }
9 | .cm-s-hipster span.cm-atom {
10 | color: #219;
11 | }
12 | .cm-s-hipster span.cm-number {
13 | color: #164;
14 | }
15 | .cm-s-hipster span.cm-def {
16 | color: #00f;
17 | }
18 | .cm-s-hipster span.cm-variable {
19 | color: black;
20 | }
21 | .cm-s-hipster span.cm-variable-2 {
22 | color: #0000c0;
23 | }
24 | .cm-s-hipster span.cm-variable-3,
25 | .cm-s-hipster span.cm-type {
26 | color: #0000c0;
27 | }
28 | .cm-s-hipster span.cm-property {
29 | color: black;
30 | }
31 | .cm-s-hipster span.cm-operator {
32 | color: black;
33 | }
34 | .cm-s-hipster span.cm-comment {
35 | color: #3f7f5f;
36 | }
37 | .cm-s-hipster span.cm-string {
38 | color: #2a00ff;
39 | }
40 | .cm-s-hipster span.cm-string-2 {
41 | color: #f50;
42 | }
43 | .cm-s-hipster span.cm-qualifier {
44 | color: #555;
45 | }
46 | .cm-s-hipster span.cm-builtin {
47 | color: #30a;
48 | }
49 | .cm-s-hipster span.cm-bracket {
50 | color: #cc7;
51 | }
52 | .cm-s-hipster span.cm-tag {
53 | color: #170;
54 | }
55 | .cm-s-hipster span.cm-attribute {
56 | color: #00c;
57 | }
58 | .cm-s-hipster span.cm-link {
59 | color: #219;
60 | }
61 | .cm-s-hipster span.cm-error {
62 | color: #f00;
63 | }
64 |
65 | .cm-s-hipster .CodeMirror-activeline-background {
66 | background: #e8f2ff;
67 | }
68 | .cm-s-hipster .CodeMirror-matchingbracket {
69 | outline: 1px solid grey;
70 | color: black !important;
71 | }
72 |
73 | .cm-s-hipster span.cm-string {
74 | color: #c54997;
75 | }
76 |
77 | .cm-s-hipster span.cm-keyword {
78 | line-height: 1em;
79 | color: #2196f3;
80 | }
81 |
82 | .cm-s-hipster span.cm-variable-2 {
83 | color: #673ab7;
84 | }
85 |
--------------------------------------------------------------------------------
/src/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 | Franchise
8 |
9 |
73 |
74 |
75 | Loading Franchise...
76 |
77 |
78 |
79 |
80 |
81 |
82 |
--------------------------------------------------------------------------------
/data/explain.sql:
--------------------------------------------------------------------------------
1 | DROP TABLE IF EXISTS cust_hist;
2 | CREATE TABLE cust_hist (customerid integer, orderid integer);
3 | INSERT INTO cust_hist VALUES (883, 3);
4 | INSERT INTO cust_hist VALUES (882, 33);
5 | INSERT INTO cust_hist VALUES (882, 331);
6 |
7 | DROP TABLE IF EXISTS customers;
8 | CREATE TABLE customers (state text, customerid integer);
9 | INSERT INTO customers VALUES ('VA', 882);
10 | INSERT INTO customers VALUES ('MD', 883);
11 | INSERT INTO customers VALUES ('CA', 131);
12 | INSERT INTO customers VALUES ('MA', 431);
13 |
14 | DROP TABLE IF EXISTS orders;
15 | CREATE TABLE orders ( netamount numeric , totalamount numeric, orderid integer);
16 | INSERT INTO orders VALUES (13.2, 33.2, 3);
17 | INSERT INTO orders VALUES (11.37, 112.3, 33);
18 | INSERT INTO orders VALUES (42.4, 119.2, 331);
19 | INSERT INTO orders VALUES (105.28, 31);
20 |
21 | DROP TABLE IF EXISTS orderlines;
22 | CREATE TABLE orderlines ( prod_id integer, orderid integer);
23 | INSERT INTO orderlines VALUES (44, 3);
24 | INSERT INTO orderlines VALUES (22, 33);
25 | INSERT INTO orderlines VALUES (99, 331);
26 | INSERT INTO orderlines VALUES (44, 31);
27 |
28 | DROP TABLE IF EXISTS products;
29 | CREATE TABLE products ( prod_id integer, category integer);
30 | INSERT INTO products VALUES (44, 93);
31 | INSERT INTO products VALUES (22, 23);
32 | INSERT INTO products VALUES (99, 23);
33 | INSERT INTO products VALUES (44, 93);
34 |
35 | DROP TABLE IF EXISTS categories;
36 | CREATE TABLE categories ( categoryname text, category integer);
37 | INSERT INTO categories VALUES ('pet rock', 93);
38 | INSERT INTO categories VALUES ('headphones', 23);
39 | INSERT INTO categories VALUES ('chewing gum', 25);
40 |
41 |
42 | EXPLAIN (ANALYZE, COSTS, VERBOSE, BUFFERS, FORMAT JSON) SELECT c.state,
43 | cat.categoryname,
44 | sum(o.netamount),
45 | sum(o.totalamount)
46 | FROM customers c
47 | INNER JOIN cust_hist ch ON c.customerid = ch.customerid
48 | INNER JOIN orders o ON ch.orderid = o.orderid
49 | INNER JOIN orderlines ol ON ol.orderid = o.orderid
50 | INNER JOIN products p ON ol.prod_id = p.prod_id
51 | INNER JOIN categories cat ON p.category = cat.category
52 | GROUP BY c.state, cat.categoryname
53 | ORDER BY c.state, sum(o.totalamount) DESC
54 | LIMIT 10 OFFSET 1
--------------------------------------------------------------------------------
/src/state/update.js:
--------------------------------------------------------------------------------
1 | export const def = (val) => (orig, next) => next(typeof orig === 'undefined' ? val : orig)
2 |
3 | export const key = (key) => (object, next) => ({ ...object, [key]: next(object[key]) })
4 | export const safe_key = (key) => (object, next) => ({
5 | ...object,
6 | [key]: next(typeof object != 'undefined' ? object[key] : undefined),
7 | })
8 |
9 | export const id = (id) => (array, next) => array.map((k) => (k.id === id ? next(k) : k))
10 | export const match = (test) => (array, next) => array.map((k, i) => (test(k, i) ? next(k) : k))
11 | export const index = (index) => (array, next) =>
12 | array.slice(0, index).concat([next(array[index])], array.slice(index + 1))
13 |
14 | export const replace = (value) => (object, next) => value
15 | export const merge = (value) => (object, next) => ({ ...object, ...value })
16 |
17 | export const removeMatch = (test) => (array, next) => array.filter((k) => !test(k))
18 | export const removeId = (id) => (array, next) => array.filter((k) => k.id !== id)
19 | export const removeIndex = (index) => (array, next) =>
20 | array.slice(0, index).concat(array.slice(index + 1))
21 |
22 | export const insertAt = (item, index = 0) => (array, next) =>
23 | array.slice(0, index).concat([item], array.slice(index))
24 | export const prepend = (item) => (array, next) => [item].concat(array)
25 | export const append = (item) => (array, next) => array.concat([item])
26 |
27 | export const inc = (num, next) => (num || 0) + 1
28 | export const dec = (num, next) => (num || 0) - 1
29 |
30 | export const toggle = (bool, next) => !bool
31 |
32 | export const each = (array, next) => array.map(next)
33 | export const all = (object, next) => {
34 | let clone = {}
35 | for (let key in object) clone[key] = next(object[key])
36 | return clone
37 | }
38 |
39 | export function apply(object, ...sequence) {
40 | if (sequence.length === 0) return object
41 | return coerce(sequence[0])(object, (obj) => apply(obj, ...sequence.slice(1)))
42 | }
43 |
44 | export function getAll(object, ...sequence) {
45 | let values = []
46 | apply(object, ...sequence, (value) => values.push(value))
47 | return values
48 | }
49 |
50 | export function get(object, ...sequence) {
51 | return getAll(object, ...sequence)[0]
52 | }
53 |
54 | function coerce(transform) {
55 | if (typeof transform === 'string') return safe_key(transform)
56 | if (typeof transform === 'function') return transform
57 | return (_) => transform
58 | }
59 |
--------------------------------------------------------------------------------
/src/cell/explain.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import ReactDOM from 'react-dom'
3 | import classList from 'classnames'
4 |
5 | export class ExplainVisualizer extends React.Component {
6 | static key = 'explain'
7 | static desc = 'Explain Visualizer'
8 | static icon =
9 |
10 | static test(result) {
11 | return result.columns[0] === 'QUERY PLAN'
12 | }
13 |
14 | render() {
15 | // EXPLAIN (ANALYZE, COSTS, VERBOSE, BUFFERS, FORMAT JSON) to
21 | use Postgres Explain Visualizer
22 |
23 | )
24 | }
25 | // console.log(result.values[0][0][0])
26 | return (
27 |
28 |
38 | {roots.map((k, i) => (
39 | -
40 |
42 | ))}
43 |
44 |
45 | )
46 | }
47 |
48 | function PlanNode({ plan }) {
49 | return (
50 |
51 |
52 |
53 | {plan['Node Type']}
54 |
55 |
56 | {plan['Actual Total Time']}
57 | s |
58 | 42
59 | %
60 |
61 |
62 |
63 |
64 | {plan.Plans ? (
65 |
66 | {plan.Plans.map((k, i) => (
67 | -
68 |
70 | ))}
71 |
72 | ) : null}
73 |
74 | )
75 | }
76 |
--------------------------------------------------------------------------------
/.circleci/config.yml:
--------------------------------------------------------------------------------
1 | version: 2.1
2 |
3 | jobs:
4 |
5 | build_macos:
6 | macos:
7 | xcode: "10.0.0"
8 | steps:
9 | - checkout
10 | - restore_cache:
11 | name: Restore Yarn Package Cache
12 | keys:
13 | - yarn-packages-{{ checksum "yarn.lock" }}
14 | - run:
15 | name: Install Dependencies
16 | command: yarn install --frozen-lockfile
17 | - save_cache:
18 | name: Save Yarn Package Cache
19 | key: yarn-packages-{{ checksum "yarn.lock" }}
20 | paths:
21 | - ~/.cache/yarn
22 | - run: security create-keychain -p $KEYCHAIN_PASSWORD build.keychain
23 | - run: security default-keychain -s build.keychain
24 | - run: security unlock-keychain -p $KEYCHAIN_PASSWORD build.keychain
25 | - run: echo $KEYSTORE | base64 --decode - > keystore.p12
26 | - run: security import keystore.p12 -k build.keychain -P $KEYCHAIN_PASSWORD -T /usr/bin/codesign
27 | - run: yarn electron-builder --publish always --mac
28 |
29 |
30 | build_windows:
31 | docker:
32 | - image: electronuserland/builder:wine
33 | steps:
34 | - checkout
35 | - restore_cache:
36 | name: Restore Yarn Package Cache
37 | keys:
38 | - yarn-packages-{{ checksum "yarn.lock" }}
39 | - run:
40 | name: Install Dependencies
41 | command: yarn install --frozen-lockfile
42 | - save_cache:
43 | name: Save Yarn Package Cache
44 | key: yarn-packages-{{ checksum "yarn.lock" }}
45 | paths:
46 | - ~/.cache/yarn
47 | - run: yarn electron-builder --publish always --win
48 |
49 | build_web:
50 | working_directory: ~/repo
51 |
52 | docker:
53 | - image: circleci/node:8
54 |
55 | steps:
56 | - checkout
57 | - restore_cache:
58 | name: Restore Yarn Package Cache
59 | keys:
60 | - yarn-packages-{{ checksum "yarn.lock" }}
61 | - run:
62 | name: Install Dependencies
63 | command: yarn install --frozen-lockfile
64 | - save_cache:
65 | name: Save Yarn Package Cache
66 | key: yarn-packages-{{ checksum "yarn.lock" }}
67 | paths:
68 | - ~/.cache/yarn
69 |
70 | - run:
71 | name: Build App
72 | command: yarn build
73 |
74 | workflows:
75 | build:
76 | jobs:
77 | - build_web
78 | - build_macos:
79 | filters:
80 | branches:
81 | only: master
82 | - build_windows:
83 | filters:
84 | branches:
85 | only: master
--------------------------------------------------------------------------------
/src/cell/explain.less:
--------------------------------------------------------------------------------
1 | .plan {
2 | ol,
3 | ul {
4 | list-style: none;
5 | }
6 | }
7 |
8 | .plan-node {
9 | text-decoration: none;
10 | color: #4d525a;
11 | display: inline-block;
12 | transition: all 0.1s;
13 | position: relative;
14 | padding: 6px 10px;
15 | background-color: #fff;
16 | font-size: 12px;
17 | border: 1px solid #dedede;
18 | margin-bottom: 4px;
19 | border-radius: 3px;
20 | overflow-wrap: break-word;
21 | word-wrap: break-word;
22 | word-break: break-all;
23 | width: 240px;
24 | box-shadow: 1px 1px 3px 0px rgba(0, 0, 0, 0.1);
25 | }
26 |
27 | .plan ul,
28 | .plan li {
29 | margin: 0;
30 | padding: 0;
31 | border: 0;
32 | font: inherit;
33 | font-size: 100%;
34 | vertical-align: baseline;
35 | }
36 |
37 | .plan ul li:only-child {
38 | padding-top: 0;
39 | }
40 |
41 | .plan ul {
42 | display: flex;
43 | padding-top: 12px;
44 | position: relative;
45 | margin: auto;
46 | transition: all 0.5s;
47 | margin-top: -5px;
48 | }
49 |
50 | .plan ul ul::before {
51 | content: '';
52 | position: absolute;
53 | top: 0;
54 | left: 50%;
55 | border-left: 2px solid #c4c4c4;
56 | height: 12px;
57 | width: 0;
58 | }
59 |
60 | .plan ul li {
61 | float: left;
62 | text-align: center;
63 | list-style-type: none;
64 | position: relative;
65 | padding: 12px 3px 0 3px;
66 | transition: all 0.5s;
67 | }
68 |
69 | .plan ul li:before,
70 | .plan ul li:after {
71 | content: '';
72 | position: absolute;
73 | top: 0;
74 | right: 50%;
75 | border-top: 2px solid #c4c4c4;
76 | width: 50%;
77 | height: 12px;
78 | }
79 |
80 | .plan-node header h4 {
81 | font-size: 13px;
82 | float: left;
83 | font-weight: 600;
84 | }
85 |
86 | .plan-node header .node-duration {
87 | float: right;
88 | margin-left: 10px;
89 | font-size: 13px;
90 | }
91 |
92 | .text-muted,
93 | .plan-stats .btn-close {
94 | color: #999ea7;
95 | }
96 |
97 | .plan ul li:after {
98 | right: auto;
99 | left: 50%;
100 | border-left: 2px solid #c4c4c4;
101 | }
102 |
103 | .plan ul li:first-child::before,
104 | .plan ul li:last-child::after {
105 | border: 0 none;
106 | }
107 |
108 | .plan ul li:last-child::before {
109 | border-right: 2px solid #c4c4c4;
110 | border-radius: 0 6px 0 0;
111 | }
112 |
113 | .plan ul li:first-child::after {
114 | border-radius: 6px 0 0 0;
115 | }
116 |
117 | .plan ul li:before,
118 | .plan ul li:after {
119 | content: '';
120 | position: absolute;
121 | top: 0;
122 | right: 50%;
123 | border-top: 2px solid #c4c4c4;
124 | width: 50%;
125 | height: 12px;
126 | }
127 |
--------------------------------------------------------------------------------
/src/bread.css:
--------------------------------------------------------------------------------
1 | .bread-row > * {
2 | display: flex;
3 | }
4 |
5 | .divider {
6 | box-sizing: border-box;
7 | height: 10px;
8 |
9 | cursor: vertical-text;
10 | padding: 2px 0;
11 |
12 | background-clip: padding-box !important;
13 | border: 3px solid transparent;
14 | border-left: 0;
15 | border-right: 0;
16 |
17 | margin: 0 19px;
18 |
19 | opacity: 0;
20 | transition: opacity 200ms ease-in;
21 | }
22 |
23 | .vertical-divider {
24 | width: 1px;
25 | padding: 0 2px;
26 |
27 | background: transparent;
28 | border: 7px solid transparent;
29 | background-clip: padding-box !important;
30 | border-bottom: 0;
31 | border-top: 0;
32 | flex-shrink: 0;
33 |
34 | opacity: 0;
35 | transition: opacity 200ms ease-in;
36 |
37 | cursor: text;
38 | }
39 |
40 | .vertical-divider::after {
41 | width: 1px;
42 | background: #d4d4d4;
43 | content: ' ';
44 | height: 100%;
45 | display: block;
46 | flex-shrink: 0;
47 | }
48 |
49 | .divider:hover,
50 | .vertical-divider:hover {
51 | opacity: 1;
52 | }
53 |
54 | .divider::after {
55 | height: 1px;
56 | background: #d4d4d4;
57 | content: ' ';
58 | width: 100%;
59 | display: block;
60 | }
61 |
62 | .bread-row.insert-top .divider.divider-top::after,
63 | .bread-row.insert-bottom .divider.divider-bottom::after,
64 | .bread-col.insert-left .vertical-divider.divider-left::after,
65 | .bread-col.insert-right .vertical-divider.divider-right::after {
66 | background: transparent;
67 | }
68 |
69 | .bread-col {
70 | flex-basis: 0;
71 | flex-grow: 1;
72 |
73 | /*border-right: 5px solid transparent;*/
74 | /*padding: 5px 5px 7px 5px;*/
75 | /*overflow: hidden;*/
76 | transition: border-color 200ms ease-in;
77 | display: flex;
78 |
79 | padding: 5px 0;
80 | }
81 |
82 | .bread-enter {
83 | /* 0 does not work so we have to use a small number */
84 | /* Start our small */
85 | flex: 0.00001;
86 | overflow: hidden;
87 |
88 | -webkit-animation: flexGrow 300ms ease forwards;
89 | -o-animation: flexGrow 300ms ease forwards;
90 | animation: flexGrow 300ms ease forwards;
91 | }
92 |
93 | .bread-exit {
94 | flex: 1;
95 | overflow: hidden;
96 |
97 | -webkit-animation: flexShrink 300ms ease forwards;
98 | -o-animation: flexShrink 300ms ease forwards;
99 | animation: flexShrink 300ms ease forwards;
100 | }
101 |
102 | .bread-exit > * {
103 | min-width: 200px;
104 | }
105 |
106 | @-webkit-keyframes flexGrow {
107 | to {
108 | flex: 1;
109 | }
110 | }
111 | @-o-keyframes flexGrow {
112 | to {
113 | flex: 1;
114 | }
115 | }
116 | @keyframes flexGrow {
117 | to {
118 | flex: 1;
119 | }
120 | }
121 |
122 | @-webkit-keyframes flexShrink {
123 | to {
124 | flex: 0.01;
125 | flex: 0.00001;
126 | }
127 | }
128 | @-o-keyframes flexShrink {
129 | to {
130 | flex: 0.01;
131 | flex: 0.00001;
132 | }
133 | }
134 | @keyframes flexShrink {
135 | to {
136 | flex: 0.01;
137 | flex: 0.00001;
138 | }
139 | }
140 |
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "franchise",
3 | "version": "1.1.0",
4 | "description": "a sql notebook",
5 | "private": true,
6 | "scripts": {
7 | "build": "nwb build-react-app src/index.js bundle --no-vendor",
8 | "clean": "nwb clean-app",
9 | "start": "nwb serve-react-app",
10 | "test": "nwb test-react",
11 | "test:coverage": "nwb test-react --coverage",
12 | "test:watch": "nwb test-react --server",
13 | "deploy": "gh-pages -d bundle",
14 | "pack": "electron-builder --dir",
15 | "dist": "yarn build && electron-builder",
16 | "build:electron:linux": "yarn build && electron-builder build --linux",
17 | "build:electron:mac": "yarn build && electron-builder build --mac",
18 | "build:electron:windows": "yarn build && electron-builder build --windows"
19 | },
20 | "dependencies": {
21 | "@blueprintjs/core": "^1.22.0",
22 | "@blueprintjs/labs": "~0.5.0",
23 | "@blueprintjs/table": "^1.19.0",
24 | "@skidding/react-codemirror": "^1.0.2",
25 | "breadloaf": "^1.3.9",
26 | "chart.js": "^2.8.0",
27 | "classnames": "^2.2.6",
28 | "codemirror": "^5.48.0",
29 | "codemirror-graphql": "^0.6.11",
30 | "css-loader": "^3.0.0",
31 | "d3-shape": "^1.2.0",
32 | "electron-notarize": "^0.1.1",
33 | "font-awesome": "^4.7.0",
34 | "franchise-client": "^0.2.7",
35 | "graphql": "^14.3.1",
36 | "graphql-request": "^1.4.0",
37 | "leaflet": "^1.4.0",
38 | "lodash": "^4.17.13",
39 | "normalize.css": "^5.0.0",
40 | "rc-tabs": "^7.1.1",
41 | "react": "^16.8.6",
42 | "react-collapse": "^4.0.2",
43 | "react-dom": "^16.8.6",
44 | "react-error-boundary": "^1.2.5",
45 | "react-json-view": "^1.19.1",
46 | "react-leaflet": "^2.4.0",
47 | "react-motion": "^0.5.0",
48 | "sql.js": "^0.4.0",
49 | "sqlgenerate": "https://github.com/jdrew1303/sqlgenerate",
50 | "sqlite-parser": "^1.0.1",
51 | "sweetalert2": "^8.13.0",
52 | "tmp": "^0.0.33",
53 | "tsparser": "^1.0.2",
54 | "whatwg-fetch": "^3.0.0",
55 | "ws": "^7.0.1",
56 | "xlsx": "^0.14.3"
57 | },
58 | "devDependencies": {
59 | "babel": "^6.23.0",
60 | "babel-preset-env": "^1.6.0",
61 | "electron": "^4.0.5",
62 | "electron-builder": "^21.1.1",
63 | "file-loader": "^0.11.2",
64 | "gh-pages": "^1.0.0",
65 | "husky": "^2.5.0",
66 | "lint-staged": "^8.2.1",
67 | "nwb": "^0.18.10",
68 | "nwb-less": "^0.5.1",
69 | "prettier": "^1.18.2",
70 | "raw-loader": "^0.5.1",
71 | "stats-webpack-plugin": "^0.6.1",
72 | "uglify-loader": "^2.0.0",
73 | "url-loader": "^0.5.9",
74 | "worker-loader": "^0.8.1"
75 | },
76 | "build": {
77 | "appId": "com.eponymous.franchise",
78 | "productName": "Franchise",
79 | "copyright": "Copyright © Eponymous Labs, Inc. 2017-2019",
80 | "afterSign": "./build/notarize.js",
81 | "mac": {
82 | "category": "public.app-category.developer-tools",
83 | "hardenedRuntime": true
84 | }
85 | },
86 | "husky": {
87 | "hooks": {
88 | "pre-commit": "lint-staged"
89 | }
90 | },
91 | "lint-staged": {
92 | "*.{tsx,ts,js,jsx,json,css,less}": ["prettier --write", "git add"],
93 | ".{prettierrc,babelrc}": ["prettier --write", "git add"]
94 | },
95 | "author": "Eponymous Labs, Inc.",
96 | "repository": "git@github.com:HVF/franchise.git",
97 | "main": "electron.js"
98 | }
99 |
--------------------------------------------------------------------------------
/src/app.js:
--------------------------------------------------------------------------------
1 | import _ from 'lodash'
2 | import React from 'react'
3 |
4 | import * as State from './state'
5 | import * as U from './state/update'
6 |
7 | import './app.less'
8 |
9 | import Configure from './db/configure'
10 | import Notebook from './notebook'
11 | import DeltaPane from './delta'
12 | import ExportButton from './state/export'
13 | import HelpPage from './db/help'
14 |
15 | export default class App extends React.PureComponent {
16 | componentWillMount() {
17 | document.getElementById('loader').style.display = 'none'
18 | }
19 | render() {
20 | let { state } = this.props
21 | let empty =
22 | state.notebook.layout.length == 0 &&
23 | // && state.trash.cells.length == 0
24 | state.connect.status != 'connected'
25 | return (
26 |
27 |
28 |
2 |
3 | 
4 |
5 |
6 |
7 | # Franchise
8 | *a sql notebook*
9 |
10 |
11 | Franchise is a lightweight but powerful SQL tool with a notebook interface. You can use it online at [franchise.cloud](https://franchise.cloud).
12 |
13 | [](https://franchise.cloud)
14 |
15 | - There's no **sign up** and **no install**
16 | - For editing CSVs, JSON, XLSX files, we've integrated [js-xlsx](https://github.com/SheetJS/js-xlsx), and [sql.js](https://github.com/kripken/sql.js/) so you can query data entirely locally in your browser
17 | - For connecting to **PostgreSQL**, **MySQL**, or **BigQuery**, just run a single command in your terminal to open a bridge that allows Franchise to directly connect to your database. Your data never touches a third party server.
18 | - Chart with a single click
19 | - Compare queries side by side
20 | - With our [unique notebook layout engine](https://github.com/antimatter15/breadloaf), you can drag and drop cells on the same line to compare views.
21 |
22 | # Running Locally (Development Mode)
23 | There's an online version of franchise [right here](https://franchise.cloud). There are also instructions for building franchise to static files [here](https://github.com/HVF/franchise/blob/master/DEPLOYING_LOCALLY.md).
24 |
25 | Otherwise, here's how to run franchise in development mode:
26 |
27 | 0. **If you don't have `npm` or `yarn`, install** [yarn](https://yarnpkg.com/en/docs/install).
28 |
29 | 1. **Open up a terminal and run**
30 |
31 | ```bash
32 | git clone --depth 1 https://github.com/HVF/franchise.git
33 | ```
34 |
35 | 2. **cd into the project directory**
36 | ```bash
37 | cd franchise
38 | ```
39 |
40 | 3. **Install the project dependencies**
41 | ```bash
42 | yarn install
43 | ```
44 |
45 | (you can also run `npm install`)
46 |
47 | 4. **Start the dev server**
48 | ```bash
49 | yarn start
50 | ```
51 |
52 | (you can also run `npm start`)
53 |
54 | 5. **Open up a browser and go to** `http://localhost:3000`
55 |
56 | 6. **Edit some files in `franchise/src`.**
57 |
58 | When you save your edits, and the browser will automatically reload.
59 |
60 | 7. (optional) **Add a bunch of great functionality and send a PR!**
61 |
62 | ---
63 |
64 | # Running in Docker 🐳
65 |
66 | Application will be available here: [http://localhost:3000](http://localhost:3000)
67 |
68 | ## Using Docker Hub image
69 |
70 | ```bash
71 | docker run \
72 | --name franchise \
73 | -p 3000:80 \
74 | -p 14645:14645 \
75 | -d binakot/franchise
76 | ```
77 |
78 | ## Build your own image
79 |
80 | 0. Build a docker image:
81 |
82 | ```bash
83 | docker build -t franchise .
84 | ```
85 |
86 | 1. Run a container with image:
87 |
88 | ```bash
89 | docker run \
90 | --name franchise \
91 | -p 3000:80 \
92 | -p 14645:14645 \
93 | -d franchise
94 | ```
95 |
96 | ---
97 |
98 | # Build electron app
99 |
100 | Linux:
101 |
102 | ```bash
103 | yarn build:electron:linux
104 | ```
105 |
106 | macOS:
107 |
108 | ```bash
109 | yarn build:electron:mac
110 | ```
111 |
112 | Windows:
113 |
114 | ```bash
115 | yarn build:electron:windows
116 | ```
117 |
118 | After build check out `dist` folder.
119 |
--------------------------------------------------------------------------------
/src/db/configure.less:
--------------------------------------------------------------------------------
1 | .configure-wrap {
2 | margin: 0 auto;
3 | margin-bottom: 5px;
4 | position: relative;
5 | }
6 |
7 | .configure {
8 | background: white;
9 |
10 | box-shadow: 0px 2px 7px rgba(0, 0, 0, 0.1);
11 |
12 | border-radius: 4px;
13 | overflow: hidden;
14 |
15 | -webkit-app-region: no-drag;
16 |
17 | h1 {
18 | font-weight: 100;
19 | padding: 24px;
20 | }
21 |
22 | .rc-tabs-left {
23 | border-right: 0;
24 | overflow-y: hidden;
25 | padding: 10px 0;
26 | }
27 |
28 | .rc-tabs-content .rc-tabs-tabpane {
29 | overflow: auto;
30 | padding: 20px;
31 | }
32 |
33 | .rc-tabs-left .rc-tabs-tab {
34 | padding: 12px 24px;
35 | }
36 |
37 | .banner {
38 | padding: 20px;
39 | color: white;
40 | display: flex;
41 | // margin-bottom: 20px;
42 |
43 | transition: background 0.4s linear;
44 |
45 | &.connected {
46 | background: #609860;
47 | }
48 | &.unconfigured {
49 | background: #656565;
50 | }
51 | &.connecting {
52 | background: #106ba3;
53 | }
54 | &.disconnected {
55 | background: #9c0000;
56 | }
57 |
58 | &.can-toggle {
59 | cursor: pointer;
60 | }
61 |
62 | .body {
63 | flex: 1;
64 | }
65 | .toggle {
66 | user-select: none;
67 | cursor: pointer;
68 | }
69 | }
70 | }
71 |
72 | .configure > .ReactCollapse--collapse > .ReactCollapse--content {
73 | border: 1px solid #d8d8d8;
74 | border-top: none;
75 | border-bottom-left-radius: 4px;
76 | border-bottom-right-radius: 4px;
77 | }
78 |
79 | .open-thumb {
80 | border: 1px solid #d8d8d8;
81 | border-radius: 5px;
82 | margin-right: 10px;
83 | padding: 10px 15px;
84 | display: inline-block;
85 | user-select: none;
86 | cursor: pointer;
87 | transition: all 0.1s linear;
88 | }
89 |
90 | .sample-thumb {
91 | border: 1px solid #d8d8d8;
92 | border-radius: 5px;
93 | margin-right: 10px;
94 | margin-top: 5px;
95 | margin-bottom: 5px;
96 | width: 140px;
97 | height: 100px;
98 | display: inline-block;
99 | position: relative;
100 | overflow: hidden;
101 | background-size: cover;
102 | user-select: none;
103 | cursor: pointer;
104 | transition: all 0.1s linear;
105 | }
106 |
107 | @media (max-width: 700px) {
108 | .configure .rc-tabs-bar {
109 | display: none;
110 | }
111 | }
112 |
113 | .open-thumb:hover,
114 | .sample-thumb:hover {
115 | box-shadow: 0 3px 10px rgba(0, 0, 0, 0.2);
116 | transform: scale(1.05);
117 | }
118 |
119 | .sample-thumb .title {
120 | background: rgba(0, 0, 0, 0.5);
121 | color: white;
122 | padding: 5px 10px;
123 | position: absolute;
124 | bottom: 0;
125 | left: 0;
126 | right: 0;
127 | }
128 |
129 | // this is a hack that fixes a visual glitch on the file upload button
130 | .pt-file-upload-input::after {
131 | box-shadow: inset 0 0 0 1px rgba(16, 22, 26, 0.2), inset 0 -1px 0 rgba(16, 22, 26, 0.1);
132 | }
133 |
134 | .pg-form {
135 | .pt-control-group {
136 | margin-bottom: 10px;
137 | }
138 | .ReactCollapse--content {
139 | padding: 10px 0;
140 | }
141 | .pt-button {
142 | margin-top: 10px;
143 | }
144 | }
145 |
--------------------------------------------------------------------------------
/src/state/export_template.html:
--------------------------------------------------------------------------------
1 |
2 | Franchise Notebook {{notebook_name}}
3 |
18 |
82 | Loading Franchise...
83 |
85 | State.apply('connect', 'active', U.replace(key))}
90 | renderTabBar={() =>
99 | {c}
100 |
101 | )
102 |
103 | return (
104 |
108 | {c.name}{' '}
109 |
110 |
111 | ) : (
112 | c.name
113 | )
114 | }
115 | key={c.key}
116 | disabled={connectable && c !== db}
117 | >
118 | {c.Configure ? (
119 |
127 | )
128 | })}
129 |
130 |
131 |
132 | )
133 | }
134 | }
135 |
136 | export function DB(key) {
137 | return Databases.find((k) => k.key === key)
138 | }
139 |
140 | export function getDB() {
141 | return DB(State.get('connect', 'active'))
142 | }
143 |
--------------------------------------------------------------------------------
/src/state/export.js:
--------------------------------------------------------------------------------
1 | import _ from 'lodash'
2 | import React from 'react'
3 | import * as State from '../state'
4 | import * as U from '../state/update'
5 | import swal from 'sweetalert2'
6 |
7 | import { Tooltip, Position, Popover, Menu, MenuItem } from '@blueprintjs/core'
8 | import { getDB } from '../db/configure'
9 |
10 | export default function ExportButton() {
11 | return (
12 |
13 |
14 |
21 |
25 |
35 |
36 |
37 | )
38 | }
39 |
40 | function dumpCell(cell) {
41 | let dump = {
42 | query: cell.query,
43 | id: cell.id,
44 | error: cell.error && cell.error + '',
45 | suggestedName: cell.suggestedName,
46 | loading: false,
47 | markdown: cell.markdown,
48 | selected: cell.selected,
49 | }
50 | if (cell.result) {
51 | dump.result = {
52 | nameable: cell.result.nameable,
53 | columns: cell.result.columns,
54 | values: (cell.result.values || []).slice(0, 200),
55 | }
56 | }
57 | return dump
58 | }
59 |
60 | async function dumpApplicationState(withCredentials, includeDump) {
61 | let data = State.get()
62 | let dump = {
63 | state: {
64 | ...data,
65 | connect: {
66 | active: data.connect.active,
67 | status: 'unconfigured',
68 | },
69 | config: withCredentials ? data.config : {},
70 | notebook: {
71 | ...data.notebook,
72 | layout: data.notebook.layout.map((k) => ({
73 | ...k,
74 | items: k.items.map(dumpCell),
75 | })),
76 | },
77 | trash: {
78 | ...data.trash,
79 | cells: data.trash.cells.map(dumpCell),
80 | },
81 | },
82 | autoconnect: withCredentials && data.connect.status === 'connected',
83 | version: 2,
84 | }
85 |
86 | if (withCredentials && includeDump && getDB().exportData) {
87 | let db_data = await getDB().exportData()
88 | dump.databaseDump = db_data
89 | console.log(db_data)
90 | }
91 |
92 | return dump
93 | }
94 |
95 | function isEmpty(state) {
96 | if (state.connect.status === 'connected') return false
97 | if (state.notebook.layout.length === 0) return true
98 | if (state.notebook.layout.some((k) => k.items.some((f) => (f.query || '').trim() != '')))
99 | return false
100 | return true
101 | }
102 |
103 | let lastStateDump
104 | async function updateAutosave() {
105 | let nextState = State.get()
106 | if (lastStateDump === nextState) return
107 | lastStateDump = nextState
108 |
109 | if (isEmpty(nextState)) {
110 | delete localStorage.autosave
111 | delete sessionStorage.autosave
112 | } else {
113 | let dumpStr = JSON.stringify(await dumpApplicationState(true, true))
114 | localStorage.autosave = dumpStr
115 | sessionStorage.autosave = dumpStr
116 | }
117 | localStorage.credentials = JSON.stringify(State.get('config', 'credentials'))
118 | localStorage.activeConnector = State.get('connect', 'active')
119 | }
120 |
121 | async function makeURL(withCredentials, title) {
122 | let data = await dumpApplicationState(withCredentials, true)
123 |
124 | var bin_data = JSON.stringify(JSON.stringify(data))
125 | var basename = location.protocol + '//' + location.host + location.pathname
126 | return URL.createObjectURL(
127 | new Blob([
128 | require('raw-loader!./export_template.html')
129 | .replace('{{notebook_name}}', title)
130 | .replace('{{bin_data}}', bin_data)
131 | .replace(
132 | '{{notebook_contents}}',
133 | State.getAll('notebook', 'layout', U.each, 'items', U.each, 'query')
134 | .join('\n\n========================================================n\n')
135 | .replace(/<\/script/g, 'script')
136 | ),
137 | ])
138 | )
139 | }
140 |
141 | async function downloadNotebook(withCredentials) {
142 | let extension = 'html'
143 | let default_name =
144 | new Date().toISOString().slice(0, 10) + (withCredentials ? '-Credentialed' : '')
145 |
146 | const a = document.createElement('a')
147 | a.style.position = 'absolute'
148 | a.style.top = '-10000px'
149 | a.style.left = '-10000px'
150 |
151 | document.body.appendChild(a)
152 |
153 | const prompt = await swal.fire({
154 | input: 'text',
155 | showCancelButton: true,
156 | title: 'Export Notebook' + (withCredentials ? ' (with credentials)' : ''),
157 | inputPlaceholder: default_name,
158 | })
159 | if (!prompt.dismiss) {
160 | let title = prompt.value || default_name
161 | a.setAttribute('download', title.match(/.+\..+/) ? title : title + '.' + extension)
162 | a.setAttribute('href', await makeURL(withCredentials, title))
163 | a.click()
164 |
165 | requestAnimationFrame((e) => a.remove())
166 | }
167 | }
168 |
169 | const AUTOSAVE_INTERVAL = 2718
170 | let autosaveInterval = setInterval(updateAutosave, AUTOSAVE_INTERVAL)
171 | if (module.hot) {
172 | module.hot.dispose(function() {
173 | clearInterval(autosaveInterval)
174 | })
175 | }
176 |
--------------------------------------------------------------------------------
/src/db/bridge.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import _ from 'lodash'
3 |
4 | import { getDB } from './configure'
5 | import { addCell, isEmpty, addTrash } from '../notebook'
6 |
7 | import * as State from '../state'
8 | import * as U from '../state/update'
9 |
10 | import { UnmountClosed } from 'react-collapse'
11 |
12 | const RETRY_INTERVAL = 1000
13 | const BRIDGE_URL = 'ws://localhost:14645'
14 |
15 | let clientConnectorSocket = null
16 | let checkConnectorInterval
17 |
18 | var replyQueue = []
19 | var rejectQueue = []
20 | var connectQueue = []
21 | var messageCounter = 0
22 | var bridgeAlive = true
23 |
24 | function tryOpenBridge() {
25 | try {
26 | clientConnectorSocket = new WebSocket(BRIDGE_URL)
27 | } catch (err) {
28 | State.apply('connect', 'bridge_status', U.replace('mixed_fail'))
29 | }
30 |
31 | if (!clientConnectorSocket) return
32 |
33 | clientConnectorSocket.onopen = (e) => {
34 | // console.log('socket opened')
35 | if (getDB().requires_bridge) {
36 | State.apply('connect', 'bridge_status', U.replace('connected'))
37 | getDB().bridgeConnected(clientConnectorSocket)
38 |
39 | while (connectQueue.length > 0) {
40 | let callback = connectQueue.shift()
41 | try {
42 | callback()
43 | } catch (err) {
44 | console.error(err)
45 | }
46 | }
47 | }
48 | }
49 |
50 | clientConnectorSocket.onmessage = (e) => {
51 | // console.log('got message', e.data)
52 | const data = JSON.parse(e.data)
53 | if (data.error) {
54 | if (data.id in rejectQueue) {
55 | rejectQueue[data.id](new Error(data.error))
56 | } else {
57 | console.error(new Error(data.error))
58 | }
59 | } else {
60 | if (data.id in replyQueue) {
61 | replyQueue[data.id](data)
62 | } else {
63 | console.log('Missing response handler: ', data)
64 | }
65 | }
66 | }
67 |
68 | clientConnectorSocket.onclose = (e) => {
69 | rejectQueue = []
70 | replyQueue = []
71 | messageCounter = 0
72 |
73 | // console.log('socket closed')
74 | if (getDB().requires_bridge) {
75 | if (State.get('connect', 'bridge_status') != 'disconnected') {
76 | State.apply('connect', 'bridge_status', U.replace('disconnected'))
77 | }
78 |
79 | getDB().bridgeDisconnected(clientConnectorSocket)
80 | setTimeout(() => {
81 | if (getDB().requires_bridge && bridgeAlive) {
82 | tryOpenBridge()
83 | } else {
84 | clientConnectorSocket = null
85 | }
86 | }, RETRY_INTERVAL)
87 | }
88 | }
89 | }
90 |
91 | export function disconnectBridge() {
92 | if (clientConnectorSocket) {
93 | clientConnectorSocket.close()
94 | }
95 | }
96 |
97 | export function FranchiseClientConnector({ connect }) {
98 | if (connect.bridge_status == 'mixed_fail') {
99 | return (
100 |
101 |
102 | Browser Compatibility
103 |
104 | The Franchise web interface connects to a local bridge application to
105 | mediate connections to external databases.
106 |
107 |
108 | Unfortunately, your browser does not support connections between
109 | secure HTTPS websites and desktop applications.
110 |
111 |
112 | We're actively looking into workarounds, but in the mean time, try using{' '}
113 | Google Chrome.
114 |
115 |
116 |
117 | )
118 | }
119 |
120 | return (
121 |
122 |
123 | Connect the Database Bridge
124 |
125 |
126 | Run npx franchise-client@0.3.0 in your terminal to start the
127 | franchise database bridge.
128 |
129 |
130 | If the npx command is not found,{' '}
131 |
132 | install the latest version of node
133 | {' '}
134 | and try again.
135 |
136 |
137 |
138 | These instructions will automatically collapse as soon as the bridge is
139 | detected.
140 |
141 |
142 |
143 | )
144 | }
145 |
146 | export async function sendRequest(packet) {
147 | if (isElectron()) {
148 | return await runElectronQueryCore(packet)
149 | } else {
150 | await blockUntilBridgeSocketReady()
151 | return await sendRequestSocketCore(packet)
152 | }
153 | }
154 |
155 | function sendRequestSocketCore(packet) {
156 | return new Promise((resolve, reject) => {
157 | packet.id = ++messageCounter
158 | replyQueue[packet.id] = resolve
159 | rejectQueue[packet.id] = reject
160 | clientConnectorSocket.send(JSON.stringify(packet))
161 | })
162 | }
163 |
164 | async function blockUntilBridgeSocketReady() {
165 | let isBridgeReady = clientConnectorSocket && clientConnectorSocket.readyState === 1
166 | if (!isBridgeReady) {
167 | // TODO: have some sort of timeout
168 | await new Promise((accept, reject) => connectQueue.push(accept))
169 | }
170 | }
171 |
172 | function isElectron() {
173 | return (
174 | (typeof window !== 'undefined' && window.process && window.process.type === 'renderer') ||
175 | (typeof process !== 'undefined' && process.versions && !!process.versions.electron)
176 | )
177 | }
178 |
179 | // stuff that runs
180 |
181 | if (isElectron()) {
182 | var runElectronQueryCore = window.require('franchise-client')
183 | setTimeout(function() {
184 | State.apply('connect', 'bridge_status', U.replace('connected'))
185 | }, 100)
186 | } else {
187 | checkConnectorInterval = setInterval(function() {
188 | if (!clientConnectorSocket && getDB().requires_bridge) {
189 | tryOpenBridge()
190 | }
191 | }, 100)
192 | }
193 |
194 | if (module.hot) {
195 | module.hot.dispose(function() {
196 | bridgeAlive = false
197 | clearInterval(checkConnectorInterval)
198 | disconnectBridge()
199 | })
200 | }
201 |
--------------------------------------------------------------------------------
/src/app.less:
--------------------------------------------------------------------------------
1 | @import '~normalize.css/normalize.css';
2 | @import '~@blueprintjs/core/dist/blueprint.css';
3 | @import '~@blueprintjs/table/dist/table.css';
4 | @import '~@blueprintjs/labs/dist/blueprint-labs.css';
5 |
6 | @import '~rc-tabs/assets/index.css';
7 | @import '~sweetalert2/dist/sweetalert2.css';
8 |
9 | @import '~codemirror/lib/codemirror.css';
10 | // @import '~codemirror/theme/eclipse.css';
11 | @import './cell/hipster.less';
12 |
13 | @import './bread.css';
14 | @import '~font-awesome/css/font-awesome.css';
15 | @import './cell/cell.less';
16 | @import './db/configure.less';
17 | @import './cell/visualizer.less';
18 |
19 | html,
20 | body {
21 | height: 100%;
22 | }
23 |
24 | body {
25 | // background: #ededf3;
26 | background: hsla(0, 0%, 97%, 1);
27 | -webkit-app-region: drag;
28 | }
29 |
30 | .header {
31 | overflow: auto;
32 |
33 | h1 {
34 | font-weight: 100;
35 | padding: 0;
36 | display: inline;
37 | color: #151515;
38 | }
39 | a:hover {
40 | text-decoration: none;
41 | }
42 | .slogan {
43 | // color: gray;
44 | color: #8c8c8c;
45 | font-weight: 200;
46 | margin-left: 10px;
47 | user-select: none;
48 | cursor: default;
49 | }
50 | // margin: 30px 0;
51 | margin-left: auto;
52 | margin-right: auto;
53 | }
54 |
55 | .header-wrap {
56 | padding: 35px 0;
57 | }
58 |
59 | .export-btn {
60 | float: right;
61 | background: #b9b9b9;
62 | border: none;
63 | padding: 9px 17px;
64 | color: white;
65 | border-radius: 5px;
66 | margin: 0;
67 | cursor: pointer;
68 |
69 | i {
70 | margin-right: 7px;
71 | }
72 | }
73 |
74 | .export-btn:hover {
75 | background: #aaa;
76 | }
77 |
78 | .bread-row.insert-top .divider.divider-top,
79 | .bread-row.insert-bottom .divider.divider-bottom,
80 | .bread-col.insert-left .vertical-divider.divider-left,
81 | .bread-col.insert-right .vertical-divider.divider-right {
82 | background: #7786dc;
83 | opacity: 1;
84 | }
85 |
86 | .fake-slice {
87 | border: 2px dashed #d8d8d8;
88 | border-radius: 4px;
89 | min-height: 30px;
90 | padding-bottom: 20px;
91 | text-align: center;
92 | font-size: 100px;
93 | color: #d8d8d8;
94 | -webkit-user-select: none;
95 | cursor: pointer;
96 | flex-grow: 1;
97 | transition: all 200ms ease-in;
98 | margin: 0 18px;
99 | overflow: hidden;
100 | }
101 |
102 | .fake-slice:hover {
103 | border: 2px dashed gray;
104 | color: gray;
105 | }
106 |
107 | .archived-slice {
108 | .bread-col {
109 | padding: 10px 17px;
110 | }
111 | }
112 |
113 | .toggler {
114 | margin: 0px 20px;
115 | margin-top: 20px;
116 | margin-bottom: 5px;
117 |
118 | -moz-user-select: none;
119 | -webkit-user-select: none;
120 | cursor: default;
121 | }
122 |
123 | .bottom-spacer {
124 | height: 100px;
125 | }
126 |
127 | .pt-tooltip {
128 | box-shadow: none;
129 | }
130 |
131 | .write-queue {
132 | position: fixed;
133 | bottom: 0;
134 | left: 0;
135 | right: 0;
136 | background: #fbf2e9;
137 |
138 | color: #dd9044;
139 | z-index: 10;
140 | border-top: 1px solid #e9b684;
141 |
142 | .toggle-delta {
143 | user-select: none;
144 | padding: 15px 20px;
145 | cursor: pointer;
146 | }
147 | }
148 |
149 | .changes button {
150 | background: none;
151 | border: none;
152 | color: #a50000;
153 | padding-right: 10px;
154 | cursor: pointer;
155 | }
156 |
157 | .collapse {
158 | overflow: auto;
159 | padding: 15px 20px;
160 | padding-bottom: 0;
161 |
162 | .changes {
163 | margin: 10px 0;
164 | font-family: monospace;
165 | background: #fff;
166 | border-radius: 3px;
167 | border: 1px solid #ddd;
168 | padding: 10px;
169 |
170 | .change {
171 | margin-left: 20px;
172 | }
173 | }
174 | }
175 |
176 | .clippy-wrap {
177 | margin: 20px auto;
178 | padding: 0 18px;
179 |
180 | .clippy {
181 | // background: rgba(255,255,255,.3);
182 | // padding: 20px;
183 | border-radius: 3px;
184 | opacity: 0.8;
185 | h2 {
186 | font-size: inherit;
187 | }
188 | // h2 {
189 | // margin-top: 40px;
190 | // &:first-of-type {
191 | // margin-top: 0;
192 | // }
193 | // }
194 |
195 | pre {
196 | word-wrap: break-word;
197 | white-space: pre-wrap;
198 | }
199 |
200 | column-count: 2;
201 | column-width: 300px;
202 | }
203 |
204 | .clippy-contents {
205 | }
206 | }
207 |
208 | .clippy section {
209 | -webkit-column-break-inside: avoid;
210 | overflow: auto;
211 | }
212 |
213 | .first-page {
214 | min-height: 100vh;
215 | }
216 |
217 | .help-page {
218 | background: white;
219 | margin-top: -5px;
220 | border-top: 1px solid #d7d8da;
221 | }
222 |
223 | .help-content {
224 | padding: 20px 0;
225 | }
226 |
227 | .help-tab {
228 | padding: 10px 20px;
229 | background: white;
230 | width: 200px;
231 | width: fit-content;
232 |
233 | text-align: center;
234 | margin-left: auto;
235 | margin-right: auto;
236 | position: relative;
237 | border: 1px solid #d7d8da;
238 | top: -40px;
239 | height: 40px;
240 | border-top-right-radius: 10px;
241 | border-top-left-radius: 10px;
242 | color: #4e4e4e;
243 | border-bottom: none;
244 |
245 | user-select: none;
246 | -webkit-user-select: none;
247 | -moz-user-select: none;
248 |
249 | cursor: pointer;
250 |
251 | .pt-icon-help {
252 | color: #aaa;
253 | margin-right: 7px;
254 | }
255 | }
256 |
257 | .configure {
258 | margin: 0 18px;
259 | }
260 |
261 | .header {
262 | padding: 0 18px;
263 | }
264 |
265 | @media (max-width: 700px) {
266 | .bread-row > div {
267 | display: block;
268 | }
269 |
270 | .vertical-divider {
271 | display: none;
272 | }
273 |
274 | .header-wrap {
275 | padding: 25px 0;
276 | }
277 |
278 | .header h1 {
279 | font-size: 30px;
280 | }
281 |
282 | .slogan {
283 | display: none;
284 | }
285 |
286 | .bread-row .bread-col,
287 | .fake-slice,
288 | .configure {
289 | margin: 0 10px;
290 | }
291 | .clippy-wrap,
292 | .header {
293 | padding: 0 10px;
294 | }
295 | }
296 |
297 | @media (min-width: 800px) {
298 | .row-1,
299 | .configure-wrap,
300 | .clippy-wrap,
301 | .header {
302 | max-width: 90vw;
303 | margin-left: auto;
304 | margin-right: auto;
305 | }
306 | }
307 |
308 | @media (min-width: 1000px) {
309 | .row-1,
310 | .configure-wrap,
311 | .clippy-wrap,
312 | .header {
313 | max-width: 70vw;
314 | margin-left: auto;
315 | margin-right: auto;
316 | }
317 | }
318 |
--------------------------------------------------------------------------------
/src/delta.js:
--------------------------------------------------------------------------------
1 | import _ from 'lodash'
2 | import React from 'react'
3 |
4 | import { addTrash } from './notebook'
5 | import { runCell } from './cell'
6 |
7 | import * as State from './state'
8 | import * as U from './state/update'
9 |
10 | import { DB, getDB } from './db/configure'
11 | import { UnmountClosed } from 'react-collapse'
12 |
13 | export default function DeltaPane({ deltas, connect }) {
14 | if (deltas.changes.length === 0) return null
15 | if (connect.status !== 'connected') return null
16 |
17 | return (
18 |
19 |
20 |
22 |
23 | {deltas.loading ? (
24 |
25 |
26 | {' '}
27 |
28 | Applying changes...
29 |
30 | ) : (
31 | State.apply('deltas', 'open', U.toggle)}
34 | >
35 | {deltas.open ? (
36 |
37 | ▲ Collapse Pending Changes ({deltas.changes.length})
38 |
39 | ) : (
40 |
41 | ▶ Review Pending Changes ({deltas.changes.length})
42 |
43 | )}
44 |
45 | )}
46 |
47 | )
48 | }
49 |
50 | function DeltaReview({ deltas }) {
51 | return (
52 |
53 |
64 |
65 |
66 | {deltas.error ? {deltas.error} : null}
67 |
68 | {_.map(
69 | _.groupBy(
70 | deltas.changes.map((k, i) => ({ ...k, index: i })),
71 | (k) => k.tableName
72 | ),
73 | (changes, table) => (
74 |
75 | {table}
76 | {_.map(
77 | _.groupBy(changes, (k) => k.rowPredicate),
78 | (changes, rowPredicate) => (
79 |
80 |
81 | UPDATE "{table}" SET{' '}
82 |
83 | {_.sortBy(changes, 'column').map((change, i) => (
84 |
85 |
107 | "{change.column}" = '{change.newValue}'
108 | {i < changes.length - 1 ? (
109 | ,
110 | ) : null}
111 |
112 | ))}
113 |
114 | {'\n'}
115 | WHERE {rowPredicate};
116 |
117 |
118 | )
119 | )}
120 |
121 | )
122 | )}
123 |
124 |
125 | )
126 | }
127 |
128 | export async function applyDeltas() {
129 | State.apply('deltas', U.merge({ error: null, open: false, loading: true }))
130 |
131 | let affectedTables = _.uniq(State.get('deltas', 'changes').map((k) => k.tableName))
132 | let affectedCells = State.getAll(
133 | 'notebook',
134 | 'layout',
135 | U.each,
136 | 'items',
137 | U.match((k) => k.result && affectedTables.includes(k.result.tableName)),
138 | 'id'
139 | )
140 |
141 | let db = getDB()
142 | let query = db.assembleDeltaQuery(State.get('deltas'), { useLegacySql: false })
143 | try {
144 | await db.run(query)
145 | } catch (err) {
146 | State.apply('deltas', U.merge({ error: err.message, open: true, loading: false }))
147 | return
148 | }
149 |
150 | await State.batch(async () => {
151 | State.apply('deltas', U.merge({ changes: [], loading: false }))
152 | addTrash({ query: query })
153 | await Promise.all(affectedCells.map((cellId) => runCell(cellId)))
154 | })
155 | }
156 |
--------------------------------------------------------------------------------
/src/db/graphql/index.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import _ from 'lodash'
3 | import { GraphQLClient } from 'graphql-request'
4 | import * as graphql from 'graphql'
5 |
6 | import * as State from '../../state'
7 | import * as U from '../../state/update'
8 |
9 | import { connectHelper, disconnectDB } from '../generic'
10 | export { disconnectDB, getStagingValue } from '../generic'
11 | import { GraphQLDocs } from './graphql-docs'
12 |
13 | import CodeMirror from 'codemirror'
14 | import 'codemirror/addon/lint/lint'
15 | import 'codemirror-graphql/hint'
16 | import 'codemirror-graphql/lint'
17 | import 'codemirror-graphql/mode'
18 |
19 | export const key = 'graphql'
20 | export const name = 'GraphQL'
21 | export const syntax = 'graphql'
22 |
23 | export class Configure extends React.Component {
24 | render() {
25 | const { connect, config } = this.props
26 |
27 | const credentialHints = {
28 | endpoint: 'endpoint address',
29 | token: 'authorization token (optional)',
30 | }
31 |
32 | let credentials = (config.credentials && config.credentials.graphql) || {}
33 |
34 | const Field = (type, icon, className = '') => (
35 |
36 | {icon ? : null}
37 |
43 | State.apply(
44 | 'config',
45 | 'graphql',
46 | 'credentials',
47 | type,
48 | U.replace(e.target.value)
49 | )
50 | }
51 | placeholder={credentialHints[type]}
52 | />
53 |
54 | )
55 |
56 | return (
57 |
58 | })
59 | {Field('endpoint', 'globe')}
60 | {Field('token', 'lock')}
61 |
62 | {connect.status != 'connected' ? (
63 | connect.status == 'connecting' ? (
64 |
73 | ) : (
74 |
82 | )
83 | ) : (
84 |
92 | )}
93 |
94 | {connect.status != 'connected' && (
95 |
96 | Or connect to a sample endpoint{' '}
97 | connectEndpoint('https://graphql-pokemon.now.sh/')}
100 | >
101 | Pokemon Example
102 |
103 |
104 | )}
105 |
106 | )
107 | }
108 | }
109 |
110 | function connectEndpoint(endpoint) {
111 | State.apply('config', 'credentials', 'graphql', 'token', U.replace(''))
112 | State.apply('config', 'credentials', 'graphql', 'endpoint', U.replace(endpoint))
113 | connectDB()
114 | }
115 |
116 | export async function run(query) {
117 | var db = State.get('connect', '_db')
118 | const results = await fetcher({ query })
119 | let result = {}
120 | const data = results.data[Object.keys(results.data)[0]]
121 |
122 | if (data != null) {
123 | result = formatResults(data)
124 | }
125 | result.query = query
126 |
127 | State.apply('connect', 'graphqlschema', U.replace(await getSchema()))
128 | return result
129 | }
130 |
131 | export function reference(name) {
132 | return '#' + name
133 | }
134 |
135 | const database = () => {
136 | const { endpoint, token } = State.get('config', 'credentials', 'graphql')
137 | const options = token ? { headers: { Authorization: `Bearer ${token}` } } : {}
138 | return new GraphQLClient(endpoint, options)
139 | }
140 |
141 | const fetcher = ({ query, variables, operationName, context }) => {
142 | const db = State.get('connect', '_db')
143 |
144 | return db.request(query, variables).then((data) => {
145 | return { data }
146 | })
147 | }
148 |
149 | const getSchema = async () => {
150 | return await fetcher({
151 | query: graphql.introspectionQuery,
152 | })
153 | }
154 |
155 | function formatResults(data) {
156 | if (Array.isArray(data)) {
157 | return {
158 | object: data,
159 | columns: Object.keys(data[0]),
160 | values: data.map((d) => Object.values(d)),
161 | }
162 | } else {
163 | return {
164 | object: data,
165 | columns: Object.keys(data),
166 | values: [Object.values(data)],
167 | }
168 | }
169 | }
170 |
171 | export const buildGQLSchema = _.memoize((result) => {
172 | if (!result) return null
173 | return graphql.buildClientSchema(result.data)
174 | })
175 |
176 | export function Clippy(props) {
177 | return (
178 |
179 |
180 | {props.connect.graphqlschema ? (
181 | Tried to connect {this.state.tries} times.
54 | const { connect, config } = this.props
55 |
56 | const credentialHints = {
57 | host: 'localhost',
58 | port: '27017',
59 | database: 'mydb',
60 | user: 'dbuser',
61 | password: 'password (optional)',
62 | }
63 | let credentials = (config.credentials && config.credentials.mongo) || {}
64 |
65 | const Field = (type, icon, className = '') => (
66 |
67 | {icon ? : null}
68 |
74 | State.apply(
75 | 'config',
76 | 'credentials',
77 | 'mongo',
78 | type,
79 | U.replace(e.target.value)
80 | )
81 | }
82 | placeholder={credentialHints[type]}
83 | />
84 |
85 | )
86 |
87 | return (
88 |
89 | })
90 |
91 |
92 |
93 |
94 |
100 |
101 |
102 | Franchise auto-filled some of your credentials using your
103 | system's defaults.
104 |
105 |
106 |
107 |
108 | {Field('host', 'cloud')}
109 | {Field('port')}
110 |
111 |
112 |
113 | {Field('user', 'user')}
114 | {Field('password', 'lock')}
115 |
116 |
117 | {Field('database', 'database')}
118 |
119 | {/*derp*/}
120 |
121 |
122 |
246 | db.collection.find(query, projection)
247 |
254 |
255 |
256 | Links
257 |
258 | -
259 |
263 | MongoDB Shell Quick Reference
264 |
265 |
266 |
267 |
268 |
269 |
270 | )
271 | }
272 |
--------------------------------------------------------------------------------
/src/db/img/bigquery.svg:
--------------------------------------------------------------------------------
1 |
86 |
--------------------------------------------------------------------------------