Clojurians Log v2
clerk
Bad code that works to produce a poorly sized plantuml svg in a clerk doc https://gist.github.com/otfrom/f48274be01be652933886fe23ff6f91d
this is a bit nicer (and doesn't leak the socket IIUC)
(defn plantuml-svg-string [spec]
(with-open [os (ByteArrayOutputStream.)]
(let [reader (SourceStringReader. spec)
ffo (FileFormatOption. FileFormat/SVG)
_desc (.generateImage reader os ffo)]
(String. (.toByteArray os) (java.nio.charset.Charset/forName "UTF-8")))))updated the example: https://gist.github.com/otfrom/f48274be01be652933886fe23ff6f91d
is there a quick way to wrap that svg string up with a div to centre it?
(str "<div class=\"flex justify-center\">"
(String. (.toByteArray os) (java.nio.charset.Charset/forName "UTF-8"))
"</div>")
As a follow up from yesterday then:
It seems that people are using Clerk for many different reasons, so I just wanted to highlight the two main ways our team is currently using Clerk, in an effort to not only outline for myself our uses and wishes for the library but also maybe generate some discussion around others' use. We are essentially a consultancy, dealing with quite specific data and modelling. We receive very similarly formatted data from our clients but it is typically full of errors and requires cleaning and validation. We will typically investigate the data using Clerk and Tablecloth to visually inspect the data and the results of our modelling. This is the first use case of Clerk, the second is often as a slidedeck for presentation to our clients. These decks are typically then output to html and dispatched to the clients. We also used to use Google Slides for our presentations, which meant having to put up with many of the limitations of that and other Powerpoint-like platforms and that creating a deck means moving away from our dev tools and a massive amount of copy/pasting of charts/tables/etc. Clerk has really changed how we deliver our work. We previously put far more REPL output and commenting throughout our, often messy, investigative code. We can now store this output far more cleanly and presentable, even if only for internal audiences, making handing over work between individuals much easier. Outputting the results of an investigation can also create a snapshot of that work, negating any issues around changes to the underlying data. Some recent areas for features we’re looking to add based on our usage include: • Outputting to .pptx or similar - it is a filetype that our clients are more confident and familiar with • Interactive static html documents - I’ve been using interactive charts in my presentations recently, however when these decks have been delivered to clients (via html) they currently lose any of their interactivity making them much less exciting and informative • A way to build (“print”) notebooks (& clerk-slideshow) to a PDF file with sensible pagination. • A way to extract all the vega-lite plots in a notebook as svg/png files.
As an update to this thread we've since built two small libraries which allow us to output Vega-Lite plots from a notebook to a png - https://github.com/MastodonC/kixi.transcode, and, we're not quite there with going straight from Clerk to PPTX, but we've got a library that accepts essentially the same elements that we'd put in one of our Clerk notebooks (text, images, Vega-Lite charts and tables) and outputs to PowerPoint - https://github.com/MastodonC/kixi.plugsocket/. Thought I'd post them here in case they're useful to anyone else 👍
@jackrusher https://github.com/applied-science/darkstar/issues/6 is not the same error but the same issue that's already been opened - is it worth recording a new issue?
Naw, it’s okay. I’ll get to it when I can (which sadly won’t likely be in this quarter).
Further related to this we have had some issues recently sending charts with some of the new vega-lite features to png. I think this is because https://github.com/applied-science/darkstar is using an older version of vega-lite The error I'm getting is as follows:
Uncaught TypeError: Cannot read property 'length' of undefined.Sorry about that, I haven’t updated darkstar in ages because it mostly just works for my use cases. If you get a chance, file a bug!
^^ I'm part of this team and happy to answer anything/give feedback/etc as well
I think this is exceptionally interesting, and really appreciate you guys taking the time to write this up and share!
> • Outputting to .pptx or similar - it is a filetype that our clients are more confident and familiar with > • […] > • A way to build (“print”) notebooks (& clerk-slideshow) to a PDF file with sensible pagination. > • A way to extract all the vega-lite plots in a notebook as svg/png files. I’m also interested in a “document IR” from a rendered Clerk document. This might be possible already, Martin has pointed me to a showcase with https://snapshots.nextjournal.com/markdown/build/78f58b21a7efaec36a99d0b93f0db75830e8c1fa/notebooks/pandoc.html. Though I haven’t had the time to try this out myself yet. According to the document, it seems the provided code only works for a subset of the Clerk types (“Let’s define a map of transform functions indexed by (a subset of) our markdown types”). Though I’m not sure exactly how this should work. Using Pandoc IR has its limitations, not sure all Clerk info fits. In Clojure, we like using the REPL. Pandoc is a binary with a shell interface - stdin and stdout. Also, Pandoc requires shelling out to a binary, I don’t know of any libraries on Maven or Clojars that let people use Pandoc just by adding that dependency.
for pdf output I was vaguely considering this: https://github.com/clj-pdf/clj-pdf
Yes @teodorlu we transformed a clerk document to pdf via pandoc with latex as the target format: https://github.com/mk/clerk-px23/blob/main/dev/latex.clj. The shelling out to pandoc from clojure worked pretty well. This is the result https://storage.clerk.garden/nextjournal/clerk-px23@1b0c6350a8be8cd386cb5d2e4ca82aa3f372b15e/README.pdf
the tricky part is transforming clerk (interactive) results into latex, we ended up taking snapshots with playwright and using latex \includegraphics commands
We definitely have “Interactive static html documents” on our roadmap. The other bullet points are things that can be addressed with libraries, which I’d certainly be happy to see and/or help with 🙂
good to hear about the static html and I think you are right that some things should be libraries in the wider community rather than something done by nextjournal
Thank you for the writeup! I'm looking to enhance our DX and our dev<->nondev code/data communication, and this is very inspiring in that regard 💪
the vega-lite chart extract issue is what keeps us going to clj-plot and http://thi.ng/geom for these things
So if I am using thing.geom to create my svg. I have to create all my svg on the server side since there isn't a clojurescript environment in the frontend? I want this SVG to be interactive. So how can I re-render my SVG each time there is a change.
If I can just rerender on the change of an atom that would unblock me
Unsure if Clerk is the right tool for what I am doing.
You can trigger server-side rendering from front-end changes if you need JVM
See also: https://github.com/nextjournal/clerk-demo/blob/main/notebooks/dictionary.clj
Thanks. I am building a custom charting tool and I would like it in frontend but it’s based on data backend data. I want to be able to pan and zoom the data.
You can sync an atom between the front end/back end in Clerk. This allows you to recompute your SVG on the backend whenever something is changed on the front end.
Some code for reference.
(def chart-viewer
{:render-fn '(fn [x]
(reagent.core/with-let [!selected (reagent.core/atom false)
mouse-pos (reagent.core/atom nil)]
[:div
[:button {:on-click #(swap! !selected not)}
(str "Hello " (if @!selected "World" "Test"))]
[:p (str "Mouse position: " @mouse-pos)]
[:div
{:dangerouslySetInnerHTML {:__html x}
:onMouseMove (fn [e]
(let [rect (.getBoundingClientRect (.-target e))
x (- (.-clientX e) (.-left rect))
y (- (.-clientY e) (.-top rect))]
(reset! mouse-pos [x y])))}]]))})
(clerk/with-viewer chart-viewer chart-svg)