Anyone written a version of `term_html:term//2` that writes the term in an expandable/collapsible tree?

Help! Tools
1

Has anyone written a version of term_html:term//2 that writes the term in an expandable/collapsible tree? or created javascript/css to do expansion and collapse on the existing

https://www.swi-prolog.org/pldoc/doc/SWI/library/http/term_html.pl?public_only=false


merged_lexical_segs=[  w(is,
                                   [  ape(pos(quant)),
                                      pos(aux),
                                      loc(1),
                                      ape(lnks(3)),
                                      lnks(1),
                                      txt("is"),
                                      mws('is there'),
                                      ape(link(1,topic,r(topic,seg(1,9)))),
                                      ape(link(2,question,r(question,seg(1,9)))),
                                      ape(link(3,query,r(query,seg(1,10)))),
                                      link(1,'S',r('S',seg(1,10)))  ]),
                                w(there,
                                   [  ape(pos(quant)),
                                      pos(ex),
                                      loc(2),
                                      ape(lnks(3)),
                                      lnks(2),
                                      txt("there"),
                                      mws('is there'),
                                      ape(link(1,topic,r(topic,seg(1,9)))),
                                      ape(link(2,question,r(question,seg(1,9)))),
                                      ape(link(3,query,r(query,seg(1,10)))),
                                      link(1,'NP',r('NP',seg(2,2))),
                                      link(2,'S',r('S',seg(1,10)))  ]),
                    ...
1 Like
2

SWISH does this. If you see a complex term you can click on the functor to collapse it to “…” and clicking on the ellipses expands the term again. The behavior is well hidden and not that friendly. I don’t recall where the source is. I’m sure you can find it :slight_smile: Something more intuitive and better scalable is welcome!

3

OMG, even with all my messing with the guts of SWISH I never realized that the terms answer windows did that… I suppose I shall see how much I like existing code and see if i can add things like expandall vs expand one level down and also having it start with level collapsed

1 Like
4

Just an idea. What if we would highlight the entire term when hovering over its functor? Now it only underlines the functor while hovering. This is a hint that you can click, but clearly not good enough. Some form of highlight for the entire term both makes it easier to see where a term ends (very useful in itself) and might make it clearer that there is more interaction underneath. Next big step forward would be to be able to switch to a tree view. Possibly we could collapse f(a,b,c(more)) into

f(>...)

where > is a nice Unicode character that indicates a tree and clicking that creates something like this (etc.)

f(a,
  b,
  c(>...))

PRs are welcome :slight_smile:

5

I very much like this idea along with the others that you mentioned.

I hopefully will have some PRs in the next weeks.
For anything I do that is too over the top we can always
:- rendering(term_trees).

But for the things you mention here… having it be a default behaviour makes sense

6

If you want some CSS/Javascript for highlighting multiple items when hovering (e.g., hover over a functor or variable and highlight all other instances of it), I might be able to contribute. But you’d need to point me to the places where these things are detected (and the related CSS).

7

@peter.ludemann awesome!

Here:

Here:

and Here:

8

Note that the latter creates a hard ... that cannot be expanded by the user. That is intended to avoid flooding the client with a huge amount of data. We could add a “soft” depth below which you use the fold class.

9

So it’s actually

The other pl-compounds that use infix/prefix/postfix operators as well as pl-lists being expanded or not…

I see the fold class as likely using write_term(Term,[max_depth(2)]). or some such … But generally we’ll likely send everything over so it can still be changed over to the unfolded state by the user

10

Not sure if it’s awesome, but this is the code:

which adds or removes this CSS element:

.src_hover {  /* Added by mouseover on an anchor */
    background-color: lightpink;
    cursor: pointer;
}

An example of its use is here: https://github.com/kamahen/pykythe/blob/d9a4abe92497259726991198eb51b9172f23ad7a/browser/static/src_browser.js#L479

and the callbacks are set up here: https://github.com/kamahen/pykythe/blob/d9a4abe92497259726991198eb51b9172f23ad7a/browser/static/src_browser.js#L443

The code depends on having an array of “anchors” (identified by DOM ids) that can be readily identified by the thing being hovered; onmouseover adds the src_hover class to all those elements and onmouseleave removes the class.

(There might be a better way of doing this but (a) I wrote it when I knew very little about Javascript and (b) I couldn’t find anything better in stackoverflow and friends. Also, I was trying to avoid using any of the Javascript frameworks.)

1 Like