Browser client can't find dev-main.js

Hi, @luchiniatwork — thank you for writing Hodur, as it's what made me brave enough to even try Datomic Cloud! (I loved gushing about it at Clojure/conj last year! https://www.youtube.com/watch?v=5mbp3SEha38&t=19s :).

it's been about a year I've used Hodur Visualizer, and I'm eager to jump into a new project. But when I tried to run the visualizer for an older project I did in January, the browser comes up blank, unable to find the dev-main.js.

I'm now getting some warnings during the execution, and I'm wondering if it has to do with this issue: #6, about how figwheel can't find the bootstrap cljs file if it's put in a "dev like path."

I even made a symbolic link from "main.js" to "dev-main.js" inside of the "target/public" directory, but now I'm getting this error:

core.cljc:208 Uncaught ReferenceError: initialized is not defined
    at hodur_visualizer_schema$core$apply_diagram_BANG_ (core.cljc:208)
    at viz.cljc:12
hodur_visualizer_schema$core$apply_diagram_BANG_ @ core.cljc:208
(anonymous) @ viz.cljc:12
console.js:203  [goog.net.WebSocket] Opening the WebSocket on ws://localhost:9500/figwheel-connect?fwprocess=c0cd53&fwbuild=dev&fwsid=61ac7501-fa5f-4d32-91cd-4d6f95fd8959&fwsname=Elmo
console.js:203  [goog.net.WebSocket] WebSocket opened on ws://localhost:9500/figwheel-connect?fwprocess=c0cd53&fwbuild=dev&fwsid=61ac7501-fa5f-4d32-91cd-4d6f95fd8959&fwsname=Elmo
console.js:203  [Figwheel REPL] Session ID: 61ac7501-fa5f-4d32-91cd-4d6f95fd8959

Do you have any tips on getting the classpaths/paths set up correctly? Here's my current alias map in deps.edn.


