Observable-based dashboard app

[d_b]

Hi all,

If anyone’s interested, I made a desktop app that embeds the Observable runtime and Alex Garcia’s excellent unofficial Observable compiler.

This app is not a notebook. It’s based off cells, but these are pasted on a 2D canvas, which to me feels a lot more powerful and natural than the 1D vertical layout (which forces you to scroll up and down all the time). It feels a lot like an Excel-based dashboard.

It also has tabs, so that you can organize your cells better.

One of the main draw for making a desktop app is that it allows you to read files from your computer without using attachment (which means you can base the filename on some variable). It also allows you to access http apis which don’t have CORS enabled.

The good part is that almost all you do in Observable works there as well. You can even import Observable notebooks using the usual import statement - of course you should only do this if the license attached to the notebook allows it.

The app’s very rough as of now and missing a lot of things but it’s functional.

You can find it there: www.jigdev.com

Let me know what you guys think.

[Fil]

This is fantastic!!

Immediate feedback:

• I’m always reaching for shift-return to validate a cell
• Do you have specs for jig.chart?
• the individual cell history is a great feature, it would be really neat if it was saved somewhere when we quit.
• I’d love to see “all the code” in some way (besides reading the JSON file); but maybe that would be a board in itself, auto-reading its code.
• suggest that the watch panel could be another board
• would love the code to be compatible with Alex’s .ojs format.
• the website does not seem to indicate if this is a closed-source, open-source, free or paid project.

[d_b]

Hi Fil,

Thank you so much for the great feedback! I am very excited that you like the idea

• Shift-return: ah, I have it as cmd+enter (ctrl on pc). I am a little annoyed by this because I think that it’s Observable that broke the usual pattern (cmd+enter is used in many UIs, it’s also the default in Jupyter - shift+enter is typically used as return carriage when enter means something else…). But er…, I may do both for a while…

• jig.chart(data, option):

  option {
    margin: {top: 20, right: 40, bottom: 30, left: 40} //that's the default
    x: {
      field: 'name of x field in data object array',
      axis: {
        type: 'number' | 'time' | 'log',
        range: 'auto' | [minVal, maxVal]
      }
    },
    y: {
      data: [{
        field: 'name of y field in data object array',
        chartType: 'line' | 'scatter'
      }, {...can have more than one...}],
      axis: {
        type: 'number' | 'time' | 'log',
        range: 'auto' | [minVal, maxVal]
      }
    },
    y2: { ... same as y for 2nd axis } | undefined
  }
  

Not exactly sure that all of it works, and if all of it is going to stay the same. My main goal is to replicate Excel’s charts, which are good enough for most business use cases. And ideally, you’ll be able to create a chart using some kind of wizard, rather than having to remember all the options.

• Saving the node’s history when we quit: while I can see the appeal, I think this would bring more problems than benefits. There is a lot of trial-and-error going on when working on tools like this, and keeping the history of mistakes is not useful. Now, what would be awesome though, is to integrate with git, so that you could browse the git history of the node itself (if you save the file in git).

• ‘All the code’ window: interesting. Yes, I can see how that could be useful. Perhaps when multiple cells are selected, the corresponding code of all cells could be shown in the code editor. Basically the code editor would look like a notebook that only contains the cells we want to see. That or another board as you say. I’ll give it a shot.

• Watch window is fairly standard in programming tools. It’s important that it’s being displayed at all times no matter what tab you’re on. It’s also useful to have a large area to use the inspector (similar to VSCode or Chrome devtools). But yes, I understand your idea here. Maybe something like a “scratch pad” spreadsheet-like board where one could do quick calculations would be neat.

• I didn’t know about Alex’s ojs format. That makes a lot of sense. I could definitely change the format file for jig to match this - although I am a little confused how Alex handles empty lines… I only have a couple more things to add that I could stick in comments. I don’t really have to care about the backward-compatibility of the current format since you’re the only user! Alex’s format is going to play much nicer with git as well. thanks.

