SAGE3 Features

Applications Supported

Board content is a collection of SAGE3 application windows. Every window is of a specific application type and contains an internal state in line with the purpose of the application, for example, a stickie note window state holds the text on the stickie, the font size, and the color of the stickie, while a pdf window holds a url to the file it is showing, the index of the current page etc. This state is mostly synchronized across SAGE3 clients, however, some applications may support local changes that should not synchronize, such as the muting/unmuting of audio on a video player. Users control the application state either directly in the application window or via an application specific toolbar. Toolbars are contextual to specific applications and only appear when a window is in focus (the user selected it with a click). Toolbars do not scale with the board zoom level and will hover near the selected window, either above or below its position. Toolbars always include buttons to Zoom to app, Duplicate app, and Close app. See some Toolbar examples below:

The SAGE3 beta release has the following applications available:

• Web browser: An embedded webview where users provide URLs and interact with the respective pages. Our webview implementation supports synchronization of URLs and navigation.
• Sticky Note (also known as Quick Note or Post-It Note): Application for text entry, in which the user can select one of 8 available colors for a note and type text that resizes automatically to the size of the note. Notes content can be downloaded.
• Screen Sharing: Application that prompts the user to select which screen or window to share. SAGE3 supports any number of screen shares, and each screen share can be resized and repositioned anywhere on the board. When a screen share is initiated, SAGE3 creates a notification prompting users to zoom to that application window.
• Notepad: Application for collaborative formatted text entry. The notepad supports longform text entries with various styles applied to them (color, bold, text alignment, lists etc.) as well as images dropped into the application window. The resulting document can be downloaded as an html file.
• Leaflet: A map application. Users can search for a location and pan and zoom across the map.
• Kernel Dashboard: Application for the management of Python kernels. In this dashboard, users can create new kernels (which can be made private for the user) and see the status of existing kernels.
• SAGE Cell: Application running Python code that includes an editor and an output panel. The user must select a kernel from the available running kernels to execute the code.

• ChartMaker: A chat-like interface that uses natural language queries to create charts from csv files.

In addition, here are implicit applications initiated by dragging and dropping files on the board space:

• Image Viewer: Shows a JPG, GIF or PNG image. Images can be downloaded.
• Video Viewer: Shows a MOV or MP4 file. Videos can be played, paused and looped. Videos are synchronized across a board, so any display showing that board running the video is synch’ed to the same frame. Videos can be downloaded.
• PDF Viewer: Shows a PDF file. SAGE3 supports multi-page presentation of a PDF file; i.e., a user can indicate that they want to view multiple pages side by side (three pages displayed side-by-side is shown here). Users can move to the next or previous page in the document through the toolbar or keyboard shortcuts. PDFs can be downloaded.
• GeoJSON Viewer: Loads the content of a GeoJSON file on a Leaflet application.
• Jupyter Lab: Shows .IPYNB files (computational notebooks). Use of Jupyter Lab on the front end of SAGE3 is being phased out in favor of SageCells.
• CSVViewer: Shows a table representing an uploaded .CSV file

Window and Application Manipulation

In the SAGE3 beta release, in addition to application window’s support for resizing and repositioning, we also support the selection of multiple application windows and manipulating them as a group.

• Window manipulation: SAGE3 group found that using the title bar as a handle for window positioning was not feasible on an infinite canvas with varying zoom levels, therefore, in the current version of SAGE3, a window can be dragged about using its full area as long as it is not in focus. Focused windows are highlighted with a teal outline and have their toolbar visible around the window periphery. Application toolbars are contextual to the type of application and its current state. To unfocus a window, the user can click away on the board, select another application with a click, or hit ESC. Windows can always be resized by placing the cursor near the boundary of the window until a resize cursor appears and dragging to the desired size.
• Window Group manipulation: Using Shift + drag to create a selection box (see below), users can select multiple windows and perform group actions on them. Currently, available actions include repositioning the selected windows (drag and drop to the new location), Zoom to the selected applications, Duplicate the selected applications, Duplicate and move the selected applications to a different board in the same room, and close all the selected applications. Future versions may add more AI service actions that can be applied to the selected group.

• AI Manipulation: In SAGE3, all the properties of application windows including their internal state and board position are accessible through the python back-end and can be manipulated via code, for example, using SageCell. Currently, back-end manipulation is used in an “Organize Board” action that will reposition the applications on a given board based on their calculated similarity.

Control Widgets

In the SAGE3 beta release, boards are controlled using flexible widget panels that can be minimized and or positioned anywhere on the board. A single main menu widget is always visible and controls the visibility of 6 other panels:

• Annotation Panel: SAGE3 boards include an annotation layer. Users can select a color out of 9 available options and click-drag to draw freely in the board space. Users can erase their own lines, erase all annotation lines, or click on the screen shot button to capture their current view.
• Users Panel: This menu consists of avatars representing all users currently viewing the board. The avatars indicate whether the user is of type ‘wall’ (shown as a colorful square), or ‘client’ (colorful circle). When clicking on one of the avatars in the menu, users can select to:
  • Show Cursor - jumps the user’s view to be centered around the cursor of the avatar’s user
  • Show View - jumps the user's view to the cursor of the avatar’s user and also tries to adjust the zoom level so that the user’s view is as close as possible to the avatar’s user’s view.
  • Follow - similar to show view, but stay persistent as the followed user moves about the board. When activated, follow mode is indicated with a change of the avatar to an eye icon.
  • Unfollow (if following) - will stop follow mode.
