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.
-Delete Node: to delete a node NOTE: Never delete the original "Parent-1" / root node.
-Go to link: open page on link attached to a given node.
7. To download a made graph. Click the "Download" button. The downloaded file will be named according to the root node e.g. "Parent-1.YnP.json".
8. To re-upload a previously downloaded graph type the full path to that file into the "path to file" textbox at the top of the app and then click "upload". One can also upload an old "json" file to be the child of a plotted node (by using the option "upload branch" in the right click menu). Similarly one can download a branch of a tree (with the option "upload branch" in the right click menu).
9. One can search the tree by typing a search term into the "path to file" textbox and clicking the search button. The most similar sentence to that search will be returned centered on. A next and back button can be used to go between nodes of decreasing similarity to the search.