{:dev  {:viz  {:extra-paths ["config/dev" "target"]
                    :resource-paths ["target/public" "resources"]
                    :extra-deps  {
                                  ;com.bhauman/figwheel-main                     {:mvn/version "0.2.12"}
                                  gnl/ghostwheel                                {:mvn/version "0.3.9"}
                                  hodur/engine                                  {:mvn/version "0.1.6"}
                                  hodur/visualizer-schema                       {:mvn/version "0.1.1"}
                                  hodur/datomic-schema                          {:mvn/version "0.1.0"}}}

And here's the output:

make vizbooks
clojure -A:dev -m hodur-visualizer-schema.main books/viz
WARNING: When invoking clojure.main, use -M
[Figwheel:WARNING] Attempting to dynamically add "target" to classpath!
[Figwheel:WARNING] Target directory "target" is not on the classpath
[Figwheel:WARNING] Please fix this by adding "target" to your classpath
 I.E.
 For Clojure CLI Tools in your deps.edn file:
    ensure "target" is in your :paths key

 For Leiningen in your project.clj:
   add it to the :resource-paths key

[Figwheel] Compiling build dev to "target/public/cljs-out/main.js"
[Figwheel] Successfully compiled build dev to "target/public/cljs-out/main.js" in 0.895 seconds.
[Figwheel] Watching paths: ("src") to compile build - dev
[Figwheel] Starting Server at http://localhost:9500
[Figwheel] Starting REPL
Prompt will show when REPL connects to evaluation environment (i.e. a REPL hosting webpage)

Here's the initial error I got from the browser at it searched for the "wrong" bootstrap CLJS file:

localhost_9500_and_hodur-schemas_—_-bash_—_86×40

Okay, I've started a new repo from scratch, and repeated the instructions in the README.

I now get the following error in the browser console — it can't find the initialized variable, which I think is being called from here...

Holy smokes, I'm at a loss — any ideas? Thank you!

https://github.com/hodur-org/hodur-visualizer-schema/blob/b62dc400fee35942c5968e10800fc6afdc130319/src/hodur_visualizer_schema/core.cljc

Installing CLJS DevTools 0.9.10 and enabling features :formatters :hints :async
util.js:236 CLJS DevTools: some custom formatters were not rendered.
https://github.com/binaryage/cljs-devtools/blob/master/docs/faq.md#why-some-custom-formatters-were-not-rendered
devtools$util$check_custom_formatters_active_BANG_ @ util.js:236
core.js:287 Uncaught ReferenceError: initialized is not defined
    at hodur_visualizer_schema$core$apply_diagram_BANG_ (core.js:287)
    at core.js:7
console.js:218  [goog.net.WebSocket] Opening the WebSocket on ws://localhost:9500/figwheel-connect?fwprocess=138be3&fwbuild=dev&fwsid=d2e80a9f-4e98-4566-ab08-329d4ed66eea 
console.js:218  [goog.net.WebSocket] WebSocket opened on ws://localhost:9500/figwheel-connect?fwprocess=138be3&fwbuild=dev&fwsid=d2e80a9f-4e98-4566-ab08-329d4ed66eea 
console.js:218  [Figwheel REPL] Session ID: d2e80a9f-4e98-4566-ab08-329d4ed66eea

Here's a repo with the failing test case — https://github.com/realgenekim/hodur-new

To reproduce, just type make clean viztest.

(You'll need to copy the resources/public/scripts/go.js into the directory first...)

I finally had the chance of having a look at this.

Here's what I found: https://github.com/realgenekim/hodur-new/pull/1

The key was in the params sent to your fig/start.

An alternative way to fire up the visualizer without having to go through figwheel directly is something I've been copying and pasting between my projects:

(ns visualizer.focus
  (:require [hodur-engine.core :as hodur]
            [hodur-visualizer-schema.core :as visualizer]
            [cljs-http.client :as http]
            [cljs.core.async :refer [<! go]]))

(go
  (let [{:keys [status body]} (<! (http/get "focus_schema.edn"))]
    (if (= 200 status)
      (-> body
          hodur/init-schema
          visualizer/schema
          visualizer/apply-diagram!)
      (throw (ex-info "Can't find schema file" {})))))

Requirements:

Have the schema (focus_schema.edn in this case) at resources/public
Initialize it using visualizers launcher with: $ clojure -m hodur-visualizer-schema.main visualizer.focus

It's a tiny more involving as an example because it uses async and an http library but it lets me edit the schema file in isolation without having to edit the launcher code.

I can't make schema visualizer-schema to work also

[hodur/engine "0.1.8"] [hodur/visualizer-schema "0.1.1"]

in my case 1 I build lein project 2 add go script in resources 3 make my index.html like below

   <!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Welcome to cjhike2</title>
</head>
<body onload="">
<div id="app" class="container">
    <div id="infoBoxHolder">
        <!-- Initially Empty, it is populated when updateInfoBox is called -->
    </div>
    <div id="myDiagramDiv" class="diagramDiv"></div>
</div>
<!--<script src="cljs-out/main.js" type="text/javascript"></script>-->
</body>

<!-- scripts and styles -->
{% style "/assets/bulma/css/bulma.min.css" %}
{% style "/assets/material-icons/css/material-icons.min.css" %}
{% style "/css/screen.css" %}

<script type="text/javascript">
        var csrfToken = "{{csrf-token}}";

</script>
{% script "/scripts/go.js" %} 
{% script "/scripts/my_diagram.js" %} << script from your lib
{% script "/cljs-out/dev-main.js" %} << my main with `visualizer/apply-diagram!`

</body>
</html>

4 main.cljs as below

(def meta-db (engine/init-schema
               '[Person
                 [^String first-name
                  ^String last-name
                  ^Gender gender]

                 ^:enum
                 Gender
                 [MALE FEMALE IRRELEVANT]]))

(defn show [] 
  (-> meta-db
    visualizer/schema
    visualizer/apply-diagram!))

(show)

so, when I open browser window I don't have any console issues and logs, but nothing shows. when I call (show) from cljs console again I get #object[Error Error: Invalid div id; div already has a Diagram associated with it.] and actually the canvas appeared, but it is empty.

Is it possible that I need specific version of GoJS? I have GoJS v2.1.38

@evilsneer Using the recommendations from above, the following procedure worked for me. Hopefully it gets you moving:

Create the directory structures

mkdir hodur-viz
cd hodur-viz

mkdir -p resources/public/scripts
mkdir -p src/visualizer

# tested on GoJS 2.1
curl https://gojs.net/latest/release/go.js -o resources/public/scripts/go.js

Create a default schema

Save to resources/public/focus_schema.edn

[Person
  [^String first-name
   ^String last-name
   ^Gender gender]

   ^:enum
   Gender
     [MALE FEMALE IRRELEVANT]]

Create deps

Save to deps.edn

{:paths ["src" "resources" "target"]
 :deps {cljs-http/cljs-http {:mvn/version "0.1.46"}
        hodur/visualizer-schema {:mvn/version "0.1.1"}}}

Create main app file

Save to src/visualizer/focus.cljc

(ns visualizer.focus
  (:require [hodur-engine.core :as hodur]
            [hodur-visualizer-schema.core :as visualizer]
            [cljs-http.client :as http]
            [cljs.core.async :refer [<! go]]))

(go
  (let [{:keys [status body]} (<! (http/get "focus_schema.edn"))]
    (if (= 200 status)
      (-> body
          hodur/init-schema
          visualizer/schema
          visualizer/apply-diagram!)
      (throw (ex-info "Can't find schema file" {})))))

Create Makefile

Save to Makefile

viztest:
    clojure -m hodur-visualizer-schema.main visualizer.focus

clean:
    rm -rf target

Launch the visualiser

make

After a few seconds, the visualiser should launch.

After editing resources/public/focus_schema.edn you'll need to refresh the browser to reflect the changes.

$ make
clojure -m hodur-visualizer-schema.main visualizer.focus
WARNING: When invoking clojure.main, use -M
[Figwheel:WARNING] Making target directory "target" and re-adding it to the classpath (this only needs to be done when the target directory doesn't exist)
[Figwheel] Compiling build dev to "target/public/cljs-out/main.js"
[Figwheel] Successfully compiled build dev to "target/public/cljs-out/main.js" in 10.318 seconds.
[Figwheel] Watching paths: ("src") to compile build - dev
[Figwheel] Starting Server at http://localhost:9500
[Figwheel] Starting REPL
Prompt will show when REPL connects to evaluation environment (i.e. a REPL hosting webpage)
Figwheel Main Controls:
          (figwheel.main/stop-builds id ...)  ;; stops Figwheel autobuilder for ids
          (figwheel.main/start-builds id ...) ;; starts autobuilder focused on ids
          (figwheel.main/reset)               ;; stops, cleans, reloads config, and starts autobuilder
          (figwheel.main/build-once id ...)   ;; builds source one time
          (figwheel.main/clean id ...)        ;; deletes compiled cljs target files
          (figwheel.main/status)              ;; displays current state of system
Figwheel REPL Controls:
          (figwheel.repl/conns)               ;; displays the current connections
          (figwheel.repl/focus session-name)  ;; choose which session name to focus on
In the cljs.user ns, controls can be called without ns ie. (conns) instead of (figwheel.repl/conns)
    Docs: (doc function-name-here)
    Exit: :cljs/quit
 Results: Stored in vars *1, *2, *3, *e holds last exception object
2021-05-05 14:22:26.038:INFO::main: Logging initialized @15801ms
Opening URL http://localhost:9500
ClojureScript 1.10.439
cljs.user=>

thanks! I would use it

hodur-org / hodur-visualizer-schema

Browser client can't find dev-main.js #10