halogen-tx-explorer: create package #344 (WIP)

packages.dhall

@@ -10,6 +10,7 @@ let additions =
       , stbx-lang = ./stbx-lang/spago.dhall as Location
       , stbx-service-rest = ./stbx-service-rest/spago.dhall as Location
       , stbx-tx-store = ./stbx-tx-store/spago.dhall as Location
+      , studio = ./studio/spago.dhall as Location
       , studio-common = ./studio-common/spago.dhall as Location
       , vec = ./vec/spago.dhall as Location
       , halogen-diagram-editor = ./halogen-diagram-editor/spago.dhall as Location

studio/src/Main.purs

@@ -11,6 +11,7 @@ import Routing.Hash as Routing
 
 import View.Studio as Studio
 import View.Studio (Query(LoadTransactionsThenView))
+import View.Studio.Model.Route (RouteF(Home))
 
 import ExampleData as Ex
 
@@ -19,6 +20,16 @@ main = runHalogenAff do
   urlHash <- liftEffect Routing.getHash
   liftEffect $ log $ "studio: transaction hash to be visited: " <> urlHash
   body <- awaitBody
-  io <- runUI Studio.ui unit body
+  io <- runUI Studio.ui initialState body
   _ <- io.query $ H.tell (LoadTransactionsThenView Ex.endpointUrl urlHash)
   pure io
+  where
+    initialState :: Studio.Input
+    initialState =
+      { title:       "Statebox Studio"
+      , msg:         "Welcome to Statebox Studio!"
+      , projects:    Ex.projects
+      , hashSpace:   mempty
+      , apiUrl:      Ex.endpointUrl
+      , route:       Home
+      }

studio/src/View/Studio.purs

@@ -35,28 +35,20 @@ import View.Studio.Model.Route as Route
 import View.Studio.Model.Route (Route, RouteF(..), NodeIdent(..))
 import View.Studio.View (render, ChildSlots)
 
-import ExampleData as Ex
-
-type Input = Unit
+type Input = State
 
 data Query a = LoadTransactionsThenView URL TxId a
 
 ui :: ∀ m. MonadAff m => H.Component HTML Query Input Void m
 ui =
   H.mkComponent
