Show UUIDs in the Properties Taxonomy page

[edstratford]

The Properties taxonomy page uses the hierarchy table to show how variables and values are related to each other.

It will be useful to display both the uuid and obj_uuid columns labeled thus:

"Hierarchy: \<uuid> Var/Val: " Font in the blue we use elsewhere. Font slightly smaller than content on Left

This can happen immediately right of the content displayed on the left i.e : (Note values are correct only for the topmost row (Bibliography) - all rest are just copy of some values.)

Place toggle near top of page to allow user to toggle these statements visible or invisible.

[edstratford]

Allow user to copy either uuid.

[hbludworth]

As Dr. Stratford outlined above, he'd like for some more information to be displayed in the Properties Taxonomy view. This view can be accessed by going to the Admin section of the website. "Properties Taxonomy" will appear in the navigation pane on the left.

Each of these nodes represents variables or values of properties in the hierarchy table. Sometimes Dr. Stratford look at these and needs to find their associated rows in the database. The easiest way for him to do so would be to use the UUIDs, but they aren't visible to him.

As such, the goal of this issue is to:

1. Display the hierarchy.uuid next to each item
2. Display either the variable.uuid or value.uuid next to each item depending on which one it is
3. Add a copy button
4. Add a toggle to show or hide the uuids

Let's dive into how we can accomplish this. Steps 1, 2, and 3 will be edits that happen in the ParseTreeNode.vue file. Step 4 will involve changes to both that file and /frontend/src/views/Admin/PropertiesTaxonomy/index.vue as well.

ParseTreeNode.vue is a bit of a complicated file with a lot going on. This is especially true because it is a recursive component where it actually displayed parse tree node components inside of itself. This is used in order to render a tree. Take time to familiarize yourself with the file and try to understand what's going on.

To begin, I'll give you a hint that you'll add the new code between lines 76 and 77. Hopefully that helps you find your spot.

For step 1, you'll want to add code to display the uuid information there. Make sure to use a v-if to make sure that this only appears when allowSelections is false. Then, simply display the hierarchy uuid. Luckily, this info is already available at each node. Simply do child.uuid.

For step 2, add another line to display either the variable or value uuid. Luckily, this is super easy because child.objectUuid will already have the correct one. So just display that! Easy!

For step 3, you'll want to add a "copy" button to the right of both displayed uuids. It will be an icon. Probably best to use the 'content-copy' icon that already exists in mdi. When clicked, it should copy the uuid to the user's clipboard. I've never done this before, so you'll have to do some research to see how to copy to a clipboard from JS. It shouldn't be too tricky.

NOTE: When adding the copy button, you may run into an issue where clicking on the new button will also cause a click on the expansion-panel and make it open and close. If so, you'll have to figure out how to prevent that. That can get tricky, but you can figure it out!

Finally, for step 4, add a toggle to the index.vue file mentioned above. Vuetify has a built in toggle so use that one. By default it should be off which hides the uuids. When toggled, it should show the uuids. So, you'll have to pass in its value as a prop to the ParseTreeNode.vue component and toggle the new code to show or not.