Pathom viz is a set of visualization tools to support the development and inspection of Graph API’s built with the Pathom library.
The standalone app is the easiest way to use Pathom Viz.
A download of binaries is available at the releases page.
If you want to develop the app:
./scripts/dev-electron
cd shells/electron
npm install
npx electron .If you want to run locally with prod performance, do the same replacing
./scripts/dev-electron with ./scripts/build-electron.
To package the app, do the following:
./script/build-electron
cd shells/electron
npm run packThe builds will be available at the dist directory.
Pathom Viz Embed is an effortless way to include Pathom components in any web-based interface.
This is similar to what a Youtube or Vimeo embed works. You put an iframe and send some data to it.
The base URL for the embed is https://pathom-viz.wsscode.com/embed.html.
The interface to communicate is a configuration map, here is a configuration example to open the planner explorer:
{:pathom.viz.embed/component-name
:pathom.viz.embed.component/planner-explorer
:pathom.viz.embed/component-props
{:com.wsscode.pathom3.connect.indexes/index-oir
{:a {{} #{a}}
:b {{:g {}} #{b}}
:c {{} #{c}}
:e {{} #{e e1}}
:f {{:e {}} #{f}}
:g {{:c {} :f {}} #{g}}
:h {{:a {} :b {}} #{h}}}
:edn-query-language.core/query
[:h]}}To send this data to the embed, there are two ways.
You can encode using URL Encoding and send via msg query param, for example:
<iframe src="https://pathom-viz.wsscode.com/embed.html?msg=%7B%3Apathom.viz.embed%2Fcomponent-name%0A%20%3Apathom.viz.embed.component%2Fplanner-explorer%0A%0A%20%3Apathom.viz.embed%2Fcomponent-props%0A%20%7B%3Acom.wsscode.pathom3.connect.indexes%2Findex-oir%0A%20%20%7B%3Aa%20%7B%7B%7D%20%23%7Ba%7D%7D%0A%20%20%20%3Ab%20%7B%7B%3Ag%20%7B%7D%7D%20%23%7Bb%7D%7D%0A%20%20%20%3Ac%20%7B%7B%7D%20%23%7Bc%7D%7D%0A%20%20%20%3Ae%20%7B%7B%7D%20%23%7Be%20e1%7D%7D%0A%20%20%20%3Af%20%7B%7B%3Ae%20%7B%7D%7D%20%23%7Bf%7D%7D%0A%20%20%20%3Ag%20%7B%7B%3Ac%20%7B%7D%20%3Af%20%7B%7D%7D%20%23%7Bg%7D%7D%0A%20%20%20%3Ah%20%7B%7B%3Aa%20%7B%7D%20%3Ab%20%7B%7D%7D%20%23%7Bh%7D%7D%7D%0A%0A%20%20%3Aedn-query-language.core%2Fquery%0A%20%20%5B%3Ah%5D%7D%7D" />You can navigate and try it.
The URL data is convenient, but it is also limited in the size of the message. Each browser may have different higher limits. Pathom data can get quite large, and those limits are not enough in many cases.
To provide an alternative without such limitations, Pathom Viz also accepts data using the window messaging.
To use this, you must wait for the frame to load and use window.postMessage using
the following format:
(.postMessage window #js {:event "pathom-viz-embed" :payload (pr-str message)} "*")Here is a complete example putting all together:
<html>
<head>
<style>
#pathomFrame {
margin: 0 auto;
width: 800px;
height: 600px;
}
</style>
</head>
<body>
<!-- Create the iframe -->
<iframe src="" id="pathomFrame" frameborder="0"></iframe>
<script>
// get a hold on the node reference
const frame = document.getElementById("pathomFrame");
// on load, send message
frame.onload = function () {
frame.contentWindow.postMessage({
event: "pathom-viz-embed",
payload: "#:pathom.viz.embed{:component-name :pathom.viz.embed.component/planner-explorer, :component-props {:com.wsscode.pathom3.connect.indexes/index-oir {:a {{} #{a}}, :b {{:g {}} #{b}}, :c {{} #{c}}, :e {{} #{e1 e}}, :f {{:e {}} #{f}}, :g {{:c {}, :f {}} #{g}}, :h {{:a {}, :b {}} #{h}}}, :edn-query-language.core/query [:h]}}"
}, "*");
}
// trigger the load start
frame.src = "https://pathom-viz.wsscode.com/embed.html";
</script>
</body>
</html>At this moment, for public usage, only the Planner Explorer is available. More components will come soon. Keep an eye on the issues to track their development.
Find usage docs at https://roamresearch.com/#/app/wsscode/page/RG9C93Sip.
Get support at #pathom channel in Clojurians Slack.
![@dependabot[bot]](https://avatars.githubusercontent.com/in/29110?s=64&v=4){kind=small}
