Update GUI

[LittleAprilFool]

1. Update the styling of the tool

2. Add the Unit Inspector, where the user can update the unit value/styling through this GUI interface.

3. Please check Example 1 (src/example1.svg, src/examples.js), I hardcoded the className and id for the generated svg, e.g.,

   <g id="page0" class="page" display="inline" style="display: inline;">
   <g transform="translate(0, 50)" id="component0" class="component">
   <g id="unit0" class="unit"> ... </g>
   <g id="unit1" class="unit"> ... </g>
   </g> </g>

4. When updating the unit value/styling through the GUI interface, currently I hardcoded the data in src/hardcode/data.js. It is a json array that looks like:

   export const hardcodeData = [{
   pageID: 'page0',
   componentID: 'component0',
   unitID: 'unit0',
   value: '1',
   color: "blue",
   isArrow: false,
   isIndex: false
   },
   {
   pageID: 'page0',
   componentID: 'component0',
   unitID: 'unit1',
   value: '2',
   color: "white",
   isArrow: false,
   isIndex: false
   }
   ...
   ]

   There are rooms to tweak around in terms of how we want this data to look like so that they can better connect to the part to change the mermaid code.

5. Let's keep this PR open for now. I can help you merge it back to main when it's ready.