-    { initialState: const initialState
+    { initialState: mkInitialState
     , eval:         mkEval $ defaultEval { handleAction = handleAction, handleQuery = handleQuery }
     , render:       render
     }
   where
-    initialState :: State
-    initialState =
-      { msg:         "Welcome to Statebox Studio!"
-      , projects:    Ex.projects
-      , hashSpace:   AdjacencySpace.empty
-      , apiUrl:      Ex.endpointUrl
-      , route:       Home
-      }
+    mkInitialState :: Input -> State
+    mkInitialState input = input
 
     handleQuery :: ∀ a. Query a -> H.HalogenM State Action ChildSlots Void m (Maybe a)
     handleQuery = case _ of

studio/src/View/Studio/Model.purs

@@ -52,6 +52,7 @@ type State =
   { route       :: Route
   , projects    :: Array Project
   , hashSpace   :: AdjacencySpace HashStr TxSum -- ^ Hashes and their (tree of) links.
+  , title       :: String
   , msg         :: String
   , apiUrl      :: URL
   }

studio/src/View/Studio/View.purs

@@ -60,7 +60,7 @@ data VoidF a
 render :: ∀ m. MonadAff m => State -> ComponentHTML Action ChildSlots m
 render state =
   div []
-    [ navBar
+    [ navBar state.title
     , div [ classes [ ClassName "flex" ] ]
           [ div [ classes [ ClassName "w-1/6", ClassName "h-12" ] ]
                 [ slot _objectTree unit (TreeMenu.menuComponent (_ == state.route)) (stateMenu state) ((\(TreeMenu.Clicked menuNodeId route) -> ShowDiagramNodeContent route) >>> Just) ]
@@ -141,13 +141,14 @@ routeBreadcrumbs route =
   where
     crumb str = li [] [ a [ href "#" ] [ text str ] ]
 
-navBar :: ∀ m. ComponentHTML Action ChildSlots m
-navBar =
+navBar :: ∀ m. String -> ComponentHTML Action ChildSlots m
+navBar title =
   nav [ classes $ ClassName <$> [ "css-navbar", "flex", "items-center", "justify-between", "flex-wrap", "bg-purple-darker", "p-6" ] ]
-  [ div [ classes $ ClassName <$> [ "flex", "items-center", "flex-no-shrink", "text-white", "mr-6" ] ]
-            [ span [ classes [ ClassName "css-logo-statebox" ] ] []
+      [ div [ classes $ ClassName <$> [ "flex", "items-center", "flex-no-shrink", "text-white", "mr-6" ] ]
+            [ span [ classes [ ClassName "css-logo-statebox" ] ]
+                   []
             , span [ classes $ ClassName <$> [ "navbar-item", "ml-4", "font-semibold", "text-xl" ] ]
-                   [ text "Statebox Studio" ]
+                   [ text title ]
             ]
       , menu [ "Home"    /\ Just Home
              , "Project" /\ Nothing

tx-browser/html/index.css

@@ -0,0 +1,36 @@
+@import "tailwindcss/dist/utilities.min.css";
+@import "tailwindcss/dist/preflight.min.css";
+@import "@fortawesome/fontawesome-free/css/all.min.css";
+
+@import "../../studio/html/petrinet.css";
+@import "../../studio/html/diagram.css";
+@import "../../studio/html/typedefs.css";
+@import "../../studio/html/auths.css";
+@import "../../studio/html/kdmoncat-bricks.css";
+@import "../../halogen-grid-kit/src/GridKit/KeyHandler.css";
+@import "./tx-browser.css";
+
+svg {
+  display: block;
+  height: 100%;
+  width: 100%;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  -webkit-user-select: none;
+  user-select: none;
+}
+a {
+  text-decoration: none;
+}
+.css-navbar .css-logo-statebox {
+  display: inline-block;
+  width: 32px;
+  height: 37px;
+  background-image: url(../../studio/html/logo-statebox-white.svg);
+}
+.css-route-breadcrumbs li+li::before {
+  margin-left: 0.5em;
+  margin-right: 0.5em;
+  color: #b5b5b5;
+  content: "\02192";
+}

tx-browser/html/index.html

@@ -0,0 +1,13 @@
+<!doctype html>
+<html xmlns="http://www.w3.org/1999/xhtml">
+  <head>
+    <meta charset="utf-8"/>
+    <title>Statebox Transaction Browser</title>
+
+    <link rel="stylesheet" href="index.css">
+  </head>
+  <body>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/fast-xml-parser/3.10.0/parser.js"></script>
+    <script src="index.js"></script>
+  </body>
+</html>

tx-browser/html/index.js

@@ -0,0 +1,4 @@
+window.Stbx = require('@statebox/stbx-js')
+window.dagre = require("dagre")
+var Main = require("../output/index.js")
+Main.main()

tx-browser/html/tx-browser.css

@@ -0,0 +1,6 @@
+tr.css-tx-execution {
+    background: orange;
+}
+tr.css-tx-current {
+    background: pink;
+}

tx-browser/package.json

@@ -0,0 +1,39 @@
+{
+  "name": "stbx-tx-browser",
+  "version": "1.0.0",
+  "description": "Statebox Transaction Browser",
+  "main": "index.js",
+  "directories": {
+    "test": "test"
+  },
+  "scripts": {
+    "postinstall": "spago install",
+    "start": "npm run build && concurrently --kill-others --handle-input npm:watch npm:serve",
+    "build": "spago bundle-module --main Statebox.Browser.Main --to output/index.js --purs-args --censor-codes=ImplicitImport,ImplicitQualifiedImport,HidingImport",
+    "watch": "spago bundle-module --main Statebox.Browser.Main --to output/index.js --watch --purs-args --censor-codes=ImplicitImport,ImplicitQualifiedImport,HidingImport",
+    "test": "spago test",
+    "docs": "spago docs",
+    "repl": "spago repl",
+    "serve": "parcel html/index.html",
+    "bundle": "npm run build && rm -rf dist && parcel build html/index.html --public-url . --no-source-maps"
+  },
+  "keywords": [
+    "statebox",
+    "petrinet"
+  ],
+  "author": "Erik Post <erik@shinsetsu.nl>",
+  "license": "Commercial",
+  "devDependencies": {
+    "concurrently": "^5.0.2",
+    "parcel-bundler": "^1.12.4",
+    "purescript": "^0.13.5",
+    "purescript-psa": "^0.7.3",
+    "spago": "^0.13"
+  },
+  "dependencies": {
+    "@fortawesome/fontawesome-free": "^5.6.3",
+    "@statebox/stbx-js": "0.0.31",
+    "dagre": "^0.8.4",
+    "tailwindcss": "^0.7.3"
+  }
+}

tx-browser/spago.dhall

@@ -0,0 +1,9 @@
+{ name =
+    "stbx-tx-browser"
+, sources =
+    [ "src/**/*.purs" ]
+, dependencies =
+    [ "studio" ]
+, packages =
+    ../packages.dhall
+}

tx-browser/src/Statebox/Browser/Main.purs

@@ -0,0 +1,35 @@
+module Statebox.Browser.Main where
+
+import Prelude
+import Effect (Effect)
+import Effect.Class (liftEffect)
+import Effect.Console (log)
+import Halogen as H
+import Halogen.Aff (awaitBody, runHalogenAff)
+import Halogen.VDom.Driver (runUI)
+import Routing.Hash as Routing
+
+import View.Studio as Studio
+import View.Studio (Query(LoadTransactionsThenView))
+import View.Studio.Model.Route (RouteF(Home))
+
+import ExampleData as Ex
+
+main :: Effect Unit
+main = runHalogenAff do
+  urlHash <- liftEffect Routing.getHash
+  liftEffect $ log $ "tx browser: transaction hash to be visited: " <> urlHash
+  body <- awaitBody
+  io <- runUI Studio.ui initialState body
+  _ <- io.query $ H.tell (LoadTransactionsThenView Ex.endpointUrl urlHash)
+  pure io
+  where
+    initialState :: Studio.Input
+    initialState =
+      { title:       "Statebox Transaction Browser"
+      , msg:         "Welcome to the Statebox Transaction Browser!"
+      , projects:    mempty
+      , hashSpace:   mempty
+      , apiUrl:      Ex.endpointUrl
+      , route:       Home
+      }