Skip to content

Commit 11551b8

Browse files
becomingbabymangroundedsage
becomingbabyman
and
groundedsage
authored
feat(extension): add v0.1 of extension (#1)
 Co-authored-by: Chris Smothers <[email protected]> Co-authored-by: Wade Dominic <[email protected]>
1 parent 9a899f7 commit 11551b8

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

50 files changed

+9095
-11
lines changed

‎.github/workflows/gh-pages.yml

+78
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,78 @@
1+
name: gh-pages
2+
3+
on: push
4+
5+
jobs:
6+
publish-examples:
7+
name: gh-pages
8+
runs-on: ubuntu-latest
9+
steps:
10+
- uses: actions/checkout@v2
11+
12+
- uses: actions/setup-node@v1
13+
with:
14+
node-version: '12'
15+
16+
- name: Prepare java
17+
uses: actions/setup-java@v1
18+
with:
19+
java-version: 1.8
20+
21+
- name: Install clojure tools
22+
uses: DeLaGuardo/[email protected]
23+
with:
24+
cli: 1.10.1.693
25+
26+
- name: Get yarn cache directory path
27+
id: yarn-cache-dir-path
28+
run: echo "::set-output name=dir::$(yarn config get cacheFolder)"
29+
30+
- name: Cache yarn packages
31+
uses: actions/cache@v2
32+
id: yarn-cache # use this to check for `cache-hit` (`steps.yarn-cache.outputs.cache-hit != 'true'`)
33+
with:
34+
path: ${{ steps.yarn-cache-dir-path.outputs.dir }}
35+
key: ${{ runner.os }}-yarn-${{ hashFiles('**/yarn.lock') }}
36+
restore-keys: |
37+
${{ runner.os }}-yarn-
38+
39+
- name: Cache maven packages
40+
uses: actions/cache@v2
41+
with:
42+
path: ~/.m2
43+
key: ${{ runner.os }}-m2-${{ hashFiles('**/pom.xml') }}
44+
restore-keys: ${{ runner.os }}-m2
45+
46+
- name: Cache shadow-cljs
47+
uses: actions/cache@v2
48+
with:
49+
path: .shadow-cljs
50+
key: ${{ runner.os }}-shadow-cljs-${{ hashFiles('**/pom.xml') }}
51+
restore-keys: ${{ runner.os }}-shadow-cljs
52+
53+
- run: yarn install --frozen-lockfile
54+
55+
- run: yarn build
56+
57+
- name: Extract branch name
58+
shell: bash
59+
run: echo "##[set-output name=branch;]$(echo ${GITHUB_REF#refs/heads/})"
60+
id: extract_branch
61+
62+
- name: Publish to GitHub Pages 🚀
63+
uses: JamesIves/[email protected]
64+
with:
65+
branch: gh-pages
66+
folder: public
67+
target-folder: branches/${{ steps.extract_branch.outputs.branch }}
68+
69+
- name: Slack Notification
70+
uses: rtCamp/action-slack-notify@v2
71+
env:
72+
SLACK_CHANNEL: proj-dev-datalog-console
73+
SLACK_COLOR: ${{ job.status }} # or a specific color like 'green' or '#ff00ff'
74+
SLACK_ICON: https://github.com/homebaseio.png?size=200
75+
SLACK_MESSAGE: "- :github: Branch: <https://github.com/homebaseio/datalog-console/tree/${{ steps.extract_branch.outputs.branch }}|${{ steps.extract_branch.outputs.branch }}>\n- :crystal_ball: index: https://homebaseio.github.io/datalog-console/branches/${{ steps.extract_branch.outputs.branch }}/index.html\n- :card_file_box: workspaces: https://homebaseio.github.io/datalog-console/branches/${{ steps.extract_branch.outputs.branch }}/workspaces.html"
76+
SLACK_TITLE: "Published ${{ steps.extract_branch.outputs.branch }} to GitHub Pages :rocket:"
77+
SLACK_USERNAME: Homebase
78+
SLACK_WEBHOOK: ${{ secrets.SLACK_WEBHOOK }}

‎.gitignore

+31-11
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,34 @@
1+
node_modules/
2+
public/app/js
3+
public/app/out
4+
public/app/manifest.json
5+
public/cards/js
6+
shells/chrome/js
7+
shells/chrome/manifest.json
8+
shells/chrome/css/gen-styles.css
9+
10+
/target
11+
/checkouts
12+
/src/gen
13+
114
pom.xml
215
pom.xml.asc
16+
*.iml
317
*.jar
4-
*.class
5-
/lib/
6-
/classes/
7-
/target/
8-
/checkouts/
9-
.lein-deps-sum
10-
.lein-repl-history
11-
.lein-plugins/
12-
.lein-failures
13-
.nrepl-port
14-
.cpcache/
18+
*.log
19+
.shadow-cljs
20+
.idea
21+
.lein-*
22+
.nrepl-*
23+
.DS_Store
24+
25+
.hgignore
26+
.hg/
27+
28+
.lsp
29+
.history
30+
.calva
31+
.cpcache
32+
shells/chrome/out
33+
public/js
34+
public/css/gen-styles.css

‎README.md

+117
Original file line numberDiff line numberDiff line change
@@ -1,2 +1,119 @@
11
# datalog-console
2+
23
Administration UI for Datascript, Datahike, and other Datalog databases
4+
5+
## Integrations
6+
7+
- [homebase-react](https://github.com/homebaseio/homebase-react) `>=0.7.0`
8+
9+
## Installation and Usage
10+
11+
Install the extension and visit a url with an Datalog db that has the `datalog-console` integration (such as the `homebase-react` [demo](https://homebaseio.github.io/homebase-react/#!/dev.example.todo)). You will see a green dot appear next to the icon with the following pop up message upon clicking the extension.
12+
13+
![Extension notification and popup message](docs/datalog-db-detected.png)
14+
15+
Open the Chrome console and look for the Datalog DB tab. Load the database with the button in the top right of the panel and you are ready to go.
16+
![Datalog DB panel open in Chrome console](docs/chrome-panel.png)
17+
18+
### Features
19+
20+
You will find 3 views in the Datalog DB panel.
21+
- [Schema](#schema)
22+
- [Entities](#entities)
23+
- [Entity](#entity)
24+
25+
![View of a loaded db in the Chrome panel](docs/loaded-db.png)
26+
27+
#### Schema
28+
29+
If a schema exists in the database it will use this and in the case of schema on read it will also infer the schema based on contents of the database.
30+
31+
_An example of Schema inference_.
32+
33+
![Schema inference example](docs/schema.png)
34+
35+
#### Entities
36+
37+
Renders a list of entities found in the database. Clicking on any of these entities renders them in the Entity view.
38+
39+
#### Entity
40+
41+
Directly look up an entity by `id` or `unique attribute`. This renders a tree view of an entity where you can also traverse it's reverse references.
42+
43+
44+
---
45+
46+
## Development
47+
48+
Make sure you have Java and the Clojure CLI [installed](https://clojure.org/guides/getting_started). There are ways to get by without these given this project mostly relies on Javascript, but using the Clojure JVM CLI allows us to resolve dependencies in a more flexible way, which comes in really handy when developing across dependencies.
49+
50+
```bash
51+
yarn install
52+
yarn dev
53+
```
54+
When running for the first time you will want to run Tailwind to generate the styles.
55+
56+
```bash
57+
yarn build:tailwind:dev
58+
```
59+
60+
### Load the dev extension into the Chrome browser
61+
62+
1. Go to `chrome://extensions/`
63+
2. Turn on **developer mode** in top right
64+
3. Load unpacked `your-file-path-to/datalog_console/shells/chrome`
65+
66+
To view the datalog panel open the Chrome console with either of these options.
67+
- Right click anywhere on the page -> Inspect
68+
- **Option + ⌘ + J** (on macOS)
69+
- **Shift + CTRL + J** (on Windows/Linux)
70+
71+
### Connect the REPL
72+
73+
You can connect a repl to each process by opening new windows in your terminal and doing the following.
74+
75+
76+
- `yarn repl-background` - for the background page
77+
- `yarn repl-panel` - for the devtool panel console
78+
79+
You can also connect your editor connected repl. Selecting build `chrome` gets you background and `chrome-devtool` gets you the panel.
80+
81+
### Runtime environments
82+
83+
There is **3 runtime environments** and 4 environments which both send and receive messages.
84+
- Application environment
85+
- **Content script**
86+
- **Background script**
87+
- **Chrome panel**
88+
89+
The first one you only have access to via postMessage to the window. You also get read and write access to the DOM (used to signal from the external Application environment that a Datalog DB is available). This is all done through `Content script`. Messages between the `Chrome panel` and `Content script` must go through `Background script`.
90+
91+
#### How to find the console of these environments
92+
93+
- Content script is executed in the standard browser Console
94+
- Background is executed in the background. Found in figure (Fig: 1) below 👇
95+
- Chrome panel is available by opening up the chrome console inside of _Datalog DB_ panel tab
96+
97+
98+
(Fig: 1) - To view the background page go to `chrome://extensions/` and click here:
99+
100+
![Datalog Chrome Extension background page](docs/chrome-extension.jpg)
101+
102+
103+
## Load the dev extension into Firefox
104+
105+
1. Go to `about:debugging#/runtime/this-firefox`
106+
2. Click **Load Temporary Add-on...** towards the top right
107+
3. Select any file in `your-file-path-to/datalog_console/shells/chrome`
108+
109+
[Refer to runtime evironments](#runtime-environments) to find where code is executed.
110+
111+
112+
(Fig: 2) - To view the background page go to `about:debugging#/runtime/this-firefox` and click here:
113+
114+
![Datalog Firefox Extension background page](docs/firefox-extension.png)
115+
116+
117+
### Quirks
118+
119+
Execution of code inside of `content-script` will not run on `www.google.com`

‎deps.edn

+8
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
{:paths ["src/dev"
2+
"src/main"
3+
"src/test"]
4+
:deps {thheller/shadow-cljs {:mvn/version "2.11.25"}
5+
reagent/reagent {:mvn/version "1.0.0"}
6+
datascript/datascript {:mvn/version "1.0.7"}
7+
binaryage/devtools {:mvn/version "1.0.2"}
8+
nubank/workspaces {:mvn/version "1.0.16"}}}

‎docs/chrome-extension.jpg

50.9 KB
Loading

‎docs/chrome-panel.png

71.7 KB
Loading

‎docs/datalog-db-detected.png

10.5 KB
Loading

‎docs/firefox-extension.png

54.6 KB
Loading

‎docs/loaded-db.png

89.9 KB
Loading

‎docs/schema.png

44.1 KB
Loading

0 commit comments

Comments
 (0)