Yarn and Pins

Yarn and pins (YnP) is a chrome extension that allows one to make mind maps while researching a topic online. It uses a tree graph to which one can add and modify branches that represent subjects/concepts within the topic of interest. URL links are attachable to each node and one can navigate to the link where information was found. Hence this app acts as a customisable visual library for research articles. See https://www.youtube.com/watch?v=TbCv5-S_JH0&ab_channel=PaperAudio for a tutorial.

The code is inspired by https://bl.ocks.org/adamfeuer/042bfa0dde0059e2b288 which was written by Adam Feuer. Some portions of the code are under MIT License.

Instructions:

1. Download the app. Refresh all open tabs before using the app. Click in the top right corner of your chrome browser where the app will appear. Once clicked a window will open with a single node with "Parent-1" beside it.
2. If the app is slow/ nothing appears in the window. You can resize it to make things faster- e.g. type "20" into the width and height text boxes and click "resize"- this will make the app faster.
3. You can navigate inside the window by clicking and dragging to go vertically/horizontally. You can also zoom in and out by scrolling.
4. If you click on the "Parent-1" node the window will focus it at the center of the window and a text box with the info pertaining to it will appear.
5. If you right click on the node a menu will appear with a set of options. NOTE: if it takes a while for the menu to appear- click and drag to toggle and the menu will then appear (or change to a smaller screen size as shown above).
6. The options in the menu allows one to do different things with a node, the most basic of which are: -Edit: Used to change the title/ text in the node so that the node label/ text that appears when clicked will be different. Editing is done in a form that appears in the "Edit" option is selected. When finished editing click the button at the bottom of the form to implement changes. -Create Child Node: when this is clicked the selected node will have a new child node connected to it- the content of which can be modified in a form that appears. The name/ text of the new child node will default to "empty" unless one has highlighted text on a website in the chrome browser. This can be changed in the form and then when finished editing click the button at the bottom of the form to implement changes.