datalog-console

Administration UI for Datascript, Datahike, and other Datalog databases

Integrations

• datascript

Installation and Usage

1. Ensure Datalog Console message handlers are enabled on the application you want to connect to.

(ns your-app
  (:require 
   [io.homebase/datalog-console.integrations.datascript :as datalog-console]))

; e.g. enable the message handlers on a datascript db conn
(datalog-console/enable! {:conn conn})

• You can skip this step if you are using
  • homebase-react >=0.7.0
  • Athens Research (web) >=1.0.0-beta.81

2. Add the extension to Chrome/Edge or Firefox

3. Visit a url with a Datalog DB that has the datalog-console integration (such as this homebase-react example todo app)

4. You will see a green dot appear next to the icon with the following pop up message upon clicking the extension.

5. Open the 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.

Features

You will find 3 views in the Datalog DB panel.

• Schema
• Entities
• Entity

Schema

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.

An example of Schema inference.

Entities

Renders a list of entities found in the database. Clicking on any of these entities renders them in the Entity view.

Entity

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.

---

Development

Make sure you have Java and the Clojure CLI installed. 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.

yarn install
yarn dev

When running for the first time you will want to run Tailwind to generate the styles.

yarn build:tailwind:dev

Load the dev extension into the Chrome browser

1. Go to chrome://extensions/
2. Turn on developer mode in top right
3. Load unpacked your-file-path-to/datalog_console/shells/chrome

To view the datalog panel open the Chrome console with either of these options.

• Right click anywhere on the page -> Inspect
• Option + ⌘ + J (on macOS)
• Shift + CTRL + J (on Windows/Linux)

Connect the REPL

You can connect a repl to each process by opening new windows in your terminal and doing the following.

• yarn repl-background - for the background page
• yarn repl-panel - for the devtool panel console

You can also connect your editor connected repl. Selecting build chrome gets you background and chrome-devtool gets you the panel.

Runtime environments

There is 3 runtime environments and 4 environments which both send and receive messages.

• Application environment
• Content script
• Background script
• Chrome panel

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.

How to find the console of these environments

• Content script is executed in the standard browser Console
• Background is executed in the background. Found in figure (Fig: 1) below 👇
• Chrome panel is available by opening up the chrome console inside of Datalog DB panel tab

(Fig: 1) - To view the background page go to chrome://extensions/ and click here:

Load the dev extension into Firefox

1. Go to about:debugging#/runtime/this-firefox
2. Click Load Temporary Add-on... towards the top right
3. Select any file in your-file-path-to/datalog_console/shells/chrome

Refer to runtime evironments to find where code is executed.

(Fig: 2) - To view the background page go to about:debugging#/runtime/this-firefox and click here: