Assignment 4: Additional Hypertext Features
Released: November 3rd
Due: November 22nd at 11:59 PM ET
This project is more self guided and "choose your own path" than the others, and should lead nicely into the final project!
Since this project is more more open-ended than the others, there is no deployed demo. We have included some screenshots to offer inspiration for how to design this functionality, but we would like to see how you can come up with designs and user experiences of your own without a reference implementation.
The requirements for this assignment are as follows: You are expected to complete the graph visualization feature and at least one additional feature.
If you are taking this course as a capstone or for 2000-level graduate student credit: You should choose two of the additional features to implement!
Because this assignment is very open-ended, each TA will support a specific feature so that they can best help you. You may ask questions to other TAs as well, but they may be less prepared to help you (and may redirect you to another TA).
We've created Slack channels for each feature, where you can post public questions:
#graph
for questions about graph visualization#search
for questions about search#freeform
for questions about freeform canvas#temporal
for questions about temporal mediaFor questions about a particular feature, you should target going to the specified TA(s) office hours.
Note: There is no new repo to clone for this assignment! Because we are implementing code that will not interact with Assignment 3 features, you should iterate upon your Assignment 3 code base for Assignment 4.
TAs: Jenny, Sedong, and Patrick
Thus far, our hypertext system hasn't had any visualization of links between nodes.
To visualize our nodes and links, we'll be using the React Flow package to build a graph by creating a list of nodes and edges.
Minimum functionality requirements:
Example visualization
Suggested roadmap:
npm install react-flow-renderer
react-flow-renderer
and NOT reactflow
TAs: Alina and Nick
Search is a critical feature for any platform containing lots of information.
Our search feature will allow users to quickly find nodes by either thenode.title
or node.content
fields. Fortunately, MongoDB provides text search capabilities. For this assignment, please refer to the MongoDB text search documentation and complete all mandatory functionality requirements. You can alternatively use the MongoDB Atlas Search documention, which provides more powerful search features.
Functionality requirements:
node.title
and node.content
fieldsMongoDB 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 differences between these two packages, you can read this thread.
Note, while we want you to use the mongodb
package for this assignment, you can use either package for your final project!
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. This will require adding to BackendNodeGateway
and NodeCollectionConnection
- just as we have done for all previous endpoints. Think about the best way for the client to send the desired search string to this endpoint.Differences in documentation and our code:
In the previously mentioned in the documentation for mongodb
search, there are some alterations you will need to make:
db.<collection-name>.<method-name>
, you will need to use: this.client.db().collection(this.collectionName).<method-name>
in NodeCollectionConnection.ts
instead.TA: Andrew
Interested in implementing a Figma/Dash/Miro style unbounded 2D canvas? Then you should choose to do freeform canvas
!
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!
Functionality requirements:
Canvas
view option for folder nodes in your codebase.INode
and any relevant types to include a property metadata
. Metadata by definition simply means data that describes other data; in our case, {x, y}
could describe its node's position.metadata
. At a high level, draggable behavior depends on the different states of users' inputted mouse events. Track the cursor's location on the screen in combination with these states, and mirror the appropriate changes when moving nodes.PointerEvent
s in a similar way to step 4 to shift divs
appropriately.metadata
to database through FrontendNodeGateway
. This functionality could be automatic or triggered manually.You do not have to follow these steps! There are many ways to abstract and implement this functionality.
TA: Becca
We have spent half of the semester on implementing text nodes and image node, but at times YouTube videos or Soundcloud songs can be a great addition to your hypertext system. Choose this track to implement time-based media nodes in your system!
For this assignment, we recommend you using 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.
Functionality requirements:
Start Link
or Complete Link
button, media should automatically pauseDeploy your frontend and backend as in previous assignments, and include the URLs in your README. Then submit your code on Gradescope.
Please ensure your entire project is anonymous and your name is not present anywhere (including in the deploy URLs), since we use anonymous grading.
Note that there are no auto-graded portions of this assignment (no points awarded for linting or formatting). Note that you could still lose points for not using the linting or formatting tools if it causes your code to be difficult to read when the TA is grading it.
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 optional 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 graph visualization and at least one additional feature. If you are taking the course as a capstone or for graduate student credit we expect minimum functionality in graph visualization and at least two additional features.
If you'd like, you can implement an additional feature beyond that for extra credit.