Progress Update 4

3/18 11:15PM

Backtracking...

After the last update where I built at the App Bar, Drawer, and Menu components, I tried to then build out the Home Page, Condition Pages, and Trial Pages. I was still unfamiliar with handling React Components, so instead of importing the App Bar, Drawer, and Menu components into the pages, I copied and pasted the code into the 3 page components.

Because of this, I ended with over 500 lines of code in each file, and it was getting really hard to navigate to debug and add new features. I took some time (as much as I could with all my upcoming midterms) to rebuild the App Bar and Drawer components and simplify them back to the most core features I wanted for the MVP (though I kept the Search Bar). I also tried to make sure I understand almost everything inside each Component - before I had been relying heavily on the sources codes on the MUI API page and only knew what certain parts did.

I also took time to learn how to pass function calls between Components through the use of props. (Shoutout to Trinity for introducing me to props!) For instance, when the menu icon on my App Bar Component is clicked, the handleDrawerOpen function in one of my pages is called, setting the drawer to open. This state is passed to my MyDrawer Component, rendering it in the open configuration.

Tree Component

Currently, I'm focusing my efforts on building the Tree Component. At my last meeting with Hong, we went over what the data for each trial would look like:.

{"TrialId":"NCT00000104","MeshPaths":["C25.723:Chemically-Induced Disorders/Poisoning:Heavy Metal Poisoning|Bites and Stings|Carbon Tetrachloride Poisoning|Fluoride Poisoning|Foodborne Diseases|Gas Poisoning|Plant Poisoning|Psychoses, Substance-Induced|Water Intoxication|Mycotoxicosis|Neurotoxicity Syndromes|Arsenic Poisoning|Chemical and Drug Induced Liver Injury|Organophosphate Poisoning","C25.723.522.750:Chemically-Induced Disorders/Poisoning/Heavy Metal Poisoning/Lead Poisoning:Lead Poisoning, Nervous System"],"Title":"Does Lead Burden Alter Neuropsychological Development?","Summary":"Does Lead Burden Alter Neuropsychological Development?","Condition":"Does Lead Burden Alter Neuropsychological Development?","LocationCountries":["United States"]}

This is the structure of each element in the MeshPaths array:

path : child|child|...|child

We discussed that a trial could have multiple paths (as seen in the MeshPaths array), and also discussed the extent to which the tree would expand.

Currently, my dynamic tree code can correctly generate a tree from paths given as ['a/b/c/d', 'a/b/c/e', 'a/b/f'], but fails to correctly handle cases where the paths look like ['a/b/c/d', 'c/d/e'] which should generate a tree of one path: a/b/c/d/e. Instead, my code treats the second path as a separate tree.