clerk 2023-03-18 | Slack Archive

David Ackerman14:03:38

i'm struggling a bit with composing views in clerk - I am trying to make a function that outputs multiple elements (in this case, a header above a table, and maybe a graph below that). Since the function can only return one value, I am using clerk/col to compose them together vertically. However, then the output shows up as centered and the text is smaller for some reason. I know I can pass some opts to clerk/col but i don't want to set a fixed width, and I don't know how to undo the flexbox layout that seems to be generated by default. I get the sense that I am doing something wrong - any pointers?

David Ackerman14:03:02

(i know i get a lot of flexibility if I use clerk/html but then i don't know how to embed graphs and other built-in clerk elements easily)

David Ackerman14:03:09

basically i want a function that can return a value that is equivalent to:

;; ## some header
(clerk/table some-rows)
(clerk/plotly some-plot)

mkvlr14:03:16

@david.w.ackerman in the latest version of clerk you can just use other viewers inside clerk/html. We’re also working on clerk/fragment that will allow you to return multiple elements that will be spliced into the doc.

❤️ 6

genmeblog15:03:43

This is exactly what I needed for codox-like blocks. I ended with html viewer.

Daniel Slutsky15:03:45

@U5H74UNSF that is nice, could you tell a bit more about clerk/fragment? Will it allow mounting the Clerk component to different div elements in the same document (like the the current Clerk component is mounted to the div with id="clerk-static-app")?

mkvlr19:03:29

@U066L8B18 no, it’s similar to the react fragment, allowing you to return more than one result and have it spliced into the document. Each result can have individual width etc so this will fix https://github.com/nextjournal/clerk/issues/430. Does that make sense?

Daniel Slutsky19:03:38

Ohh, I see, nice, thanks for clarifying.

David Ackerman14:03:56

oh wow, just bumped my version and that works! I would have never thought that embedding a random clerk view inside of hiccup would "just work" and didn't see it in the docs so I didn't even try it

🙌 6

lvh21:03:30

Hi! I'm struggling using with-d3-require. I want to load a random React component:

(def gantt-viewer
  "Displays a Gantt chart with `gantt-task-react`."
  {#_#_:transform-fn clerk/mark-presented
   :render-fn
   '(fn [value]
      (nextjournal.clerk.viewer/html
       [nextjournal.clerk.viewer/with-d3-require {:package ["[email protected]/dist/index.js"]}
        (fn [gtr]
          (.log js/console gtr))]))})

But I get the following error:

invalid module

Show Stacktrace (1 lines)

lvh21:03:48

unpkg suggests that is the right thing to load, though: https://unpkg.com/browse/[email protected]/dist/index.js

lvh21:03:07

maybe there's a better way to load react components via npm in a clerk notebook?

Sam Ritchie23:03:12

https://github.com/mentat-collective/clerk-utils/tree/main/resources/clerk_utils/custom

Sam Ritchie23:03:21

This should help!

lvh23:03:41

hey, thanks! that's what I'm messing with right now; I just created a file called sci_extensions.cljs 😄

💯 2

lvh23:03:10

I don't quite understand why there are 2 cljs namespaces though

lvh23:03:28

is it just that there's 1 (sci-extensions) for hooking into sci, and you wanted to clarify that it can load from wherever?

lvh23:03:37

like, is it just an organization thing, or is it material there are 2

Sam Ritchie23:03:29

That’s correct, that one I like to be separate for it’s side effect of loading in other code ; also the copy-ns code I think needs to be pointed at a different namespace

lvh23:03:51

leda looks super cool too; FWIW the thing I'm trying to do is: • we have data in edn files on disk, which are version controlled • this is great for a lot of reasons, but editing it is often subpar, especially if it's a high-level structured concept and not just a number or whatever • it makes sense to visualize this with clerk but even more sense to modify it with clerk and have the changes be reflected on disk • because it's version controlled, if you want to reset you can, if you want to commit, you can • the idea is to use multi-way-synced-atoms for this via clerk's builtin sync feature

lvh23:03:13

I think all of this is possible but nobody's wired it together in a public project yet (?)

lvh23:03:32

when you develop this, what cider/ide setup do you use? I'm tempted to jack-in both clj & cljs, but i feel like clerk-utils really wants to run the cljs for me

Sam Ritchie23:03:38

Yeah I really just have a repl on the clj side for this dev style

Sam Ritchie23:03:50

Mostly because so much of my code has been about the visual rendering

Sam Ritchie23:03:58

Or cljc for more algorithmic stuff

lvh23:03:29

hot dang, this pretty much worked from the first try

lvh23:03:38

the CSS is totally broken but I'm pretty sure that's not your fault 🙂

lvh23:03:39

I'm surprised there's no css in Leda.cljs!