[curator-viewer] add time logging and curator viewer show distribution

[CharlieJCJ]

Changes:

• added generation time logging
• add generation time UI, in distribution view, sortable table view and detail view
• added requests & responses overlay time series plot (default view)
• enabled all with streaming
• Resolves
  • [Generic Response Expose Metrics]: create_by, finished_by #145
  • partially address Distribution graph is skewed for data viewer  #105 for better bins, but addressing outliers, still need work. Perhaps selecting a range for user to zoom in if they see most of the points lie in a small region?
  • [curator-viewer] Dark mode tooltip color after hovering histogram distribution is not good #150

New GenericResponse:

class GenericResponse(BaseModel):
    response_message: Optional[Dict[str, Any]] | str = None
    response_errors: Optional[List[str]] = None
    raw_response: Optional[Dict[str, Any]]
    raw_request: Optional[Dict[str, Any]] = None
    generic_request: GenericRequest
    created_at: datetime.datetime
    finished_at: datetime.datetime

Screen.Recording.2024-11-19.at.4.15.49.PM.mov

Screen.Recording.2024-11-19.at.2.05.59.PM.mov

Nice to have:

• https://www.infoworld.com/article/2334935/recharts-intro-to-javascript-charting.html (brush component in UI), for selecting time range

[CharlieJCJ]

let me add one more view, which is the time series plot, that's useful for #141 comparison with OpenAIOnline

[CharlieJCJ]

Ready for review @vutrung96 @RyanMarten

[vutrung96]

Some errors I found:

Module not found: Can't resolve 'prismjs'
  1 | import { Button } from "@/components/ui/button";
  2 | import { Check, Copy } from "lucide-react";
> 3 | import Prism from 'prismjs';
    | ^
  4 | import 'prismjs/components/prism-python';
  5 | import 'prismjs/themes/prism-tomorrow.css';
  6 | import React from 'react';

https://nextjs.org/docs/messages/module-not-found

2. security vulnerability

(bespokelabs-curator-py3.11) (base) trung@trung-cpu:~/curator/bespoke-dataset-viewer$ npm install

up to date, audited 580 packages in 6s

150 packages are looking for funding
  run `npm fund` for details

1 high severity vulnerability

To address all issues, run:
  npm audit fix

Run `npm audit` for details.
(bespokelabs-curator-py3.11) (base) trung@trung-cpu:~/curator/bespoke-dataset-viewer$ npm audit fix

changed 1 package, and audited 580 packages in 6s

150 packages are looking for funding
  run `npm fund` for details

3. Some unique key error in Bespoke Curator Runs
   

4. NaNs when running camel.py??
   

[CharlieJCJ]

point1, 2 resolved.
point 3 addressed.
point 4 is due to not poetry shell during testing.

---

need to double check whether point3 is actually been resolved, can't reproduce the same setting from my end.

[vutrung96]

can confirm it works on my end and the graph looks beautiful. thank you @CharlieJCJ !

[vutrung96]

actually one more issue, seems like text is off here (both lines say responses received)