Integrate Thebe

[eliselavy]

Scenario needs to be testing:

• connection with mybinder
• rededition of the code
• execution notebook

In parallel with new UX integration

REACT_APP_PROXY=https://journalofdigitalhistory.org/
REACT_APP_THEBE_TOKEN=some-development-token
REACT_APP_THEBE_DEV_BINDER=true

?v=3 to test

[danieleguido]

Design challenges

for @biumiamy :D

• "Play with the article" to be transformed, how the new modality works with "open in binder" and "check on Github"?
• notebooks are linear, we can't have layer anymore Concept of hermeneutic layer should change (background?)
• How to start the interaction mode?
• status and logs of the server
• Status and actions of each cell (Run cell, Run all cells before)
• Editor mode should act like open leaf with output on the right
• Question: AI assistance?
• add syntax highlight ion current codemirror editor

AI explain code

Example of "AI exlain" from https://www.datacamp.com/tutorial/python-linked-lists see also: https://community.openai.com/t/explaining-the-code-on-your-browser-at-the-click-of-a-button/14647

table of contents?

with multiple layers already visible, better to hide it

[biumiamy]

example from Observable

[eliselavy]

@eliselavy
Jupyter button needs to take url from the database

[biumiamy]

useable article: http://10.240.4.179/en/notebook-viewer/JTJGcHJveHktZ2l0aHVidXNlcmNvbnRlbnQlMkZqZGgtb2JzZXJ2ZXIlMkZqbmtxcVRUS1c4a20lMkZtYWluJTJGcGFwZXIuaXB5bmI=?v=3

Here is the repo: https://github.com/jdh-observer/jnkqqTTKW8km

Women in Early Modern Handwritten News: Random Walks and Semantic Wanderings in the Medici Archive

[biumiamy]

ToC in Observable

[eliselavy]

See figma / video in slack

• Estimate time in order to be ready for DH Washington
• Start session in the background?

[danieleguido]

see PR #637

[biumiamy]

desired outcome:

• article in Digital Tools
• guideline update
• v3 design with explain code

ToDos:

• Collapsed Codemirror Cells: Expand on click and enable write mode
• Code Cell Output: The output result of a code cell should have the same background so that it’s clear it’s a direct output. Figure captions can be white on a black background.
• Simpler Table of Content: Tailored to the new layout, possibly for me? Show the cell being executed with a simple green dot.

Other Minor Changes:

• Remove numbers from the layer top as there’s no special meaning for them, or reduce their font size.
• Adapt the black background to a dark purple for code cells.

On the Roadmap to Washington DC:

• Connect “run code cell” with “start” and add a pending status for the run code cell button.
• When the kernel connection starts, the run code cell has a ready status.
• When a cell is executing, the run code cell button has an executing status.
• When a cell is executed, a green tick appears with the last execution datetime (to be refined at a later stage).
• Status can be shown in button

Two levels of code

• if the tag is data = editable code
• show/hide collapse button for the rest (read-only mode)
• cover stays cover, dont show any code

Change name:

• change data to "data / code"
• delete 1, 2, 3? or what is meaning

Table of Contents: @danieleguido

• left side like in Figma

• design the status btn & error msg @biumiamy