• Applications Panel: This menu shows the SAGE3 supported applications. Users can use it to launch applications. When clicking an application name, the window appears in the center of the user's view. The application name can also be dragged and drop to an exact location. See the list of supported applications above.
• Navigation Panel: The Navigation panel includes a mini-map showing a simplified representation of the application windows on the board along with various navigation related functions:
  • Zoom in/Zoom out buttons along with a label showing the current zoom value
  • Button for clearing all applications on the board
  • A “Show all Apps” button that will adjust the zoom and position of the view so it contains in its bounds all of the applications on the board
  • “Lock View” button will prevent the panning and zooming functions on the board via drag and scroll, effectively locking the view to avoid accidental view changes
  • “Organize Apps” is an AI service we are currently testing, it inspects the content of the board and clusters/relocates applications based on similarity.
  • In addition, the mini-map itself also shows the presence of user cursors and view areas, on hover over a window, the title of the window is shown to make it easier to identify applications in the simplified representation, clicking on a window will change your view so it fits in zoom and position to show the clicked application in maximum view. This combination of showing window titles and “jump to” window on click can help with navigation on a cluttered board where the rectangular representation of windows may seem small on the mini-map.
• Assets Panel: The Assets panel provides access to the assets available in the room in which the board resides.
  • Information about the files uploaded to the room includes: filename, file owner (the user who added the file), file type, date modified, when it was added, and the file size.
  • The panel supports searching and sorting through the files.
  • Right-click menu on an asset supports copying the url of the asset, downloading it, or deleting it from the room’s assets store.
  • Double-clicking an asset will try to launch a copy of it with the default application associated with its file type. The window appear in the center of the user's view. Dragging the asset name and dropping it to the board will create a new window with the asset content.
  • An “Upload” button provides an alternative upload option in addition to dragging and dropping content, and can also support “Folder uploads”. The assets store does not preserve folder hierarchies, but will recursively upload content from the selected folder.
  • Multiple assets can be selected with Shift + click and Cmd/Ctrl + click as commonly possible in other file managers (macOS Finder, Windows Explorer, etc.). When multiple assets are selected, they can be dragged to the board to be opened. Also, selected assets can be deleted with a 'Del' key press.
• Plugins Panel: The Plugin panel is a mimic of the application panel in that it allows launching applications, however, while the application panel is dedicated to native SAGE3 applications, plugins are external web-based applications that can be uploaded to SAGE3 by any user from the User Menu Plugins feature.

In addition, to the applications and widgets, the board includes:

• Info: The top-left corner of the board displays the names of the current server, room, and board and, for convenience, the top-right displays a clock (local time at the client’s location)
• User Menu: The User Menu is permanently attached to the bottom-left corner of the board and will include the name of the user as it was entered to the system.

• The User Menu includes the following features:
  • Edit your user Account. Currently, editable properties are: user name, user color, user type (Client or Wall, will determine the shape of the avatar, circle or square respectively, and whether to display a bounding box of the viewport on the board, which is unique to a Wall). It will also indicate if you are logged in (show your email) or are identified as a guest.
  • Plugin feature allows every user to add an external web-based application to sage. From this button the user will be able to upload, manage, and remove plugins associated with them.
  • “Dark/Light mode” will flip the general visuals of the SAGE3 program between dark and light.
  • Copy Board Link will copy to the computer’s pasteboard a full SAGE3 url which includes the “sage3://” directive to open the SAGE3 program, the url of the server, as well as the unique identifiers of the room and the board. These board links can be easily shared with other users (email, chat, slack, etc.) to indicate which board to use.
  • “Back to Room” will return to the list of rooms with the current room selected.
  • “About” button shows some information about the version of SAGE3, its licensing and website.
• Right Click Menu: The SAGE3 beta release currently has a board-level right-click menu (shown here) that appears when clicking an area of the board that does not have an application window. This menu offers some common actions taken from various other panels or menus, and quick application launch. It includes going back to the room, bring controller (will move the main controller to the location of cursor), clear the board, toggle Light/Dark mode, zoom to show all applications on the board, launch a SageCell, a screenshare, a stickie, or a webview, reset the view, toggle snap window positions to grid, toggle showing the interface (i.e. main controller and panels), toggle showing application titles. The future purpose of the right click menu might encapsulate board-level AI actions.

• Notifications: Various actions will trigger notifications in the form of a little textual message at the bottom-center of the board (commonly called “Toasts” by UI designers) that disappear after a few seconds have elapsed.

Server/Room/Board Hierarchy

The SAGE3 program now supports several servers that are made public by the SAGE3 group in addition to private SAGE3 servers maintained by community members.

A bookmarking feature allows users of the SAGE3 client quick access to all bookmarked servers, which by default include the public servers maintained by the SAGE3 group (top left). Users can type a url for a SAGE3 server (for example, if it is private) in an input box (top right), the url will be validated and the user will be directed to that server, where they can choose to add a bookmark for future access.

Once a server is selected, the user is prompted to login either with a 3rd party authentication service or as a guest (bottom left). They are then presented with a list of rooms available to them (some rooms may be private) as well as a list of boards for a given selected room (bottom right).