• Re: open-source + pricing. Right, the short answer is I don’t know. When I started the project, I was aiming for something like LinqPad for C#. ie. a closed-source free version that you can work with, but then add paid features - like proper intellisense, export to pdf and other things of that nature that business people like. The “jig” functions and other libraries used by the application itself could be open-source. The whole thing wouldn’t be too pricey as I was intending for this to be a one-man operation
  
  I definitely don’t have the financial abilities to work on this long-term without selling my work, but I think this has a lot of potential, so it’s a project I am willing to pursue as my main source of income.
  
  To be perfectly candid, my goal is primarily to be approached by the Observable team and help them develop this “business”-friendly version of Observable (@mbostock @melodymeckfessel: if you’re reading this I would very much like to talk with you ).
  
  In a nutshell my thoughts are:
  
  While the notebook is great, it is very much oriented towards experimentation, ad-hoc analyses and journalism. Businesses also need dashboards, reports and small apps. They don’t really want to “make sense of the world with data”, they want to “make sense of their businesses on a daily basis, with the tools they have, and people who barely know how to code”. In the 2000s, all of this was done with Excel. Then it started to shift in the 2010s, cause people started to realize that Excel wasn’t safe and didn’t play nice online. So businesses started to build web apps internally or use new BI tools like Tableau to fill the massive void left by Excel’s decline. But BI tools lack flexibility and web apps are hard to build. So now Notion, Coda, Retools, AirTable, Mode, are all trying to fix this, with relative success (Excel is still pretty big). But in my humble opinion, there’s still space for something huge. Technically, Observable is the right platform for this. I believe that a business-specific product would kill. I am down to build it myself, but obviously having the Observable brand and funding would make the whole project a lot more doable.
  
  I have been making internal business applications in finance since 2007, and I’ve been building developer tools for 10 years in what has become one of the most successful hedge funds in history. Live-programming in UIs is something that banks have been doing since the late nineties. My claims are not coming from nowhere, I know that space very well.

Sorry, my reply sort of drifted towards an “open letter” or something
But I’m very glad you enjoy the tool - even in its current very raw form.

[Fil]

@d_b

you’re the only user

just an early tester, don’t worry for my jigs; thanks for the detailed replies!

[d_b]

Hi Fil,
Here goes v0.0.2, with the new file format.

Release v0.0.2-beta · jig-dev/jig-releases

It’s way more readable that way and you can open this with Alex’s ojs.
The “jig” functions won’t work with ojs though cause I’d need to export the library somewhere. I’ll do that at some point…

[jrus]

@d_b

Shift-return: ah, I have it as cmd+enter (ctrl on pc). I am a little annoyed by this because I think that it’s Observable that broke the usual pattern (cmd+enter is used in many UIs, it’s also the default in Jupyter - shift+enter is typically used as return carriage when enter means something else…). But er…, I may do both for a while…

The Mac (and before, Lisa) even has a separate key for this: Enter (vs. Return), which on a laptop can be achieved with Fn + Return. But after the Enter key was removed from the main section (left only on the numpad) most software picked some alternate shortcut.

Historically Mac software has often used Opt + Return for committing things (or for inputing line breaks when committing is the default action for Return), but Shift + Return is also common.

I think the best we can say is that there is no strong universal convention. Too bad that the original Mac solution of a dedicated key didn’t stick around on all keyboards.

[mootari]

@d_b Note that both download links currently lead to a 404 because they contain the wrong tag, e.g.:

https://github.com/jig-dev/jig-releases/releases/download/v0.0.1-beta/JIG-0.0.2-beta.dmg

should read

https://github.com/jig-dev/jig-releases/releases/download/v0.0.2-beta/JIG-0.0.2-beta.dmg

[d_b]

@mootari : Geez. Thanks a lot! This is all a bit manual right now…