Applications
BoardLink is an application that allows users to paste SAGE3 board links onto the canvas, enabling other users to quickly navigate to the linked board. When a link is pasted, a preview of the linked board is displayed as a minimap, showcasing a snapshot of all the applications on that board. This preview provides users with a visual overview of the linked board's layout, helping them understand its contents before navigating. BoardLink enhances collaboration by allowing users to easily reference and access other boards within the SAGE3 environment, streamlining workflows and improving navigation between boards.
CSVViewer is a simple application for viewing CSV files. It does not support data manipulation but allows users to upload CSV files to the asset manager, where they are automatically opened in the viewer. Files are parsed on the client side using the csv-parse library, which has the potential to handle large files via its stream API, though this feature is not yet implemented. The table is rendered using React Virtuoso, a high-performance virtualized list component for efficient handling of large datasets.
Calculator is a simple application for performing basic arithmetic operations, including addition, subtraction, multiplication, and division. It allows users to quickly input and calculate values with real-time updates. Users can also view their past calculation history, making it easy to reference previous results.
DeepZoom Viewer is an application for viewing DeepZoom images, a tiled format used to display large images efficiently. DeepZoom is supported by many frameworks, making it a versatile format for high-resolution images. Large images are processed using VIPS and converted to DeepZoom format, producing a .dzi file and a directory of tiles that must be hosted on a web server. The application uses the OpenSeadragon library to display and navigate the images smoothly.
The Chat application within SAGE3 allows users to communicate with each other and interact with an AI assistant by using the "@S" prefix in their chat input. This application leverages the 2D infinite canvas, enabling users to place and organize chat windows alongside other applications. The spatial layout of the canvas offers a flexible communication environment, allowing users to engage in multiple conversations simultaneously while maintaining context and flow. By grouping and repositioning chat windows, users can easily track ongoing discussions and collaborate effectively. This setup not only enhances the usability of individual and group chats but also fosters a more dynamic and interactive experience by integrating communication with other tools and applications on the canvas.
The CodeEditor application facilitates collaborative code writing in real-time using Yjs for synchronization. It supports a variety of programming languages, including C, C++, C#, CSS, HTML, Java, JavaScript, JSON, Markdown, Python, R, TypeScript, and YAML. The application allows multiple users to work on the same code simultaneously, with changes made by one user being instantly reflected for all participants. This real-time collaboration feature supports a range of activities such as pair programming, code review, and joint problem-solving. The editor is designed to maintain synchronization across users, ensuring that all contributors are working with the most up-to-date version of the code.
The ImageViewer application displays images in various formats, including JPEG, PNG, and others, supported upon upload to the asset manager. HEIC files are not currently supported, as they require a native library to be installed on the server. After uploading, images are scaled to multiple resolutions and converted to the web-compatible WebP format. The original image is retained for download but converted to JPEG for compatibility. The viewer dynamically adjusts based on the window size, display DPI, and board scale to ensure an optimal resolution.
The map application utilizes the MapGL library, enabling users to navigate the map using either the mouse or keyboard for a flexible and interactive experience. Navigation is synchronized across all users, ensuring that all participants are viewing the same area in real time, providing a consistent and collaborative experience. Users can easily switch between street view and satellite view, allowing them to choose the most suitable perspective for their needs. Additionally, an input box allows users to type a specific location, automatically centering the map at that location for easier exploration. The application offers an intuitive interface that supports collaborative interaction and dynamic navigation, making it suitable for group activities or shared exploration.
Notepad is a collaborative text editor that enables multiple users to work on the same document in real time. It uses the Quill library to display and format text, allowing for basic text styling. Users can download the produced text as an HTML file for further use or sharing. Collaboration is implemented through a peer-to-peer architecture using Yjs, where text changes (deltas) are exchanged directly between users, ensuring real-time synchronization. The text is stored in the SAGE3 application state as necessary, maintaining consistency across different sessions. This setup allows for effective collaboration on shared documents while maintaining an efficient and synchronized workflow.
The PDF Viewer is an application for viewing PDF files. PDF files are uploaded to the asset manager and automatically opened in the application. These files are processed in the backend using pdf.js, converting them into images at multiple resolutions for display. Users can navigate through pages, with page navigation synchronized across all participants. Multiple pages can be displayed simultaneously to maximize screen space. The PDF file can be downloaded from the application, retaining the original PDF format.
The poll application enables users to create polls and vote on various options. Users can set a title for the poll and add multiple options for voting. Once the poll is created, participants can cast their votes for their preferred choices. The application displays real-time results as a horizontal bar graph, providing a clear visual representation of the votes. As votes are submitted, the graph is updated immediately, allowing all users to see the current distribution of votes. This application is designed to facilitate simple and interactive polling, offering immediate feedback on poll results.
SAGECell is a computational cell application that allows users to enter and execute Python code within a cell, utilizing a Jupyter kernel on the backend. The results of code execution are displayed directly in the cell, supporting various output formats such as text, markdown, images, PDF, HTML, and Plotly. Cells are resizable and can be moved around the board, with synchronization across all users powered by Yjs to maintain consistency. Users can download Python code as a '.py' file and upload it to the asset manager, where opening the file will generate a new cell with the code. Additionally, code cells can be duplicated for quick prototyping. The application uses the Monaco editor, providing an efficient environment for writing and editing Python code.
Screenshare enables screen sharing through a peer-to-peer connection, with Twilio used as a support service to manage users and rooms. The server needs to be configured with a Twilio API key to support the application. The application uses the twilio-video npm package to handle the screen sharing session. Users can select either a monitor or a window to share, with video quality automatically adjusted to the available bandwidth. The video is synchronized across all users. Sessions are limited to 75 minutes by default, but new sessions can be started immediately. If the user sharing their screen leaves the board, the session closes automatically, though it can also be manually terminated. Multiple users can share their screens simultaneously.
The Stickie application allows users to create and manage virtual post-it notes on a shared board. Notes can be resized and the font size adjusted to suit the user's needs. Each note is synchronized across all users, ensuring consistency in real-time collaboration. Users can download notes as Text or Markdown files, with '.md' files opening as new notes when imported from the asset manager. Notes can be customized by selecting different colors and locking them to prevent editing by other users.
The Timer application allows users to set and manage countdown timers that are synchronized across all participants. Any changes, such as starting, pausing, or resetting the timer, are immediately reflected for all users to maintain consistency. The timer displays countdowns, with users able to set specific intervals for various tasks or activities. Multiple countdown timers can be run simultaneously, all synchronized in real-time to provide a unified experience for everyone.
TLDraw is a collaborative drawing application that allows users to create and edit drawings in real-time on a shared canvas. Users can select from a variety of drawing tools, including pens, shapes, and colors, to create their artwork. The canvas supports multiple layers, allowing users to organize and edit different elements of their drawings separately. All actions on the canvas, such as drawing or moving objects, are synchronized across all users, ensuring that the changes are instantly reflected for everyone. TLDraw supports features such as undo/redo, zooming, and panning, providing a flexible and user-friendly environment for collaborative drawing. The application is useful for brainstorming sessions, design collaborations, or any activity that involves real-time visual communication.
The ViewViewer is a video viewing application that allows users to view web-compatible video files. These files are uploaded to the asset manager and automatically opened in the application. MP4 is the preferred format, while MOV files may work if the MP4 codec is used internally. Videos can be downloaded from the application. Navigation is synchronized across all users on a best-effort basis, ensuring a shared viewing experience. Videos are muted by default to prevent audio feedback. The video file itself can also be downloaded for offline use.
WebpageLink is an application that allows users to paste URLs onto the board, displaying them as clickable links. Users can open the URL in their default system browser or in a WebView application directly within the board. The application fetches and displays metadata from the URL, such as the title, description, and image preview, using the url-metadata library. This provides users with additional context about the linked content before deciding how to open it. WebpageLink enhances navigation by enabling easy access to external content while keeping users within the collaborative environment of the board.
The Webview application allows users to open a browser window within the board to display most web pages. While navigation is synchronized across all users, the scroll position is not. Non-deterministic pages (e.g., those with ads) or pages using WebGL/canvas (such as games) may not synchronize properly. Login pages may also have issues. It is recommended to use public content within webviews, such as a public Google Doc page. Basic navigation and scaling controls are available in the toolbar, and webviews are muted by default to prevent audio feedback. Users can open links in a new webview by holding 'Ctrl' (or 'Cmd') and clicking on the link. The Webview uses the Webview API from Electron for rendering.
