--- title: Assignment 4 | Additional Hypertext Features tags: assignment --- <span style="font-size: 50px;">**Assignment 4: Additional Hypertext Features**</span> :::info **Released: November 2nd9th, 11:59pm ET** **Due: November 22nd, 11:59pm ET** ::: <!-- INFO BOXES :::success GREEN This is for any step by step instructions that students should follow. ::: :::info BLUE This is for important assignment information throughout the assignment: **Released: September 8th, 6:00pm ET** **Due: September 15th, 11:59pm ET** ::: :::warning YELLOW Use this info box for disclaimers. ::: :::danger Use this info box for important points that students should not miss! ::: :::spoiler Dropdown list Use this ::: --> <!-- TYPESCRIPT CODE BLOCKS ```typescript const list = [10, 20]; console.log(list.map(x => (x * x))) ``` --> <!-- HOW TO CHANGE COLOR IN MARKDOWN <span style="background:aliceblue">some text with a **lightblue** background</span> <span style="color:red">some **red** text</span> --> <!-- These are a list of shortcuts available. --> *[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 # **Introduction** This project will operate more like the final project than others ones and should lead nicely into the final project. Although you will be submitting your own code - we encourage working together with others to discuss design / syntax / approach. ![](https://c.tenor.com/HgjpIg9fxH0AAAAC/excited-lets-get-this-party-started.gif) :::success **The requirements for this assignment are as follows:** You are expected to complete the functionality requirements for at least **one** of the features below. **If you are taking this course capstone** then you should choose 2 of the following features to implement! You are also able to choose and design your own additional feature of your own design. ::: :::warning No new repo to clone for this assignment! Because we are implementing code that will not interact with Assignment 3 features, we ask that you iterate upon your Assignment 3 code base for Assignment 4. ::: ## **Checklist** - [ ] Choose a feature/features from the below options to implement in your `MyHypermedia` web app - [ ] Join the relevant channel for the feature/s that you will be implementing # **Feature 1: Search** :::info **TA: Jinoo** Feel free to slack me for any questions relating to search :) ::: Search will allow users to quickly find nodes by either `node.title` or `node.content` fields. Fortunately, MongoDB provides text search capabilities [documentation for `mongodb` 4.0 package we use [here](https://docs.mongodb.com/drivers/node/v4.0/fundamentals/crud/read-operations/text/)]. For this assignment, please refer to the documentation linked above and complete all mandatory functionality requirements: :::info **Functionality requirements:** - [ ] Search nodes by indexing their `node.title` and `node.content` fields - [ ] Sort search results by relevancy score (see 'Sort by Relevance' section on [**this**](https://docs.mongodb.com/drivers/node/v4.0/fundamentals/crud/read-operations/text/) page) - [ ] Frontend UX supports filtering of search results by node type (image, text, etc.) - [ ] Frontend UX supports the sorting of search results by date created or last updated (most recent at the top) - pick either date created or last updated, no need to provide both options - [ ] When clicking on a search result, the user is automatically navigated to that node ::: :::warning **MongoDB vs Mongoose packages:** There are two popular packages that support MongoDB functionality for Node.js: `mongodb` and `mongoose`. For the purposes of this assignment, we will be sticking to `mongodb` which is the native package provided by MongoDB for Node.js applications. Please make sure that when reading documentation or help forums online, that it is for the `mongodb` and not the `mongoose` package. For more on the difference between these two packages you can read [this](https://stackoverflow.com/questions/28712248/difference-between-mongodb-and-mongoose) thread. Note, while we want you to use the `mongodb` package for this assignment, you can use either package for your final project! ::: ### **Recommended steps:** 1. Write a backend endpoint in `server/src/nodes/NodeRouter.ts` that when given a string, your search term, will return a list of nodes (sorted by relevancy) that are related to that search term. Note, this will require adding to `NodeGateway` and `NodeCollectionConnection` - just as we have done for all previous endpoints. 2. Ensure that this backend endpoint works as expected using [Postman](https://www.postman.com/) (refer to Lab 1 or online documentation for a refresher on Postman if needed) 3. Develop and incorporate a search bar component in your frontend that will make a request to this newly created search endpoint 4. Incorporate a way to display search results 5. Develop navigation functionality such that you navigate to the relevant node upon clicking on a search result 6. Develop frontend filtering based on node type 7. Develop sorting by last updated functionality :::danger **Differences in documentation and our code:** In the previously mentioned documentation for `mongodb` search, there are some altercations you will need to make: 1. When the documentation says: `db.<collection-name>.<method-name>`, you will need to use: `this.client.db().collection(this.collectionName).<method-name>` in `NodeCollectionConnection.ts` instead. ::: # **Feature 2: Collection Visualizations** Are you interested in beautiful things? Wondering different ways to visualize hypertext nodes and their relationships? Then you should choose to do `collection visualizations`! :::info **TA: Geireann** Make sure to join the ==#visualization== channel if you are doing any of these options for Assignment 4 and ask any questions you have there! ::: **Here are some examples of collection visualizations used in other hypermedia systems!** **<span style="background: lightpink; padding: 3px 10px; border-radius: 3px">Roam Research Graph</span>** <div style="text-align:left; margin-bottom: 20px"><img style="border-radius:5px; width:700px; border:solid 2px black" src="https://noduslabs.com/wp-content/uploads/2020/08/infranodus-roamresearch-graphs-1024x703.png" /></div> **<span style="background: lightpink; padding: 3px 10px; border-radius: 3px">Miro Canvas</span>** <div style="text-align:left; margin-bottom: 20px"><img style="border-radius:5px; width:700px; border:solid 2px black" src="https://images.ctfassets.net/w6r2i5d8q73s/3JYJ5ankbI3Ed0uCdT0lWb/dffc0a5cbfbd5569acdbefdf52be9400/M-ice-breaker.png" /></div> ## **Option 1: Link Visualizations** This option will involve using and understanding the `React-sigma` [package](https://sim51.github.io/react-sigma-v2/). It will involve understanding the package and adapting the nodes and links such that they can be used for the package. Here is a proof of concept built in `MyHypermedia`: <div style="text-align:center; margin-bottom: 20px"><img style="border-radius:5px; width:700px; border:solid 2px black" src="https://i.imgur.com/X9SgGlr.gif" /></div> The package consists of a list of `nodes` and a list of `edges` (aka links!). A basic implementation is as follows: ```typescript= // Component that creates the graph const MyCustomGraph = () => { const sigma = useSigma(); const graph = sigma.getGraph(); graph.addNode("Chai", { label: "Chai", x: 1, y: 1, color: "#FF0", size: 10 }); graph.addNode("Jinoo", { label: "Jinoo", x: 0, y: 0, color: "#00F", size: 5 }); graph.addEdge("chai", "jinoo", { color: "#CCC", size: 1 }); return null; }; return ( <div> <SigmaContainer> <MyCustomGraph /> </SigmaContainer> </div> ) ``` The code above would show the following graph: <div style="text-align:left; margin-bottom: 20px"><img style="border-radius:5px; width:300px; border:solid 2px black" src="https://i.imgur.com/PqjCCHC.png" /></div> :::info **Functionality requirements:** - [ ] Show nodes and represent links in the visualization - [ ] Organise the nodes such that they are not overlapping - we want to ensure that there is a clear structure to their positioning ::: ## **Option 2: Freeform Canvas** Interested in implementing a Figma / Dash / Miro style unbounded 2D canvas? Doing this will involve updating the `INode` object such that it includes the necessary metadata (`x`, `y`...) and understanding how `onPointerDown`, `onPointerMove` and `onPointerUp` can be used to pan the canvas and drag documents around on it. `onPointerMove`, `onPointerDown` and `onPointerUp` have been used before in the codebase, but understanding the logic behind it can go a long way! <div style="text-align:left; margin-bottom: 20px"><img style="border-radius:5px; width:700px; border:solid 2px black" src="https://i.imgur.com/vCJxcgF.gif" /></div> :::info **Functionality requirements:** - [ ] Drag documents around the canvas - [ ] Pan / scroll to navigate around the canvas - [ ] Ensure that all metadata is permanent and stored in the database ::: ## **Option 3: Other Visualization** You can do another visualization of your choice as well, as long as you get it approved by a TA! # **Feature 3: Temporal Media** We have spent half of the semester on implementing text nodes and image node, but at times YouTube video or Audible audiobooks can be a great addition to your hypertext system. Choose this track to implement time-based media nodes in your system! :::info **TA: Chai** Reach out for any question about using the new package and writing nice CSS! ::: For this assignment, we recommend you using [React Player](https://www.npmjs.com/package/react-player) to easily support both audio and video nodes. The hard part of this track is to extract time information on the anchor we create - the anchor would ideally have a timestamp associated with it. ![](https://i.imgur.com/308yUjL.png) :::info **Functionality requirements:** - [ ] Support both Audio/Video media nodes via media URL link - [ ] For temporal media nodes, anchors should contain information about timestamp - [ ] Upon clicking `Start Link` button, video should automatically stop - [ ] Upon completing linking, video should automatically resume - [ ] Single click of link should seek video/audio to specific timestamp - [ ] Perserve basic linking functionality ::: ### **Recommended steps:** 1. Read documentation for React Player, and implement a new type of node to support displaying temporal media. 2. Work on adding timestamp information to temporal anchors. 3. Finetune the system to add autostop, timestamp seek, and auto resume functionalities. # **Handin** Handin by deploying and by submitting to Gradescope with the updated frontend and backend URL. # **Grading** Considering that this is such an open ended assignment, grading for this assignment will lenient. The TA grading will be checking each of the functionality requirements and will only mark you down if you don't meet one of the check boxes. Since each feature in this assignment has a different number of functionality requirements, points lost on a missing functionality requirement will be scaled to the number of functionality requirements for that specific feature. We are expected minimum functionality based on the functionality requirements for **at least one feature**. If you are taking the course as a capstone we expect minimum functionality in **at least two features**.