Week 18 Frontend Progress

Jeff Taylor-Chang

Jeff Taylor-Chang

Frontend Dev for Actually Colab

Frontend#

  • Darkened the user colors to make them more readable
  • Display a connecting modal when reconnecting to the socket client
  • Show a popover list of users when more than 3 users are active to conserve editor header space
  • Added user avatars and names to the kernel selector to make it more obvious who users are
  • Simplified the UI by reducing clutter in the left sidebar and moving the kernel and profile to the header

Kernel Selector

Kernel Modal

Week 17 Frontend Progress

Jeff Taylor-Chang

Jeff Taylor-Chang

Frontend Dev for Actually Colab

Frontend#

  • Rewrote the editor header to improve performance
  • Improved the UI for the kernel selector to make it more intuitive and obvious to the user when they are viewing another user's outputs
  • Replaced Ace with Monaco as the underlying code editor used for cells
  • Added code completions powered by the Jupyter Kernel
  • Send running status to collaborators so that you can see when a cell is running as a viewer
  • Released a new version of desktop-launcher that allows the token to be generated on demand and persists across sessions
  • Remember the kernel token on the frontend to easily reconnect to the kernel across sessions
  • Added status indicators and separated active and inactive users in the kernel selector
  • Added a view source / render markdown option to the cell action menu for markdown cells
  • Added a run cell option to the cell action menu for python cells
  • Auto reconnect to the editor socket client when connection times-out

Kernel Selector

Code Completions

Week 16 Frontend Progress

Jeff Taylor-Chang

Jeff Taylor-Chang

Frontend Dev for Actually Colab

Frontend#

  • Redesigned the kernel panel to be more intuitive and performant
  • Fixed bug where the editor would continuously poll the kernel even if auto connect was disabled
  • Added a dropdown menu to each cell for advanced actions
  • Remember the user's auto connect settings across sessions

Kernel Panel

Week 15 Frontend Progress

Jeff Taylor-Chang

Jeff Taylor-Chang

Frontend Dev for Actually Colab

Frontend#

  • Display error message notifications
  • Show the collaborator's name on their cursor when they are typing
  • Auto render markdown on unlock
  • Move code execution queue to the ReduxKernel middleware instead of the useKernel hook
  • Deterministically choose a color for each user for their cursor, cell borders, and avatar borders
  • Use the jupyter notebook server instead of jupyter kernelgateway in the desktop-launcher
  • Use the @jupyterlab/services package instead of the deprecated jupyter-js-services package

Cursor labels

  • Released v0.2.0 of @actually-colab/desktop-launcher with automatic cryptographically secure random tokens and the jupyter notebook server under the hood

Desktop launcher

Organizational#

  • Got accepted to ACM and our funding request was approved to provide access to the platform until December 2021

Week 14 Frontend Progress

Jeff Taylor-Chang

Jeff Taylor-Chang

Frontend Dev for Actually Colab

Frontend#

  • Remember recently used gateway URIs so that the user can select them automatically from a dropdown
  • Used conditional overflow-anchors to prevent scrolling from DOM updates when multiple users are typing (before, your cell could move down if someone was typing in a cell above you)
  • Major performance improvements as large as 10x faster UI updates from typing, locking, and unlocking
  • Much faster chat experience especially when there is a large number of messages

Organizational#

Week 13 Frontend Progress

Jeff Taylor-Chang

Jeff Taylor-Chang

Frontend Dev for Actually Colab

Frontend#

  • Refresh notebooks and workshops when a workshop is released
  • Automatically open a created notebook or workshop
  • Auto scroll to the selected cell
  • Added Sentry for error monitoring in production

Website#

  • Built a completely new website
  • Added a waitlist form to the website

New website

Organizational#

  • Got accepted to Sentry's Open Source Sponsored plan
  • Got accepted to Netlify's Open Source Sponsored plan

Week 11 Frontend Progress

Jeff Taylor-Chang

Jeff Taylor-Chang

Frontend Dev for Actually Colab

Frontend#

  • Built the collaborators panel so users can now share their notebooks and view who has access
  • Profile images are now supported for user avatars
  • Stopped hardcoding lock owners, replaced with actual live data
  • Render profile pictures from Google accounts
  • Allow users to view outputs live from other users on the notebook
  • Prevent users from editing or sharing a notebook when they have read only access
  • Render cursor positions of active users
  • Send cell contents on unlock to fix race condition
  • Track connection status to the client to prevent sending socket messages until client is ready
  • Sort notebooks by name or last modified
  • Filter notebooks using search field
  • Built workshops that have instructors and attendees
  • Rebuilt redux store to use immutable maps instead of lists
  • Use row/column to identify cursor position instead of converting to index
  • Added support for deleting cells from a notebook
  • Users can upload existing ipynb files to create notebooks or workshops
  • Implemented a chat feature to allow users to message each other
  • View workshop attendee notebooks under the instructor notebook

Week 10 Frontend Progress

Jeff Taylor-Chang

Jeff Taylor-Chang

Frontend Dev for Actually Colab

Frontend#

  • Logs are now displayed in an easier to read timeline format
  • Replaced the auto connect button with a toggle to be more intuitive
  • Users can now download their projects as .ipynb, .py, and .md

Week 9 Backend Progress

Bailey Tincher

Bailey Tincher

Backend Dev for Actually Colab

Backend#

  • Redeployed on custom domains
  • Initialized new database instances for AWS free tier

Docs Site#

  • Autogen documentation for editor client
  • Cleaned up docs repo