Lab 1.5 | Dash

--- title: Lab 1.5 | Dash tags: lab --- #### [⬅️ Return to course website](http://cs.brown.edu/courses/csci1951-v/#assignments-box) # <span style="font-size: 50px;">**Lab 1.5: Dash**</span> :::info **Released: September 21st** **Due: September 27th 11:59pm ET** To get checked off for Lab 1.5, fill out the form at the bottom of the handout after completing both parts of the lab (Dash and Intermedia). :::     *[HTML]: Hyper Text Markup Language *[W3C]: World Wide Web Consortium *[NPM]: Node Package Manager *[IDE]: Integrated Development Environment *[MERN]: MongoDB, Express, React, NodeJS *[Yarn]: Yet Another Resource Negotiator *[RA]: Research Assistant # **Introduction** <div style="text-align:left; margin-bottom: 20px"><img style="border-radius:10px; width:300px" src="https://i.imgur.com/WYZrqL2.png" /></div> In this lab we will be introducing you to some key features that Dash has and how to use them. In order to make the most delicious donut, you need to have an idea of what other donut stores do well, and what they don't do quite as well! :::info **Objective:** The goal of this lab is to introduce you to a hypermedia system and some of its features, so you can consider which features you may want to implement in the hypermedia systems that you are building. This lab will also help prepare you for the Content Creation Assignment. ::: :::warning For this lab you will be split into two groups. Each group will spend 1 hour on Intermedia and 1 hour on Dash. ::: ## Checklist - [ ] Create an account in Dash - [ ] Choose a use case - [ ] Populate your dashboard - [ ] Add links and relationships # Using Dash :::success **Step 1** 1. Using Google Chrome, go to https://browndash.com/signup to make an account using your Brown university email address (@brown.edu). 3. Click the "New" button in the top-left to create a dashboard. ::: After this lab, you'll be using Dash to build your own corpus in the `Content Creation` assignment, so the idea behind this lab is to get your familiar and to get you started. **Note:** You will be using `Novice mode` throughout this lab. There is a LOT more in Dash that we have removed from novice mode in favour of usability. :::info If you have any questions *during* the lab, you can ask one of the Dash RAs (research assistants) or check Dash's **[documentation](https://brown-dash.github.io/Dash-Documentation/)**, which is also accessible through the `?` button in the upper right corner within Dash. If you have any questions *after* the lab,, you can check the documentation or post any questions in the `#dash` channel in Slack! ::: ## Choosing a use case There are many ways you can use Dash. Unlike other hypermedia systems that address specific issues such as `Roam Research` and `Remnote`, Dash is not made for a single use case. As you work through this lab—and so that your use of Dash is more interesting for you—we hope you pick a use case (note that this is not mandatory). Here are some options: - Note taking - PDF / Webpage reading - Build an interactive guide - Cook book - Travel guide - Create a collection of sport teams / data ## Populating your dashboard :::success **Step 2**: Watch this video on `Creating and Importing Documents` ::: <div style="text-align:center; margin-bottom: 20px"> <iframe src="https://drive.google.com/file/d/1ssG_zGsx0bTz6yvmChZW-ezzQfM1inQm/preview" width="640" height="400" allow="autoplay" allowfullscreen="allowfullscreen"> </iframe> </div> :::success **Step 3:** The first thing that you'll want to do is collect some materials for your dashboard. Try and collect some of the following materials to use: - Webpages - PDFs - Videos - Audio recordings / songs - Text notes ::: <div style="text-align:center; margin-bottom: 20px"><img style="border-radius:10px; width:300px" src="https://i.imgur.com/0j3UUzo.png" /></div> If you are stuck without an idea for a use case, and without materials, you can download files from this [**Google Drive folder** ](https://drive.google.com/drive/folders/1WP_3NGGU4XKjG00S_fPs2V-3hvB9h_D2?usp=sharing) and use materials about our beloved `Blueno` or `Donuts`. **Additionally, here are some websites that you can import:** :::warning Some websites, particularly websites that contain a lot of JavaScript (eg. Google Docs pages) will not render inside of Dash. If a website does not load at all, it is likely either due to CORS permissions or the fact that the website is not a basic HTML page. ::: `Donut` - https://time.com/2837756/donut-or-doughnut/ `Blueno` - https://en.wikipedia.org/wiki/Urs_Fischer - https://www.providencejournal.com/news/20160703/giant-bear-sculpture-at-brown-university-has-its-friends-foes :::info You can also drag videos directly from YouTube. Try to keep them to under 4 minutes to reduce load time. The way that you drag them in is the same as how you would import a webpage! ::: ## Links and relationships Once you have a populated your dashboard, you are ready to add some links to create relationships! 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). ### Create links between documents #### Linkboard The first method for link creation is through the `linkboard`, which is convenient for creating multiple links from the same source. The documentation [here](https://brown-dash.github.io/Dash-Documentation/features/linking/#creating-links---linkboard) discussses how to ue the linkboard. The linkboard functions as a clipboard (similar to copy and paste) for links in the sense that your source is always “copied” to the linkboard, which we call `Start link` until you clear it, which we call `Complete link` or “copy” another source. You can see the steps taken to link from a video, `Free Solo` to a webpage, `Tommy Caldwell`. ![](https://i.imgur.com/xrRb3ZG.gif) You can also link from an annotation to an annotation within another document. In text based documents you select the text and use the same `Start link` button. In temporal media documents, or with overlayed documents you can link directly from the annotation itself. ### Create link from search Using Dash's search functionality, you can also search to create a link from any selected text using the `Search link` button that appears when you have text selected. ![](https://i.imgur.com/tXcgq12.png) ### Following and editing links Once you have created links, you can use the blue circle with a number in it in the document decorations (menu that appears beneath a document when clicked on) to navigate to the document that you have linked to. You can also edit the properties of the link such as its `Description` and `Relationship` by hovering over the link and clicking on the edit button that appears on the right. ![](https://i.imgur.com/jwfUfwL.jpg) You can also use the pointer button in the document decorations to turn your document into a button, so that if you click on the document, it will follow the link directly to the destination. For example clicking on the pointer in the following image will link it directly to the `El Capitan` reference that we linked it to earlier. #### Visualising links You can also visualise links by going to a nodes link menu, hovering over a link, and clicking on the edit button that appears on the right. From there, you can toggle on the 'show anchor' and 'show link line' options. The link will be visualised according to the `relationship` it represents. Each `relationship` is represented by a unique color. The thickness of the line indicates how many other documents have the same relationship. You can use the edit link menu to edit the links and change the relationships. :::warning Note: The line API Dash uses does not work very well when you are moving or zooming in and out. As a result, you may notice some visual glitches when visualizing links. ::: ![](https://i.imgur.com/6SPaDhM.png) :::success **Step 4:** Create links between the documents and try out following them and setting link relationships! ::: ## Annotation and markup You can find the documentation on markup [here](https://brown-dash.github.io/Dash-Documentation/features/markup/). :::success **Step 5**: Annotate and markup any documents that you would like to markup! ::: ## Perspectives Perspectives are the different ways that you can view a collection of documents. Dash supports some perspectives in `novice mode`, and additional views in `developer mode`. The most essential perspectives that Dash supports are: | Perspective | Description | |:-------------|:------------------| | Freeform | Unbounded 2D space in the form of a canvas. This is Dash’s default/primary view. | | Schema | Manipulating documents via key-value pairs and maintaining structured viewing and sorting of data. | | Stack | Categorizing documents by specified keys while maintaining a live preview of each document. | | Notetaking | Multiple scrollable stacks of documents. A multicolumn version of stacking view. | :::success **Step 6:** Play with the `Schema`, `Stack`, and `Notetaking` perspectives. In Schema view, try to add a new metadata field to a document! ::: ### [Optional] Views in Developer Mode Switching to `Developer mode` by clicking on the gear icon in the upper right, then the modes tab, will give you access to many more perspectives. Feel free to play around with them, but be aware that they are in a less stable state, so don't surprised if things break or don't work as expected. ## [Optional] Ink You can find the documentation on inks [here](https://brown-dash.github.io/Dash-Documentation/features/ink/). ## [Optional] Collaboration Ask an RA during the lab session if you want to try out real-time collaboration in Dash! :::info There are many more features that you have not yet used - for example trails, which you will be introduced to in the `Content Creation` assignment. Let us know if you have any questions about anything! ::: # Checkoff After completing both the Dash and Intermedia parts of the lab, fill out this [Gradescope Form](https://www.gradescope.com/courses/592164/assignments/3206397/) to get checked off! <div style="text-align:left; margin-bottom: 20px"><img style="border-radius:10px; width:300px" src="https://i.imgur.com/cg6eofM.png" /></div>