HTML 5 Leo Viewer

[Joe Orr]

Hi All,

I stopped using Leo for development a few years back because of problems with sentinel lines. However, I recently got back into contracting and needed a tool to find my around a convoluted codebase, so tried out Leo. I realized that with @clean nodes the sentinel line problem has been fixed, which is a very big deal indeed.

Anyway, have been thinking about using Leo to make some outlining documents I can share with others, just for viewing. For example a web page with an outline menu. 

Here is a start:

https://bl.ocks.org/kaleguy/cef095e16e147bc04dd6c5812d732fb2

To see the gist, click on the link at top of page.

I'd like to make this into a Vue.js project on Github unless someone has already got something similar in development.

The idea is a standalone browser-based reader of Leo and MD files which uses some of those cool HTML5 components, like highlight, D3 trees, rich grids, presentation components etc. Also an Electron version.

This could potentially become an alternate front end for Leo, by wrapping the existing Leo in a node server.

I think I might have written the original HTML export stylesheet way back when and this uses a similar approach but converts to JSON in order to use some existing components and Vue. Next up is a version with a D3 tree.

-Joe Orr

[Joe Orr]

D3 demo:

https://bl.ocks.org/kaleguy/57266b6fff9f864403e007e9efd06401

Joe

[Edward K. Ream]

On Sun, Mar 5, 2017 at 1:38 PM, Joe Orr <joe...@gmail.com> wrote:

I stopped using Leo for development a few years back because of problems with sentinel lines. However, I recently got back into contracting and needed a tool to find my around a convoluted codebase, so tried out Leo. I realized that with @clean nodes the sentinel line problem has been fixed, which is a very big deal indeed.

​Well Joe Orr, so good to have you back with us. I've missed you and your many ideas.

Anyway, have been thinking about using Leo to make some outlining documents I can share with others, just for viewing. For example a web page with an outline menu. 

Here is a start:

https://bl.ocks.org/kaleguy/cef095e16e147bc04dd6c5812d732fb2

To see the gist, click on the link at top of page.

I'd like to make this into a Vue.js project on Github unless someone has already got something similar in development.

​The only thing similar is this page, based on leo_to_html.xsl, which I think is pretty feeble. Your expertise and experience in this area are far greater than mine.

The idea is a standalone browser-based reader of Leo and MD files which uses some of those cool HTML5 components, like highlight, D3 trees, rich grids, presentation components etc. Also an Electron version.

This could potentially become an alternate front end for Leo, by wrapping the existing Leo in a node server.

I think I might have written the original HTML export stylesheet way back when and this uses a similar approach but converts to JSON in order to use some existing components and Vue. Next up is a version with a D3 tree.

​

I'll be googling to learn what all this means ;-) Again, it's great to have you back.

Edward

[Edward K. Ream]

On Mon, Mar 6, 2017 at 3:44 AM, Joe Orr <joe...@gmail.com> wrote:

D3 demo:

https://bl.ocks.org/kaleguy/57266b6fff9f864403e007e9efd06401

​Excellent!​

 

​So good to have you back contributing to Leo.  I'll be studying what you have done closely.

Edward

[Edward K. Ream]

On Mon, Mar 6, 2017 at 3:57 AM, Edward K. Ream <edre...@gmail.com> wrote:

On Mon, Mar 6, 2017 at 3:44 AM, Joe Orr <joe...@gmail.com> wrote:

D3 demo:

https://bl.ocks.org/kaleguy/57266b6fff9f864403e007e9efd06401

​Excellent!​

​I've just purchased the ebook you referenced: d3.js tips and tricks.  One reason I did so was to test out the leanpub distribution.  Impressive.

I guess I have to resign myself to always being a bit behind.

Edward

[Joe Orr]

Thanks for the welcome back!

A few more thoughts on this topic:

Cool trees is D3 v4:

https://bl.ocks.org/mbostock/e9ba78a2c1070980d1b530800ce7fa2b

https://bl.ocks.org/mbostock/4063550

