/** * Dash Documentation * * This file contains the complete documentation text for Dash functionality. * It's separated from the TutorialGPT.ts file to improve maintainability. */ export const DASH_DOCUMENTATION = `Welcome to Dash! If you haven't already, sign up for an account and get started at browndash.com. When you first open Dash, you will see a home menu for managing your dashboards. From here you can view, delete, and share your dashboards or view dashboards shared with you by others in the "Shared Dashboards" menu. Selecting the "New Dashboard" button or the empty dashboard with the + will create a new empty dashboard. home menu The first view in a new dashboard is an empty pannable freeform canvas, one of many views that Dash supports. The freeform view is a pannable and zoomable freeform unbounded 2D canvas where the majority of Dash's workflow takes place. It is surround by toolbars and panels which we will go over below. Menu Panel Each icon has an associated flyout panel with additional functionality. Flyouts can be toggled open by clicking on corresponding icons. Access Permanently pinned on the left. Flyouts can be toggled open & closed by clicking on the specific icon, or by clicking on the grey drag handle. Icon Title Description Search Search Search for any documents within the currently selected Dashboard. The dropdown panel can be used to filter the search results by the type of document. In addition to clicking the search icon, Ctrl+F also toggles this flyout open & closed. Files Files This is your file manager where you can create folders to keep track of documents independently of your dashboard. You can also view recently closed documents. Tools Tools Tools provides an alternative way to create certain types of documents, including maps, audio, and notes. Imports Imports This is where documents that are imported into Dash will go. Shared Shared This is where documents of dashboards that other users have shared with you will appear. To share a document or dashboard right click and select Share. Trails Trails All of the trails that you have created will appear here. Topbar The topbar is the topmost section of the interface. It mainly contains global controls. Icon Title Description Home Home Return to the main dashboard view. Explore Explore Enter the explore mode, where clicking on a document will center and zoom it into view, allowing you to browse your documents in a view-only mode. Share Share Open up the sharing manager to share your dashboard. Bug Reporter Bug Reporter View and report issues with Dash. Documentation Documentation Open up the documentation for Dash (this site!) Settings Settings Manage global settings, including accounts, modes, and appearance. Server Connection Server Connection If you see a full heart, the server connection is active. Clicking the heart will display active users. If the server connection is lost, the heart will appear as broken. Toolbar The toolbar is context specific; if the freeform is selected, you'll see controls related to the overall view, and if a document is selected, you'll see controls related to that document type. Dashboards, Tiles & Tabs What is a Dashboard? A particular layout of tabs is called a dashboard. A dashboard can consist of one or more tabs. A user can have multiple dashboards to support different workflows. For example, one to collect a photo album, and another to take notes during class. Although documents can be linked and moved between dashboards, they are primarily designed to operate seperately. MANAGING DASHBOARDS The home menu allows you to view and manage your dashboards. From here you can create new dashboards, share existing ones, and delete dashboards. What is a tab? We display dash documents in the window manager with tabs. This is similar to a browser tab. A tab can contain any document in dash. CREATING/DELETING TABS You can create a tab by clicking on the plus at the top right of a tile. You can delete a tab by clicking on the x icon of each tab. To open a document in a new tab, drag the document title bar to the tabs manager, and release. From there, if you click on the darkened tabs manager region indicating the potential new tab, you'll create a new tab in the current tile. If you want to place the new document tab in a new tile, rather than clicking on the tabs manager, you can instead move your cursor to the region of the freeform where you want to create a new tile, then click. To drag a document tab back into another tab, drag the document icon on the tab header back into the main tab. What is a tile? Tiles can contain multiple tabs, you can drag and drop a tab into a tile such that you have multiple tabs in the same way that a browser like Chrome has multiple tabs. CREATING A TILE To create a new tile with tabs, drag the header of an existing tab to the section of the freeform where you want to create a new tile. CLOSING A TILE To close a tab, click the x icon at the top-right of a tile. Undo / Redo The undo / redo arrows in the bottom left corner of the canvas allow for undoing and redoing actions. Clicking on the stack will show past actions, and clicking on one of these lines brings back the action. Views Views are the different ways that you can view a collection of documents. Dash supports four views in novice mode, and many additional views in developer mode. The most essential views that dash supports include: View Description Freeform Unbounded 2D space in the form of a canvas. This is Dash's primary view Schema Manipulating documents via key-value pairs and maintaining structured viewing and sorting of data Stacking Categorizing documents by specified keys while maintaining a live preview of each document Notetaking Create multiple columns of documents, allowing you to take notes in one column while having your content in others. Changing Views Use the dropdown in the top toolbar to change between views. If you don't see the dropdown or see a document-specific toolbar like image or text, click a blank area of the main view to invoke the view dropdown. Freeform View overall environment TABLE OF CONTENTS Freeform View Description: Good for: Description: Unbounded 2D space in the form of a canvas. This is Dash's primary view. Good for: User-driven spatial organization and document layouts Visualizing document relationships, e.g., neighborhoods/clusters of related materials, nesting, and linking "Raw" document views to get a sense of individual layouts Schema View overall environment TABLE OF CONTENTS Schema View Description: Good for: Objects & actions: Description: Displays each document as a row, where each column displays the contents (values) stored with the specific key for that document. Nested collections can be expanded in-line. The title, type, author, date last modified, and text columns are displayed by default, and users can manually add more columns with existing keys or user-defined keys. Good for: Manipulating documents via key-value pairs and maintaining structured viewing and sorting of data Working with search Navigating Dash an an "Excel sheet" Objects & actions: Open a live preview of the selected document on the side in a new tab, by toggling the "show preview" button in the leftmost column Add new columns by clicking on the "+" button in the top left corner. The column title itself is a key and each cell is a value. Keys can include existing keys intrinsic to the document, or new user-defined keys. These can also have different types including string (text), number, checkbox, and documents. Adding a column with an existing key is a viewing operation, while adding a column with a new key is an edit operation that adds more information to the document. Edit existing columns (keys) by left-clicking on the small circular button next to the column title, which will invoke a drop-down menu that allows users to changge, filter, or delete the column. Edit existing cells (values) by left-clicking on the desired cell, then typing in the desired value. If the value is a string, put quotation marks around the value. Sort each column in ascending or descending order of its values, by toggling the arrow buttons beside each column title. Stacking View TABLE OF CONTENTS Stacking View Description: Good for: Objects & actions: Description: Displays a set of documents in one or more scrollable stacks. By default, all documents are placed in a single stack. If a key is specified, multiple stacks will show up side-by-side, each containing documents sharing the same value for that key. Additionally, each value is displayed as an editable text field with a colored background at the top of the stack. Good for: Categorizing documents by specified keys while maintaining a live preview of each document Navigating Dash as a "Trello Board" Objects & actions: Categorizing documents by a specified key: when a key is specified via typing in the "Group by" input box besides the perspectives pulldown, the default single stack transforms and displays multiple stacks side-by-side, each containing documents sharing the same value for that key. Updating the value of a specified key For a single document: click and drag the desired document, then drop it into the target stack to update its value For a stack: click on the title (value) at the top of the stack to edit or delete the value Reposition documents within a stack: click and drag the desired document, then drop it into the target location within the stack to reposition it vertically. This will not affect its metadata. Navigating Dash as a "Trello Board" - when combined with a document view showing only a document's title, this essentially becomes a Trello board Notetaking View TABLE OF CONTENTS Notetaking View Description: Objects & actions: Description: Displays the dashboard document in multiple scrollable stacks of documents. A multicolumn version of stacking view. This allows you to take notes alongside your main content. Good for: Viewing documents side by side for comparison or note-taking Sorting documents into categories Navigating Dash as a "Trello board" or table Objects & actions: Creating a new node: Select + new node at the bottom of a stack to add a new node to the stack Creating a new column: Select + new column at the bottom of a stack to start a new column of documents. mages TABLE OF CONTENTS Images Description: How to Create: Objects & Actions: Image Editor: Description: Digital images created outside of Dash How to Create: Dragged and dropped into Dash from an external source (i.e., internet, own desktop, etc) Objects & Actions: Embed marquee selections, annotations, and ink (overlay pane), acts like collection Make background: an image can be converted into a background image by selecting "Make Background" in the image's right-click menu. A background image is indicated by the red lock icon at the top right corner of the image. It cannot be selected, which means it essentially becomes part of the canvas. left-clicking on the red lock icon converts the image back into a normal image. Rotate: users can rotate the image 90 degrees clockwise by selecting "Rotate Clockwise 90" in the right-click menu. Zoom into image using scroll Image Editor: Use Image Editor AI to fill in parts of the image you marked in the Image Editor Use the prompt box to guide the AI on how you want those parts of the image to be filled Click get Edits to generate edits (you will see 2 versions of the edited image + original on right side) Returning to the dashboard will create a collection of linked images that show the iterations of generated edits Text Documents Webpages in Dash TABLE OF CONTENTS Webpages in Dash Description: How to Create Objects & Actions Description: You can include embedded HTML webpages in Dash. How to Create Dragged and dropped into Dash from an external tab (Navigate to the page you want to embed and drag the lock icon next to the page url to the tab running Dash). Alternatively, an empty webpage using the colon menu will open a Bing search (https://www.bing.com). Users can then enter a specific URL in the horizontal toolbar. Objects & Actions Embed marquee selections, annotations, and ink (overlay pane) Annotate and highlight text in a webpage using the same annotation sidebar as described for PDF and Text documents Pan, and scroll through the webpage Visit any embedded hyperlinks on the webpage by left-clicking on them, which will open up the target of the link in the same document frame Note: This works well for Wikipedia pages and other webpages that are not JavaScript heavy. For other JavaScript heavy webpages, you might not be able to visit the embedded hyperlinks because of permission issues. Create web clippings: because of security concerns, users cannot drag in a full version of certain websites. This issue can be solved by dragging in a clipping of the website, which users can then treat as any other full websites in Dash. To do so, select the desired portion of the website, then bring it into Dash as with any other external documents. PDF Documents TABLE OF CONTENTS PDF Documents Description How to Create Objects & Actions: Description PDF files created outside of Dash. How to Create Dragged & dropped into Dash from an external source (i.e., your own desktop) Objects & Actions: Embed highlights, marquee selections, annotations, and ink (overlay pane) Scroll through PDF, view current page number, and navigate to desired page numbers by custom input Search for specific words or phrases within the PDF: click on the search icon at the bottom right to invoke the search input box. Then, type in the query. By default, the first result will be highlighted in orange while all other search results will be highlighted in yellow. Users can use the up & down arrows to step through each result, with the current result having an orange highlight. Add a margin that allows for a convenient place to place documents such as annotations (in the form of a text document): Click on the Comment icon to toggle the annotation sidebar open and closed. To resize the margin, drag on the Comment icon. Select a piece of text and click on the Summarize with AI icon that appears in the menu to generate text summarizations. TABLE OF CONTENTS Text Documents Description: rich (RTF) text documents that support various text and hypertext features How to Create: Objects & Actions Ask GPT3 Generate Dall-E Image Markdown commands Description: rich (RTF) text documents that support various text and hypertext features How to Create: Created by clicking anywhere on the blank canvas in freeform perspective and typing some text Objects & Actions Rich text editor that appears in the context-sensitive toolbar and allows for: Basic rich text editing functionality (bold, italicize, underline, etc) Creating external (outside of Dash) hyperlinks Adding bullets, indents, and alignment options Text folding/summarizing, horizontal line, and blockquote functions Sidebar that allows for additional "comments" in the form of text documents: Click on the Comment icon on the top right corner of a text document to turn on the sidebar. This allows you, or others with augmentation/edit/admin permissions to the document, to add additional "comments" in the form of text documents To turn off the sidebar, click on the same small grey vertical rectangle. Note that this will not erase any existing documents in the sidebar. Change style by opening context menu (3 horizontal lines, last icon under the node when the text doc is selected) and clicking Change Style Ask GPT3 Type your prompt and click Ask GPT3 in the context menu Generate Dall-E Image Type your prompt and click Generate Dall-E Image. Wait for generation at bottom right of screen Hover over image and save to canvas Markdown commands wiki:string or phrase => display wikipedia page for entered text (terminate with carriage return) #tag => add hashtag metadata to document. e.g, #idea >> => add a sidebar text document inline => create a code snippet block %% => restore default styling %color => changes text color styling. e.g., %green. %num => set font size. e.g., %10 for 10pt font %eq => creates an equation block for typeset math %alt => switch between primary and alternate text. Button on bottom right of text sets alternate text to display on hover. %f => create an inline footnote %> => create a bockquote section. Terminate with 2 carriage returns %( => start a section of inline elidable text. Terminate the inline text with %) %q => start a quoted block of text that's indented on the left and right. Terminate with %q %d => start a block text where the first line is indented %h => start a block of text that begins with a hanging indent %[ => left justify text %^ => center text %] => right justify text [:doctitle]] => hyperlink to document specified by it's title [[fieldname]] => display value of fieldname [[fieldname=value]] => assign value to fieldname of document and display it [[fieldname:doctitle]] => show value of fieldname from doc specified by it's title Data Visualization overall dataViz TABLE OF CONTENTS Data Visualization Description: Access: Objects & Actions: Basic Graphs: 2D Graphs: Filtering: Artificial Intelligence Schema Tables as Data Visualization: Setting a Title Column: 3-Column Line Charts: Description: Data visualized in a table, line chart, histogram, or pie chart. Access: To create a DataViz box, either import / drag a CSV file into your canvas or copy a data table and use the command 'ctrl + p' to bring the data table to your canvas. See below for how to turn a schema table into a DataViz box. Objects & Actions: Basic Graphs: A data set composed of string, numbers, prices, or percents can be viewed as a table, line chart, histogram, or pie chart that can be customized by its title and colors. To create a visualization, click the title of the column you want to visualize and then select the graph type. When viewing the data set as a table view, clicking on a row selects the row for filtering, and clicking on a row while holding 'Command/Windows' highlights the row visually. 2D Graphs: The first column selected will turn green and be the x-axis, and the second column selected will turn red and be the y-axis. Filtering: To filter the data, drag off a column of data. To select data to display on the filtered doc, a: click rows from the original DataViz box, b: filter a table choosing a value or range of values in a column, or c: click on data in a line chart, histogram, or pie chart while the 'Select data to filter' toggle is on. Artificial Intelligence Clicking the context menu's 'Analyze with AI' button will use aritificial intelligence to analyze the dataset. Initially, a general analysis will pop up, and from here, you can a: click 'Transfer to Text' to save this analysis as an annotation on the DataViz doc, b: click 'Visualize' to create a line chart visualization of a correlation found in the dataset, and c: click 'Chat with AI' to ask the artificial intelligence specific questions about your dataset, Schema Tables as Data Visualization: When in Schema view, click the 'DataViz' button on the top bar. This will create a DataViz doc that represents the schema table - then, when back in Freeform view, this can be dropped onto the canvas. When the 'Display Live Updates to Canvas' toggle is selected, this DataViz doc will change as docs are added to and deleted from the canvas, and otherwise, it will represent the static schema table that it was created from. Setting a Title Column: Click 'Select Title Column' and then select any column's title to set that column as the data's title column. This means that no matter which columns are being displayed in a graph, the title column will also be available. Alternatively, selecting a column's title while holding 'shift' will set / remove that column as the data's title. 3-Column Line Charts: If three numerical columns are selected, the 'line chart' tab will display the second two columns selected (blue and red) over the first one (green). Linking TABLE OF CONTENTS Linking Creating Links - "Drag and Drop" Method Creating Links - "Linkboard" Editing Links: Additional Link Functionalities A link in Dash can be thought of as a bidirectional connection between two documents, or a reference to one document from another. It is also a document in itself, meaning that we can add tags and other key/value pairs. The same source selection (called an anchor, i.e., a persistent selection) can link to multiple destination anchors. In addition, source and destination anchors can both range from the entire document to a portion of a document (i.e., a phrase within a long text document, an annotation on a pdf, a selection on an image, etc). We now describe two different mechanisms for creating links; we begin by describing document to document links. More information on linking between selections within documents can be found here. Creating Links - "Drag and Drop" Method There are two methods of creating links. The first is "drag-and-drop", which is a light-weight method good for creating a one-to-one link between documents that both appear on the screen at a given time, whether in the same tab or in two different tiles. 1. Select the desired source document and navigate to its bottom toolbar of icons. 2. Click and drag the link icon (the "make link" button), then drop it onto the desired destination document. 3. After the link is created, two messages will appear on the screen: - The upper message notifies that a link was successfully created, and will disappear after two seconds. - The lower message displays an input box to enter an optional description for the link - it typically is an explanatory word or short phrase describing the link. Pressing enter on the keyboard or clicking the add button will add the label to the link, and clicking anywhere else outside of the message or clicking the dismiss button will cause the message to disappear. 4. If users do not enter a link label on creation or wish to modify the label after creation, it can be done through the link menu (described in the subsequent editing links section). 5. Once a link is created, if there are no existing links on the document a blue dot will appear on the bottom left corner of the document containing the number of links that exist on the document (you can see this dot by hovering over the document or clicking on it to invoke its document crhome). This counter is incremented for each additional link created. More information on this dot and its functionality can be found here. Creating Links - "Linkboard" You can create links with the "linkboard," which is convenient for creating many links with the same source and for creating links while maintaining another workflow. This functions as a clipboard (similar to copy and paste) for links in the sense that your source is always "copied" to the linkboard until you clear it or "copy" another source. 1. Same as the first method above, select the desired source document and navigate to its bottom toolbar where three icons are present. 2. Then, left-click on the make link button. This turns the document into a source document for links to be created from. The make link button will turn grey with a red outline, and the middle icon (the "end link" button) will be activated, indicated by a black background. 3. In addition, a popup bar will appear at the bottom of the screen, next to the shortcut buttons. This popup displays the current source document's title and allows users to change certain linking preferences using the two grey buttons: 4. Complete the link by clicking on the complete link button in the bottom toolbar of the desired target document. Clicking this complete link button on any document that is not the source document will create a link between the source document and that document. Clicking on the complete link button on the source document will do nothing. 5. At any time (whether there is a source on the linkboard or not), clicking the start link button (the first button in the bottom buttons of the document) will make that document the source for links. If there was already a source on the linkboard, that source will be cleared and the selected document will become the new source. When there is a source on the link board, the user can go about their workflow normally. They can continue to select and interact with documents as they normally would and view and edit existing links as well. The only difference is that when there is a source on the link board, the stop link button is active and the user can no longer make "drag and drop" links from the source (because clicking that button again will clear the source), however the user can still make "drag and drop" links from any other document. Editing Links: Once links are created on a document, a blue link dot appears in its bottom left corner containing the counter that shows the number of links on the document: - Clicking on the blue link dot will open a link menu that displays each link on the document in a list. Each link is shown with an icon representing the type of document that the link is to and the title of the document that is on the other end of the link: - Hovering over an item in this link menu displays several options for the link. First, hovering over the title produces a blue underline which indicates that the title is a hyperlink that can be clicked on to follow the link (more information here). Hovering over the title also shows a preview of the destination document: - Hovering over an item in the link menu also makes three buttons on that link visible: 1. The leftmost button is to toggle on/off the link as a dotted curved path between the two documents (link path). 2. Clicking on the rightmost button deletes the link. Deleting a link deletes it on both the source and destination documents. If a document contains only one link, and that link is deleted, the blue link dot at the bottom left corner will disappear, and will only reappear when another new link is created on that document. 3. The middle button is to edit the link's properties. Clicking on the button to edit the link will invoke a link editor: - In this link editor, the user can edit the link label that they added on creation of the link (or add a link label if they chose to not add one). The label will be added to the link when the user clicks the set button or hits enter after typing in the label box. When the label is added, the set button will turn green for 2 seconds to indicate to the user that the label was added. When a link label has been added, it will be shown in the link menu, right underneath the title of the destination document: - The user can also set a link relationship or choose one of their existing link relationships. All the links in the same relationship have the same link path color. Link paths have weights corresponding to their relative importance (i.e. number of links contained in the relationship) - The user can also choose to modify the follow behavior of the link (a type of "view spec"). Following a link takes the user to the destination document. The link editor allows the user to select different follow behaviors from this dropdown menu: - The default option is to pan the screen to the destination document if both documents are in the same collection and otherwise opens it in a new tile on the right side of the screen. - Additionally, the user can click the arrow in the top right corner of the editor to display/hide more information about the link Additional Link Functionalities - Linking selections within a document: For text, pdf, webpage (linking with Hypothes.is), image, audio (linking with audio) documents, the user has the option to link a specific selection within a document (anchor) to another document: - Text In order to link a piece of text in a document, the user must select the text and then drag the link icon to the document that they want to link it to (shown below). As of 8/10/2020, the "linkboard" method (clicking the start link and complete link buttons) is not yet supported and using this method will link your entire text document to the destination. Once the text anchor is linked, it turns blue and will show a blue underline on hover. The user can click on the linked piece of text to preview the destination document and use the two buttons at the top right corner to delete and follow the link. (*external hyperlinks to websites outside of Dash will always show a blue underline so that they can be differentiated from internal links within Dash) - Image/PDF/Web In order to link a portion of an image, PDF, or webpage, the user must first create a selection on the document. This can be done by right clicking and dragging over the area that the user wants to select. Once the user has made this selection, they can treat the selection as a document and use its bottom buttons to create links normally (not shown in gif). - Following Links: In order to follow a link on a document, you must click on the title of the destination document in the link menu. Clicking on this and "following" the link will show you the destination document of this link, based on the specified following behavior (following behavior). - Showing Links and Labels: In the link menu, there is an option to visibly show the link. Clicking on this option will show a dotted path between the two documents that are linked. If there is a link label on this link, it will appear on the dotted path. The user can also move the link label around this path and position it where they want. Search TABLE OF CONTENTS Description: Actions: Description: The search flyout allows the user to find specific documents in their dashboard by inputting metadata querries. Each search result displays the corresponding document's title, type, and matching metadata fields. Actions: Click the search icon or press Ctrl+F to toggle the search flyout open & closed. Input a query into the search box to search for documents with any metadata macthing that query. Use the dropdown menu to filter the search results by the type of document. Hover over a search result to display a tooltip with the corresponding document's full title. Click on a search result to select it and zoom in on it in the freeform canvas. Collaboration & ACLs TABLE OF CONTENTS Description Guests Developer Mode Functionalities Description For each document, individual users, groups, and guests can have permissions called Access Control Levels (ACLs) that determine the degree to which they can modify the document. These permissions include: ACL Description Admin Users with Admin permission can: - Change ACLs - Delete and minimize documents - Delete and add content - Resize documents - Move documents Edit Users with Edit permission can: - Delete and minimize documents - Delete and add content - Resize documents - Move documents Augment Users with Augment permission can: - Delete only their own content - Add content - Resize documents - Move documents View Users with View permission cannot edit, delete, or move any documents Not shared These users will not be able to view the contents of the Dashboard or document. Guests Guest users are never able to make changes to shared documents: any edits made on a guest account will not be transferred to the original document. If the guest permission is set to View rather than Not-Shared, individuals without specified permission to this document will be able to see it. To allow guest users view your document, send them the guest URL that can be found in the Share menu for that document. Alternatively, guest users can access documents by their ID. Developer Mode Functionalities Upgrade Nested: When a parent document with nested child documents is shared at a permission level more restrictive than the permission levels of its children, the children automatically adopt the more restrictive permission. However, in order for nested child documents to adopt parent permissions that are less restrictive than their current permission, the 'Upgrade Nested' checkbox must be selected. Layout: Layout permissions refer to the ability to move and resize documents. A document's layout permissions are initially simply the permissions of the document that the selected document is nested inside of - until they are explicitly set otherwise. nk TABLE OF CONTENTS Creating Ink Formatting Ink Appearance Panel Change Width Arrow Head/End Dashed Line Fill and Stroke Color Transform Panel Editing Points Lock Ratio Rotate Height and Width X and Y Masks Dash allows the user to draw various shapes and lines, each represented by an ink stroke. Each ink stroke is a document. Ink documents can be created using a simple pen tool or a polygon tool. Currently implemented polygons include: circles, rectangles, straight lines, and arrows. Once an ink document is created, its properties, such as stroke color, fill color, stroke width, and control points can further be modified under the Properties Panel. Creating Ink The ink tools can be found in the ink toolbar. Single-clicking on one of the tools will bring the user to ink mode only for the duration of that drawing action. Conversely, double-clicking will keep the user in ink mode until the button is clicked again. Formatting Ink When the user opens the Properties Panel while at least one ink document is selected, the "appearance" and "transform" subpanels become visible. Changes made in the panels will only be reflected in the documents selected. Appearance Panel CHANGE WIDTH Users can augment width using the input box or the range slider. ARROW HEAD/END Users can add or remove arrowheads or arrow ends by checking the corresponding box. DASHED LINE Users can toggle between solid and dashed strokes by checking the corresponding box. FILL AND STROKE COLOR Users can change the colors of the stroke and fill using the palette that appears when the user clicks on the currently selected colors. Transform Panel EDITING POINTS Clicking on the "Edit points" button in the Transform subpanel or double-clicking the currently selected ink brings up multiple squares outlined in blue along the ink stroke. By dragging these control points and tangent handles, users can alter the Bézier curve. When one handle point is moved, its opposite handle point will rotate the same angle in the opposite direction, resulting in synchronous movement. To break handle tangency and allow independent movement of either handle point, the user can hold the 'Alt' or 'Option' key while dragging. Double-tapping a broken control point will snap the handles back to being parallel and re-enable synchronous movement. Control points can be deleted (pressing backspace with the point selected) or added (single clicking on the desired point on the stroke, indicated by the blue circle that appears on hover). LOCK RATIO Users can click on the lock button to lock the dimension ratio so that they can change the width and the height of the document proportionally. ROTATE Users can rotate ink documents 90 degrees by clicking on the rotate button. Alternatively, users can change the value inside the "∠:" input box. HEIGHT AND WIDTH Users can change the height and width of the ink documents by changing the values inside the "H:" and "W:" input boxes. X AND Y Users can change the x coordinate and y coordinate of the ink documents by changing the values inside the "X:" and "Y:" input boxes. Masks The mask tool in the ink toolbar allows you to create a mask. You can either select an existing ink document and then click Mask to convert it to a mask, or select Mask and then draw a new ink document. This will hide everything else on the canvas and show the part that is under the ink doc. These can be useful for presentations since they can be animated or hidden and revealed to emphasize information. Trails TABLE OF CONTENTS Trails Creating and Accessing Trails Objects & Actions Adding documents to a trail Regular pin: Pin with view: Other pinning options: Slides Slide Customization Customizing with GPT Transitions Movement Effects Visibility & Duration Presenting Views "The human mind does not work that way. It operates by association. With one item in its grasp, it snaps instantly to the next that is suggested by the association of thoughts, in accordance with some intricate web of trails carried by the cells of the brain. It has other characteristics, of course; trails that are not frequently followed are prone to fade, items are not fully permanent, memory is transitory. Yet the speed of action, the intricacy of trails, the detail of mental pictures, is awe-inspiring beyond all else in nature." As We May Think, Vannevar Bush (1945) Presentation Trails allow the user to navigate through selected documents with a predefined path. With presentation trails you can easily go from authoring mode, to presentation mode - and turn whatever you are working on into a smooth presentation. Presentation Trails work best when all of the documents are contained within Freeform collections, as it makes use of pan and zoom to navigate between documents. Creating and Accessing Trails There are two ways to open up the Presentation Trails sidebar: Menu panel: The trails button in the lefthand menu will open up a list of your existing trails which you can open by double clicking, as well as a "New Trail" button to create a new presentation. Pinning a document: Using the document decorations 'Pin to Presentation' button, you can pin any document to the Active Presentation. If you have not created a presentation yet, this will begin a new one and open the Trails sidebar on the right side of your workspace. If you have a previous presentation (or multiple) you closed, it will pin the document to the most recent presentation and open it up. Objects & Actions Adding documents to a trail REGULAR PIN: To pin any document to the presentation trail simply select a document and use the 'Pin' button in the document decorations to add it to the presentation trail. If the user has not yet created a presentation trail, then this button will also create a new presentation trail and add that specific document as the first slide in the trail. PIN WITH VIEW: Pinning with view pins the canvas with the specific pan and zoom you have it set to, allowing you to show a view of multiple documents laid out on a collection. There are two places where you can pin with view: Top menu bar: this pins the canvas with the pan and zoom of the tab as you are currently viewing it Marquee menu: this option appears when you right click and drag on the canvas to create a marquee selection and pins the canvas with the marquee bounds as the viewport OTHER PINNING OPTIONS: Other ways to pin documents are available when hovering over the pin button in the document decorations. Each of these track different aspects of the document's state, allowing you to pin them, make changes, and then pin them again to display transitions between the document's layout or content. This is different than the default pin, where any changes made to the document after pinning are reflected in the presentation slide. Pin with layout: this pins the document saving its current layout state: xy position, width, and height Pin with content: this pins the document content saving its content state such as the text of a text document, the pan and zoom of a collection, the scroll position of a PDF, etc. Pin with layout and content: this saves both layout and content Slides Slides are used to visually represent the path that the trail would follow. Unlike the conventional Powerpoint "slide", a trails slide is just any pinned item in a presentation, whether it's a document, collection, view, etc. A single node can be pinned multiple times throughout a presentation, potentially with different content or layout aspects that change, but each of these instances is a unique slide. Selected slides are indicated by the blue outline and the light blue background, on each slide the user can find: Slide index: number that appears before the slide title that indicates presentation order Slide title: in bold on the far left hand side of the slide, can be retitled by double clicking (this retitles the presentation slide NOT the pinned document) L: for slides pinned with layout, allows you to update the layout associated with the slide to the document's current state C: for slides pinned with content, allows you to update the content associated with the slide to the document's current state Camera: records video following your mouse movements while presenting the trail Arrow: groups slide with the one above it. When presenting, both slides will transition in together and run simultaneously. By default they play in parallel, but clicking the blue arrow line when grouped will switch to series and play one after the other (indicated as the black outline around the arrow) Eye: expand/minimize a preview of the slide Trash: removes the slide from the presentation (not from the collection or database) Pencil Opens the slide customization pane, where you can edit properties like the slide's effect, duration, timing, etc. More details below. Slides can be rearranged by dragging and dropping. Slide Customization Selecting a slide and opening the properties menu (the gray arrow tab in the middle right edge of the screen) or clicking the pencil icon on the slide displays the transitions menu where you can edit many aspects of how the slide is played when in presentation mode. Multiple slides can be selected by holding down shift and clicking more slides. You can choose to apply any changes you make in the properties menu to all the slides in a presentation by clicking "Apply to all". Customizing with GPT At the top of the pane, you can use natural language in order to communicate how you want to customize the slide to avoid having to manually understand and adjust each property of the slide. You can use this feature to both specify specific values (like zoom to 75%) or give more general instructions (zoom to around full screen, make a gentle effect). You can also use the record button to speak to the system rather than typing. Transitions Described below are the customizable features for each slide. MOVEMENT Specify the type of movement from the following options, as well as the amount of time that the movement from one document to the next will take: Zoom: Center the document in the containing collection and zoom in on it so it takes 75% of the height or width of the screen depending on what fits. Pan: Pan to display the document within view maintaining the current scale of the containing collection Center: Center the document maintaining the current scale of the containing collection Jump Switch: Switch to the zoomed in document with no transition time None: Nothing happens when this slide is the active one in the trail. Zoom: What percentage to zoom the freeform to when the document is navigated to in the presentation. Transition Time: How long to transition to the slide during navigation. Easing Function: Specify how the movement is timed. Available options are: Ease, Ease In, Ease Out, Ease In Out, Linear, Custom. You can specify a custom bezier easing function with the timing editor to fine-tune the timing. Drag the circles to modify the control points. EFFECTS Choose to have an effect on the entrance of the selected document. The possible effects include: Zoom, Fade In, Flip, Rotate, Bounce, and Roll, and Lightspeed. You can adjust the effect direction if it applies to the type of effect below the dropdown with the arrows. Customizing Effect Timing You can also customize the timing by which the effect is played (besides Lightspeed). The timing uses spring-based animation controlled by tension, damping, and mass. Loosely, the higher the tension, the bouncier, the damping mitigates the bouncing effect, and increasing the mass slows the animations. A preview of the animation is displayed below the settings. Get Effect Suggestions If you want to explore different effects without manually adjusting the settings, you can preview some suggestions at the top of the effects section. You can customize these effects with a prompt to have GPT generate suggestions as well. Clicking on these preview boxes will apply the displayed effect to the current slide. VISIBILITY & DURATION Hide before: When this toggle is on the document will appear hidden before it is presented in the presentation trail Hide after: When this option is toggled on after the slide is presented it will not appear in the presentation trail. Lightbox: Open the document in Lightbox view, instead of navigating to it within the collection. This can be useful for navigating Websites/PDF etc. Slide duration: Choose the amount of time that the slide will remain in focus when in Auto-present mode. Presenting Pressing the present button enters presentation mode which begins cycling through the slides. The presentation controls offer buttons for going from one slide to another, looping the presentation, returning to the first slide, and exiting. Clicking the dropdown next to the present button gives you the option to start presenting with the mini-player which hides the presentation menu and shows you a small hovering set of controls that obstructs less of your workspace while presenting. Views When outside of presentation mode, the presentation player above the slides is replaced with a dropdown of the available views for the trail. Each available view allows you to view the slides in a different manner, allowing for different ways of presentation to be created. List: The default view selected, list view is a linear way of presenting the presentation slides. As the name suggests, the slides are in a linear list, being called one after the other from the top to the bottom. Dragging a slide in this view allows the user to change the order of the trail. Tree: The tree view allows you to represent your slides in a tree-like structure. Slides can be dropped on top of another slide to create a system of nesting. When expanded, the children slides will play from top to bottom like in list view, but the user is also able to hide children slides by clicking to the lift of the title. Doing this will hide the children slides and during presentation, skip these hidden children. Presentation Trails | Tips and Tricks Pinning In Dash, we use the term pin to refer to adding any node, or view of that node, to a presentation trail. GIFs showing how nodes are pinned to the trail are included below. Text Pin with Pin Button Select the text node you would like to add. Hit the pin icon on the document decoration menu. Notice that the document is added to the currently active trail, in this case Demo Trail which is already open. Clicking on the trail will pan and zoom to the relevant part of the trail. Pin with Drag Drag the document into an empty space on the trail. You can either use the title bar to drag it, or drag on the document itself. Pin with View To Pin with View you select the document to bring up the document decorations. Hold down Shift and click on the Pin icon You know if a document is pinned with view, if it has the V button appear on the slide. The notion of Pin with View for any document is that it will pin the document with the current view properties that the document currently has. These properties include: scroll: The scroll location of the document. x and y: The x-coordinate on the 2D canvas. If you click on the Update View button on the slide in the presentation trail it will update to whatever the current view specs of that document are. You can use this feature to animate movement. Pin with View: Scroll Markup TABLE OF CONTENTS Marquee Selection Embedding Text Highlighting Ink Users are able to markup all documents in Dash using text annotations, ink, highlighted selections, or embedding other documents on top. Marquee Selection Clicking and dragging within an image, webpage, PDF, or video will display a rectangular marquee selection with a small menu in the bottom right corner with three options: Highlight: The highlighter icon will create a translucent overlay the size of the selection that can be transformed and linked just like any other document. The color of this highlight can be changed by first selecting a color from the dropdown next to the highlight button before selecting the highlighter icon. Annotation: The text bubble icon can be clicked and dragged to create an annotation note which links back to an anchor placed on the document where the selection was. Clicking this anchor created by the marquee selection by default follows the link. In PDFs and webpages, the icon can be just clicked, no dragging required, which will create an annotation in the right sidebar menu which displays all annotations. Search and link: The magnifying glass icon brings up a small menu that allows you to search for a document in your Dash workspace. Selecting a document from this menu will create a link to the chosen document and an anchor on the document containing the marquee selection similar to annotations. Embedding All types of documents can have all types of other documents embedded in them. This is simply done by dragging the document by the title bar and dropping it on top of another document. This can be reversed by dragging the title bar of the document out of the document in which it is embedded. When you remove an embedded document from a webpage, image, video, or PDF in which it was embedded, it will leave behind a pushpin on the containing document in that position that is now linked to the removed document. Text Highlighting Selecting text with the cursor in text, PDF, and website documents will display the same markup menu as the one described for marquee selection above. The only difference is that this will select the specific text as the link anchor or highlight instead of creating a large rectangular selection. Linked text in a text document will display similar to a website hyperlink and clicking the text will display a preview of the linked document. Clicking this will follow the link. Colored highlights can be deleted by right clicking on the highlight and selecting the trash can icon. Ink Ink can be used to markup documents by selecting the ink tools from the top menu bar and drawing directly on top of a document. This will create ink strokes that are embedded similar to how other documents are embedded. And just as described above, they can be removed by selecting them and dragging them out of the containing document. Note: as with other embedded documents, ink strokes may resize when removing them from the containing document. Animations TABLE OF CONTENTS Adding Frames Edit Mode Pinning to Presentations WARNING: This feature is still in development and as such is only accessible in Developer Mode (Settings > Modes > Developer). If you choose to switch into developer mode to use this feature please do so with caution knowing that there may be bugs that could result in losing some of your work. Dash offers tools that allow users to create frames of content that can be stepped through to create interesting animations. Animation information can be found in the top menu bar. There are arrow buttons for stepping forward and backward through frames as well as a number in between indicating the current frame. Adding Frames To begin animating, you can simply use the forward button to move to frame 1. From then onwards, any changes you make in the layout or content of documents in the selected collection will be associated with that frame. If you create a document, go to another frame, and make a change to the document, then stepping from the first frame to the next will transition between those two states of the document. Dash automatically interpolates between the modified values and transitions smoothly between them. If you create or remove documents at a given frame, they will be shown or hidden from that frame onwards. This means that if you create a document at frame 3 and then go back to frame 2, it will disappear. Similarly if you closed a document at frame 3 and went back, it would reappear. If you moved ahead to frame 4, thoguh, they'd appear the same as they did in frame 3. The documents are always present, but their visibility changes based on when you added/removed them. Edit Mode Clicking the frame number enters Edit Mode. In Edit Mode you can see and modify all the documents in the collection even if they are hidden at the given frame. This allows you to transition between states while the document is hidden. This can be used to create effects like stacking another transition on top of the transition where the document appears/disappears, or you might use this to change the state of the document while its hidden so the transition isn't visible. Pinning to Presentations The pin button next to the animation controls pins the open collection with the current view (read more about this on the Trails page). If you do this with an animation frame active, the presentation slide will now be associated with the animation frame. This means that you can pin a collection multiple times at different frames and use your animations in a presentation. Generative AI TABLE OF CONTENTS Generative AI Overview Text AI Assistant Images Generation Editing Step 1 Step 2 Step 3 Additional Editor Features CSVs Step 1 Step 2 Step 3 Step 4 Overview Dash's integration with the OpenAI API enables features that aid in text and image generation, sorting, and categorizing; document analysis; study tools; and more. These features are accessible through all the most common document types in Dash. Text You can invoke GPT-4o to respond to a text prompt inside of a text node by opening the context menu (three bars icon) => Ask GPT-4. It will type in its response in the text node containing the prompt. AI Assistant (This feature is coming to the live server soon.) Dash's native AI assistant will conversationally analyze and summarize PDF documents and CSVs. The assistant will augment its responses with information gathered from the web and help you navigate linked documents to find what you're looking for. To open the assistant, drag it from the Tools tab on the left onto your dashboard. (Coming soon...) To use the assistant to analyze PDFs and CSVs, link a PDF or CSV document to it and type a prompt. (Coming soon...) The assistant can also help you search the web for relevant news articles. To use this feature, link an empty collection to the assistant box and prompt it to search the web. You can then iteratively search through conversation with the assistant. Images Generation (This feature is coming to the live server soon.) You can generate an image with the Smart Draw feature by opening it from the Ink tab at the top of the dashboard. Using Smart Draw, you can create fully customizable dash ink drawings or canvases from Adobe Firefly. Note Images take some time to generate. You can also provide Adobe Firefly with a reference image drawn in Dash. To generate an image based on a reference, select the ink drawing you want to use as a reference, then open the options menu on the right (blue arrow to the right or double-arrow on the top right) and customize your generation. Editing You can edit images within dash to generate new visual content based on existing imagery. STEP 1 From the image context menu, click on Open Image Editor, which will pull up an editor view. STEP 2 Using the eraser tool, erase the part of the image you would like to fill with new content and optionally provide a prompt. Then, click Get Edits to generate the image edits. Variations will pop up on the right, and clicking them will draw the result to the main canvas. You can generate further edits from the results following the same process. Note Images take some time to generate. Additionally, the image model may not always produce a result that aligns with the prompt. To achieve better results, provide as much context about the image in your prompt as possible, including areas of the image you are leaving as is. STEP 3 Once you close out of the editor, you'll see a tree that represents the edit version history in a new collection. You can drag that collection back into the main canvas. ADDITIONAL EDITOR FEATURES You can undo/redo erase strokes and adjust the brush size with the controls on the left You can remove all erase strokes with the reset button at the top For the version history, you can choose to branch directly from the original image rather than creating a new collection by toggling Create New Collection off CSVs (This feature is coming to the live server soon.) You can creature documents from CSV contents with the help of AI. STEP 1 To access this feature, open the context menu of a CSV document and click Create Docs near the top. This will open the template creator menu. STEP 2 Select the columns you want to generate based on in the CSV and navigate to the field options menu (cog icon at the top right of 'Suggested Templates') to add AI-generated fields. STEP 3 Click the generate button and get recommended templates for the given content. You can click on the edit button on the bottom right of each template to edit it. STEP 4 Once you're happy with your template, select all rows in the CSV you want to generate for, click on the template to select it, then navigate to the layout menu (magnifying glass icon at the top) and choose how you'd like your content displayed. When you're finished, click the 'plus' button to add the collection to Dash! `;