Extending the Notebook UI

Lou D’Andria
Senior User Interface Developer
Wolfram Research

Contextual interfaces in Wolfram Notebooks continue to enable new and interesting approaches to interface design. In this talk, we will review the rudiments of attached cells, examine existing uses of this flexible technology, and show some of the exciting new features we’re building, as we continue to expand the interface capabilities of the Wolfram Language.

Why are attached cells?

Contextual interfaces, available only where they’re needed.

Canvas

Canvas[ImageSize -> Small]

Code analysis

f[x0_]:=Module[{x=x0, y=1},While[x>0,x=Log[x]];x]

Predictive interface / Suggestions Bar

2D and 3D image editors

Format type toggle in Wolfram|Alpha Notebook Edition

Too many more to itemize…

What are attached cells?

AttachCell[]: Arbitrary content drawn near arbitrary locations in a notebook window.

covered extensively in my talk from last year: https://shar.es/aWCNS4

AttachCell[_NotebookObject | _CellObject | _BoxObject, whatToAttach_, whereToAttach___]

BarcodeImage["https://shar.es/aWCNS4","QR",{100,100}]

Attached cells are not part of the notebook model, and are not saved with the notebook.

So they won’t survive copy/paste either.

Attached cells can contain arbitrary content, including controls, input fields, etc.

Attached cells are typically drawn on top of other notebook content.

Attaching multiple cells at the same position might cause visual chaos.

Attachments can be triggered automatically or manually

Button clicks and other mouse activity

Dynamic updates

Initialization option

Attached cells can be removed automatically or manually

RemovalConditions

NotebookDelete

Automatic removal when the parent is deleted

Attachment points

Almost any (1) location in any notebook is supported, relative to:

a BoxObject

Left, Right, Bottom, Top, Center; Absolute, Scaled, Offset

a CellObject

Left, Right, Bottom, Top, Center; Absolute, Scaled, Offset

“Inline” is the only attachment point that pushes other content out of the way.

“CellBracket”

a NotebookObject

Left, Right, Bottom, Top, Center; Absolute, Scaled, Offset

(1) Note that attaching to content inside of docked cells is not supported.

New in 13.0: Listing Attached Cells

AttachCell returns a CellObject.

AttachCell[Style["●", 36]]

NotebookDelete[%]

But… How do you get the CellObject for an attached cell that already exists?

cellobj=EvaluationCell[];
Do[AttachCell[cellobj,Style["●", 36,FontColor -> Opacity[0.5,Purple]],{h,v}],
{h,{Right,Left}},{v,{Top,Bottom}}]

Cells[cellobj, "AttachedCell" -> True]

NotebookDelete[%]

Remember: Chained attached cells are removed when the root of the chain is deleted.

Nest[AttachCell[#, Style["↑", 36, Orange],{Center,Bottom},0,{Center,Top}]&,cellobj,5];

Cells[cellobj, "AttachedCell" -> True]

NotebookDelete[%]

Coming Attractions

Not in 13.0

Define some experimental functions…

Get[FileNameJoin[{NotebookDirectory[], "ComingAttractions.wl"}]];

The names of all these functions almost certainly will change

For the rest of this talk, all WL code should be considered pseudo-code

and won’t work for you, unless you have a front end from the future

Coming Attraction: Light Box

A light box is an overlay intended to illuminate a single piece of information

CreateLightbox["This is a lightbox."];

In-notebook version of a modal dialog

important for mobile, which doesn’t use multi-window model

Cloud uses a similar approach for dialogs in general

Displaying content on a bigger canvas

Manipulate[Multicolumn[Button[Hyperlink[Last[#]], CreateLightbox[ExampleData[#], #],Appearance->None, Method -> "Queued"]& /@ ExampleData[type],3,ItemSize -> Scaled[0.3]],{{type,"AerialImage","data type"},ExampleData[]},"Choose an item below to display it in a lightbox", SynchronousUpdating->False]

Problem: Some Places Are Too Popular

Many different interfaces and annotations are interested in the real estate near the cell bracket.

Minimized suggestions bar

Gear menu (Cloud)

Wolfram Language help, FormatType toggle (Wolfram|Alpha Notebook Edition)

Code Analysis

Even an example from last year’s talk

Unfortunately, overcrowding is common, and only going to get worse.

Solution: Cell Tray

Assemble cell operations from near the cell bracket

New attachment point management

New persistence characteristics

New suite of attached interfaces

New interface management

Demo: Work in progress

Cell Tray: Temporary Interfaces

Some items in the cell tray have the same ephemeral nature as standard attached cells

Automatic layout near the cell bracket, while avoiding overlaps

Current world

old=EvaluationCell[];

AttachCell[old,"one","CellBracket"];

AttachCell[old,"two","CellBracket"];

AttachCell[old,"three","CellBracket"];

Future world

new = EvaluationCell[];

CellTrayAttach[new,"one"];

CellTrayAttach[new,"two"];

CellTrayAttach[new,"three"];

Example: Which cell is currently evaluating?

WithCleanup[
obj=CellTrayAttach[Style["←", 24]],
Pause[4],
NotebookDelete[obj]]

; ;

withPulse[Pause[2]]

withPulse[Pause[2], Purple]

withPulse[Pause[1];withPulse[Pause[2];withPulse[Pause[3],Blue],Green],Red]

Example: Evaluation monitoring and control

We intend to provide a standard set of cell tray interfaces for general use, which can be referenced by their name.

CellTrayAttach["Pulse"];

CellTrayAttach["Abort"];

CellTrayAttach["Timer"];

withCellTrayMonitor[Do[PrimeQ[i],{i,10^7}]];

withCellTrayMonitor[Do[PrimeQ[i],{i,10^8}]];

Cell Tray: Persistent Interfaces

Kernels are temporary, but notebooks are forever

Cell Tray interfaces and their metadata can be serialized in a cell option

This means they can be set in style definitions!

(* for instance, for "Code" style cells *)
2 + 2

interfaces are always available, but maybe not always shown

might display only when that cell has focus

might display only when some other condition is met

options to control sorting and other metadata.

Library of named interfaces

The Gear menu (Kevin Daily)

CellTrayAdd["Gear"];

CellTags management (Kevin Daily)

CellTrayAdd["Tags"];

others being researched…

CellTrayPalette[]

Cell tray actively manages the layout of both persistent and temporary items

CellTrayRemove[All];
CellTrayAdd["Gear"];
withCellTrayMonitor @ (
withPulse[Pause[2];CellTrayAdd["Favorite"]];
Pause[1];
withPulse[withPulse[Pause[2], Pink], Blue]
);

That’s Cell Tray

What do you think?

Notebook Front End office hour later today

Cell Tray Team

Lead Developer:	Jason Abernathy
Widget Wizard:	Kevin Daily
UI Architect:		Ian Hojnicki
UI Director:		John Fultz

Other Coming Attractions

Renaming existing iconized objects

Interactive annotation of objects

Language support for building ribbons like the Image Editor or Predictive Interface

New and surprising ways to get and use BoxObjects

All your brilliant ideas…