I'll get the Leo Viewer project up and running within a week or so on Github. 

I'm currently working in full stack node development with Angular / Vue on front end + D3 at moment so I should be able to leverage some of that. Vue seems better for this project than Angular.

I'm thinking the Leo Viewer could be used to generate some nice display examples from Leo generated content. Could be a good way to introduce more people to Leo. Besides D3 there are other HTML5 components that could be added fairly easily. For example I'm also thinking it would be cool to have reveal.js make a slide show out of a subtree.

Once the viewer is useful, it is simple to make an Electron version, which makes it a complete cross platform desktop app:

https://electron.atom.io/

And once that is working, the viewer could become an alternate front end to the existing Leo program by wrapping Leo in a node server. Node can talk to Python.

Another thing to think about down the road is making a version of Leo from Atom, basically a similar technique (wrap Python in node).

https://github.com/atom/atom. Already thought of a good name for it: @Leo :-)

Joe

On Monday, March 6, 2017 at 5:06:25 AM UTC-5, Edward K. Ream wrote:

On Mon, Mar 6, 2017 at 3:57 AM, Edward K. Ream <edre...@gmail.com> wrote:

On Mon, Mar 6, 2017 at 3:44 AM, Joe Orr <joe...@gmail.com> wrote:

D3 demo:

https://bl.ocks.org/kaleguy/57266b6fff9f864403e007e9efd06401

​Excellent!​

​I've just purchased the ebook you referenced: d3.js tips and tricks.  One reason I did so was to test out the leanphttps://leanpub.com/bookstoreub distribution.  Impressive.

[Edward K. Ream]

On Mon, Mar 6, 2017 at 4:36 AM, Joe Orr <joe...@gmail.com> wrote:

Thanks for the welcome back!

​You're welcome. It's truly great to have you back.​

 

A few more thoughts on this topic:

Cool trees is D3 v4:

https://bl.ocks.org/mbostock/e9ba78a2c1070980d1b530800ce7fa2b

https://bl.ocks.org/mbostock/4063550

​Impressive.  These kinds of radial trees are common in genetics.​

 

I'll get the Leo Viewer project up and running within a week or so on Github. 

I'm currently working in full stack node development with Angular / Vue on front end + D3 at moment so I should be able to leverage some of that. Vue seems better for this project than Angular.

​I hadn't heard about either d3 or vue until yesterday. ​

 

​Keeping up with the js world seems like another full-time job.
​

I'm thinking the Leo Viewer could be used to generate some nice display examples from Leo generated content. Could be a good way to introduce more people to Leo.

​The lack of pizazz in Leo's intro is a kinda like the weather.  Easy to complain about it.  Glad to see you have plans to do something about it ;-) ​

Besides D3 there are other HTML5 components that could be added fairly easily. For example I'm also thinking it would be cool to have reveal.js make a slide show out of a subtree.

​Yet another thing to google.  Great stuff.​

 

Once the viewer is useful, it is simple to make an Electron version, which makes it a complete cross platform desktop app:

https://electron.atom.io/

​Wow.  This video from the atom page explains the idea.​

 

And once that is working, the viewer could become an alternate front end to the existing Leo program by wrapping Leo in a node server. Node can talk to Python.

​On the agenda for this year is incorporating pyzo's client-server architecture (yoton) into Leo.​

 

​ Not sure how this relates to a node server.​  Maybe electron/atom will replace that goal.

Another thing to think about down the road is making a version of Leo from Atom, basically a similar technique (wrap Python in node).

https://github.com/atom/atom. Already thought of a good name for it: @Leo :-)

​Alright then. We have our work cut out for us!  Many thanks, Joe, for all these great ideas.

Edward

[john lunzer]

There is certainly a lot to think about here. As Edward stated, keeping up with the Javascript world is a daunting task if you've already deeply immersed in a whole other world. 

