dashboard-as-ide

A datascience IDE has a number of common parts:

• Code editor
• Notebook editor and viewer
• Plot window
• Table/variable viewer
• Help documentation
• File explorer/manager/tree
• Notebook preview
• Command terminal

Maybe others as well

Many of these naturally fit into dashboards.

Rather than add features to an IDE to make it more like a dashboard, build a dashboard that has all the features of a code editor IDE and the rest.

More detail

More detailed description.

Resources to explore

Docking Layouts

• GoldenLayout
• Dockview
• Flex Layout
• DockSpawn
• PhosphorJS

Drag and drop panels

https://interactjs.io/pro/

Split Resizeable Panels

• https://github.com/Tom-Rawlings/Resizable.js/blob/master/resizable.js
• https://github.com/cfware/panel-splitter
• https://github.com/nathancahill/split
• https://github.com/ashduckett/PureJS-SplitterBar

Layout Docks and Panels

• https://github.com/Flyer53/jsPanel4
• https://gridstackjs.com/#
• https://golden-layout.com/
• GoldenLayout- a multi-window javascript layout manager for webapps
• SlickGrid Home
• gridster.js
• Masonry · Methods
• Isotope · packery
• mathuodockview Zero dependency layout manager and builder with ReactJS support
• Contributors to FransebasFlexLayout
• Contributors to caplinFlexLayout
• https://github.com/node-projects/dock-spawn-ts

Draggable tabs

https://jqueryui.com/tabs/#sortable

UI Kits

• https://github.com/vitmalina/w2ui
• https://github.com/tabler/tabler
• https://webix.com/javascript-dashboards/
• http://www.jeasyui.com/

Panels

• Drag and drop
• Resizeable
• Drop down in each panel to choose which dashboard widgets will go in the panel
• Drag splitters
• Add and remove

Window Manager

• https://github.com/nextapps-de/winbox

Table viewer/editor

• Must sort
• Edit is dangerous
• Other variables?

File explorer

• Tree
• Tree and details
• Details table

Command Line

• https://www.jqueryscript.net/text/jQuery-Command-Line-Interpreter-Plugin-Terminal-Emulator.html

Code editor

• Codemirror
• Autocomplete

Command terminal

• https://www.jqueryscript.net/text/jQuery-Command-Line-Interpreter-Plugin-Terminal-Emulator.html

Notebook

• https://github.com/JoelOtter/kajero
• https://github.com/runkitdev
• https://github.com/qiushiyan/js-notebook
• https://github.com/jorgehpo/notebookJS
• https://starboard.gg/
• https://github.com/gzuidhof/starboard-notebook

Notes

If I search for "drag and drop panels" or "drag and drop tabs" I mostly come up with grid libraries allow resizing and/or drag&drop where other grids/panels move and resize to accommodate:

• Gridster
• Gridstack
• ResizeableJS
• Isotope
• Others