Add the feature of side navigation and preview.

[StarConnor]

1. Add a module in sidenav.tsx in ui/src/components/app/ to support side navigation.

   • The side navigation has the feature of showing a blue bar and coloring the text blue when the users scroll to the corresponding part of the webpage, see figure->
     
   • The CSS configuration is set as .side-nav in ui/src/globals.css and the html CSS snippet is used to make the movement smooth.

2. Add the id description of the "Top", "Interp.", "Hist.", "Logits", "Act." to corresponding <div> components. These serve as the links and side navigation could reach the links through <a href="#xxx">.

3. To avoid too many sample tabs that could exceed the width of the wrapping card, I split the sample tabs into 2 parts. Because the new analysis seems to use 10 sample configs (i.e. "Top Activation", "Sample 90%", ..., "Sample 10%"), the split seems to be perfectly fitted with the card width. See figure->
   

[StarConnor]

Fix some bugs left in the last commit.

[StarConnor]

Add the feature of preview.

Explain

Adjust the display of every sample from static block to the "accordion", which will display the context around the token which has the max activation in the sample (100 tokens before and 100 tokens after) and display the whole sample on the click.

Implementation

In the file ui/src/components/feature/sample.tsx

1. Wrap the previous return of sample block with the accordion component.
2. Add the preparation of the tokens around the token which has the max activation. This will be counted as the AccordionTrigger contents. (Note: the preparation is sort of redundant, but I didn't know how to make it neater).

In the file ui/src/components/ui/accordion.tsx

3. Modify the accordion component in ui/src/components/ui/accordion.tsx. Concretely, I delete the style of hover:underline because the accordion trigger content will has an underline if you hover over it (this is annoying).