To address your OP, there is currently a long term goal of investigating using Flexx to build a web-based GUI for Leo. It's definitely long term, there are plenty of other priorities in Leo's core. I encourage you to take a look at Flexx as well as the JS GUI Widget framework it is built on, Phosphor. While Phosphor is not yet super popular I predict its popularity will rise when JupyterLab (which is also built on Phosphor) comes out of alpha. 

As you can see there is a strong desire in the Python universe to harness web-based GUIs.

If you plan on using Vue and your project grows to any reasonable size then I encourage you take a look at Vuex which offers some tools and constructs to help organize Vue projects.

[john lunzer]

The differentiating factor in using Flexx rather than building the UI elements directly in Javascript is the "talking to" part. The Flexx UI Framework has built up a robust two way communication system between Python and JS which I think would be difficult to replicate. 

I'm not trying to derail your enthusiasm, but I wouldn't want you to spend your personal time on something where a reasonable solution may already exist. Although if you're more comfortable in JS than Python Flexx may be a non-starter.

Anyway, I'm excited to see what comes out of your work.

[Edward K. Ream]

On Monday, March 6, 2017 at 7:52:43 AM UTC-6, john lunzer wrote:

The differentiating factor in using Flexx rather than building the UI elements directly in Javascript is the "talking to" part. The Flexx UI Framework has built up a robust two way communication system between Python and JS which I think would be difficult to replicate.

That sounds extremely useful. This is going to be the year of client/server Leo. How that plays out is mysterious at present.

wouldn't [you want] to spend your personal time on something where a reasonable solution may already exist.

Oh yes, definitely.

Although if you're more comfortable in JS than Python Flexx may be a non-starter.

Hehe. As much as possible of Leo's existing python code must remain.  I'll reject any proposal to rewrite, say, leoAtFile.py or leoNodes.py in js. Leo is, after all, about Python first.

A browser-based gui does have advantages.  For example, atom supports many languages. (Do Ctrl-Shift-L to see them.) Atom proves that syntax coloring in js can be very fast.  Furthermore, Atom's syntax coloring supports true solarized colors.  That is, selected text is shown correctly.

Edward

[Joe Orr]

I took a look at the Flexx website, says it's in alpha... I'll leave that to you Python experts, I'm all in on JS ;-)

I'll get something posted to Github this week or next. I think a standalone Leo Viewer project will have some advantages regardless separate from the Leo program itself. But I'm guessing it will be fairly easy to make a restful server with node + Leo (Python) at some point in which case some of the client code could end up being an alternate front end for Leo. Or the server would be a way to bring Leo's core functionality into Atom. I'll take a stab at after I get the Leo Viewer to a useful point. Atom / Electron are basically just a package of browser + node.

BTW, while we're on the topic of awesome open source web components, don't forget https://ace.c9.io/#nav=about

Yes, was looking at Vuex and will probably use it, although the viewer might not have a lot of state to track.

Joe

[Arjan]

Regarding Atom, it might be interesting to take a look at Visual Studio Code as well https://code.visualstudio.com. Very similar, also an Electron app, but much faster opening of large files, and more snappy in general (unless Atom improved a lot recently).

Arjan

[john lunzer]

Last time I used Atom this was one of my big complaints, though these days I feel like most editors have performance issues in one way or another.

[Joe Orr]

OK I have something at least minimally useful posted to Github for the Leo Viewer (HTML 5 Viewer) project.

https://github.com/kaleguy/leoviewer

The live version is here:

https://kaleguy.github.io/leoviewer/#/

I have only tested it in Chrome with simple outlines, so there are probably files out there that will not display properly. I'll see if I can add an upload version soon but in the meantime in order to try it you have to download it. Anyone out there that tries it and has problems let me know, looking for good test cases.

Edward, would it be possible to get leoeditor.com working with https? I was going to put some pages from the site into the outline, but Github pages hosts on https, so I can call insecure content.

Joe

[Edward K. Ream]

On Sun, Apr 2, 2017 at 8:31 PM, Joe Orr <joe...@gmail.com> wrote:

