Dashboard

Introduction

The Dashboard is a file system GUI for organizing uploaded files in Neon.

It can be broken down into the

• model (src/Dashboard/FileSystem)
• view (All the HTML elements)
• controller (event listeners and logic in src/Dashboard/Dashboard.ts and referenced)

Naming schema

View

A Tile refers to the HMTLDivElement in the view that corresponds to an entry that the user can interact with (via opening, drag and dropping into a folder, right click, etc).

Model

An Entry is referring to a file or folder in model.

A File is an uploaded resource meant to be opened in the Neon Editor.

A Folder is a folder in the dashboard file system that can contain other entries.

A Folio is a file that contains single page folio.

A Manuscript is a file that contains a multi-page manuscript.

Reference

FileSystem (model)

interface IEntry {
  name: string;
  type: EntryType;
  content: IEntry[] | string;
  metadata: { [key: string]: unknown };
}

interface IFolder extends IEntry {
  type: EntryType.Folder;
  content: IEntry[];
}

interface IFile extends IEntry {
  type: EntryType.File
  content: string;
}

Notes:

• The unique identifier for an entry depends on the type (file or folder). As a file can be renamed but still point to same uploaded resource, the name is mutable and the content is a string id for the resource. A folder is identified by the the name field, and the content field is an array of its entry contents.
• The metadata field contains any number of key-value pairs. A few of the current reserved keys are:
• "type": "folio" or "manuscript"
• "document": "sample". if present, indicates that the file is a non-user uploaded resource and how to open it in openFile() and openEditorTab()
• "immutable": true. if present, indicated that the file is not to be deleted or moved depending on context.