OK I have something at least minimally useful posted to Github for the Leo Viewer (HTML 5 Viewer) project.

https://github.com/kaleguy/leoviewer

​Wow.  This is a superb introduction to Leo. There should be a prominent link to it on Leo's home page.​

The live version is here:

https://kaleguy.github.io/leoviewer/#/

​When I drag, say, CheatSheet.leo to the live page I get a message:

This XML file does not appear to have any style information associated with it. The document tree is shown below.  Is this what you expect?

 

Edward, would it be possible to get leoeditor.com working with https? I was going to put some pages from the site into the outline, but Github pages hosts on https, so I can call insecure content.

​My brother Speed hosts Leo's site.  I'll ask him.

Edward

[Edward K. Ream]

On Sunday, April 2, 2017 at 8:31:36 PM UTC-5, Joe Orr wrote:

OK I have something at least minimally useful posted to Github for the Leo Viewer (HTML 5 Viewer) project.

https://github.com/kaleguy/leoviewer

So, kale guy, this is one of my favorite New Yorker cartoons. Hehe.

Edward

[Joe Orr]

An actual gravestone in Park Slope.

I own this company: www.thekalefactory.com, that's why the moniker. Doesn't pay the bills though so still have a software day job. 

Joe

[Joe Orr]

It doesn't have any file upload capability. In fact it the filename (docs.leo) is hardcoded and expected to be in a particular place.

I'll be adding upload capability etc soon but in meantime, you have to run it from a server. Easiest way to do that is to fork it and run from github pages. I added a couple sentences to the installation section. Let me know if I should add more to make it clearer.

What it is useful for already is to document a Github project. Just copy the files in the dist folder to the docs folder, turn on github pages, and that's your project home page. 

Come to think of it, might be worth considering moving the leo site to Github pages if you haven't already thought about that. That way the site can be an open source project as well. 

Joe 

[Joe Orr]

BTW, just thought I'd mention that the code for Leo Viewer will all eventually be in the same Leo file with copious explanations. Not doing that yet because too much missing and code needs to be moved around a lot. I'm going to document another small but complete project of mine as a test case.

[Edward K. Ream]

On Mon, Apr 3, 2017 at 8:07 PM, Joe Orr <joe...@gmail.com> wrote:

It doesn't have any file upload capability. In fact it the filename (docs.leo) is hardcoded and expected to be in a particular place.

​Fair enough.  I'd like to link from Leo's home page to your intro to Leo ​asap. Is the url stable enough to use now?

Come to think of it, might be worth considering moving the leo site to Github pages if you haven't already thought about that. That way the site can be an open source project as well. 

​I'll consider it.

Edward

[Joe Orr]

Let's wait a week or two while I test and add a couple of features. The install instructions for Leo need to be updated too, will post separately about that. Also, running into problems now with @clean nodes, will do separate post.

Joe

[Joe Orr]

OK, got a few more features added.

- Drag and Drop

- Inline View (switch by menu icon upper right)

- Animation

- Navigation (buttons on sibling pages, history buttons on menubar)

- Pass in filename as parameter

I watched the Engelbart video and thought it would be good to add inline view. I'm not sure the design is perfect, feedback welcome. I figured inline mode needs animated open/close or it is too confusing, so I added that. 

I need to add the following before it is ready to promote:

- search

- SEO version (create static files)

- D3 tree

- Include sub leo file (load in leo file from node)

- Accordion mode toggle (opening a node causes all other nodes to close except ancestor nodes)

- Some more docs

Those are pretty straightforward so probably ready in a couple of weeks. Plus it needs more testing. Bug reports very welcome. 

Also anyone got any nice example trees? You can DnD the file onto Leo viewer, if it breaks, make a branch on Github and put the file in src/static/examples and I'll fix.

Edward, any suggestions on Leo files to put into Leo Viewer for demo purposes? 

Joe

[Eric S. Johansson]

On Monday, March 6, 2017 at 7:50:45 PM UTC-5, Edward K. Ream wrote:

Hehe. As much as possible of Leo's existing python code must remain.  I'll reject any proposal to rewrite, say, leoAtFile.py or leoNodes.py in js. Leo is, after all, about Python first.

you do know about brython (python 3 in browser)?  it keeps me from having to touch too much JS but still lets me interoperate with it when I need to.  if you want a browser based leo, it may be a place to start.

[Edward K. Ream]

On Mon, Apr 24, 2017 at 7:58 PM, Eric S. Johansson <ynotla...@gmail.com> wrote:

you do know about brython (python 3 in browser)?  it keeps me from having to touch too much JS but still lets me interoperate with it when I need to.  if you want a browser based leo, it may be a place to start.

​Thanks for this link.  And this stack overflow page discusses the pros and cons between brython and transcript.​

 

​I hadn't heard of either brython or transcript before today :-)

Edward

[Kent Tenney]

I've done some work with Brython, really cool code, heavily developed,

good community.

As I understand, Brython is further distanced from JS than Transcript,

more thoroughly Pythonic. Better for me, maybe not as good for

someone knowing JS.

--
You received this message because you are subscribed to the Google Groups "leo-editor" group.
To unsubscribe from this group and stop receiving emails from it, send an email to leo-editor+unsubscribe@googlegroups.com.
To post to this group, send email to leo-e...@googlegroups.com.
Visit this group at https://groups.google.com/group/leo-editor.
For more options, visit https://groups.google.com/d/optout.

[Edward K. Ream]

On Tuesday, April 25, 2017 at 8:54:31 AM UTC-5, Kent Tenney wrote:

I've done some work with Brython, really cool code, heavily developed, good community.

Good to know.  I'll check into it.

I've just made a note that the html importer should preserve indentation with <script> elements.  Not sure how easy this will be to do, but it's worth doing.

Edward

[Joe Orr]

Just posted an updated version.

New features:

* D3 Trees

* Nested menus

* Subtrees (node can point to another Leo file)

* Works with trunkless trees now

https://github.com/kaleguy/leoviewer

Edward, this one is fairly stable so you can link to it if you want.

I was going to use the LeoDocs file as a demo, but it has a lot of rst panes, and Leoviewer doesn't support rst. Is it simple to convert those to md or html?

Still need to make the SEO/static feature + search, but going to pause to generate some content. Working on converting the Shakespeare files now.

Joe

[Edward K. Ream]

On Wed, May 24, 2017 at 4:43 AM, Joe Orr <joe...@gmail.com> wrote:

Just posted an updated version.

New features:

* D3 Trees

* Nested menus

* Subtrees (node can point to another Leo file)

* Works with trunkless trees now

https://github.com/kaleguy/leoviewer

​
Many thanks for this work.​

I was going to use the LeoDocs file as a demo, but it has a lot of rst panes, and Leoviewer doesn't support rst.

 

​Not sure what you mean by "rst pane". There are many @rst trees, which you can optionally render in the viewrendered pane.
​

Is it simple to convert those to md or html?

​

There are several possible answers:

1. You can use the rst3 command to convert one or more @rst3 trees to .rst.txt files in leo/doc/html.  Then, from that directory, you can use "make html". This assumes you have sphinx installed.

2. Leo doesn't have a command like the rst3 command to make markdown files. Instead, you can use @auto-md to create .md files. There are several examples in leo/doc/leoDocs.leo.

Important: At present, you have to generate tables of contents "by hand", using the "make-md-toc" button. That is, you select the root of a tree you for which you want the toc and press the button.  The button writes the toc to the console. You copy it from the console to the desired location in the outline.  Saving the outline causes @auto-md to write the toc.

It wouldn't be too hard have "@button make-md-toc" do more automatically.  Suppose we define a "placeholder" directive, say @md-toc.  The script could replace @md-toc with the generated toc...

Still not sure whether I have answered your question :-) I'd be happy to discuss this further.  Leo really should have better support for markdown. The markdown analog of the rst3 command would be much simpler than the rst3 code.

Edward