[ISSUE-464] Add project name as a part of exported CSV file name

comet-ml · Oct 23, 2024 · fe23b59 · fe23b59
1 parent eaeb9e8
commit fe23b59
Show file tree

Hide file tree

Showing 4 changed files with 20 additions and 3 deletions.
diff --git a/apps/opik-frontend/package-lock.json b/apps/opik-frontend/package-lock.json
diff --git a/apps/opik-frontend/package.json b/apps/opik-frontend/package.json
@@ -76,6 +76,7 @@
     "react-hotkeys-hook": "^4.5.1",
     "react-resizable-panels": "^2.0.20",
     "react18-json-view": "^0.2.8",
+    "slugify": "^1.6.6",
     "stylelint-scss": "^6.4.1",
     "tailwind-merge": "^2.3.0",
     "tailwindcss-animate": "^1.0.7",

diff --git a/apps/opik-frontend/src/components/pages/TracesPage/TracesActionsButton.tsx b/apps/opik-frontend/src/components/pages/TracesPage/TracesActionsButton.tsx
@@ -3,6 +3,8 @@ import last from "lodash/last";
 import get from "lodash/get";
 import { json2csv } from "json-2-csv";
 import FileSaver from "file-saver";
+import slugify from "slugify";
+
 import { ArrowDownToLine, Database, Trash } from "lucide-react";
 
 import {
@@ -22,12 +24,13 @@ type TracesActionsButtonProps = {
   type: TRACE_DATA_TYPE;
   rows: Array<Trace | Span>;
   selectedColumns: string[];
+  projectName: string;
   projectId: string;
 };
 
 const TracesActionsButton: React.FunctionComponent<
   TracesActionsButtonProps
-> = ({ rows, type, selectedColumns, projectId }) => {
+> = ({ rows, type, selectedColumns, projectName, projectId }) => {
   const resetKeyRef = useRef(0);
   const [open, setOpen] = useState<boolean | number>(false);
 
@@ -42,6 +45,9 @@ const TracesActionsButton: React.FunctionComponent<
   }, [projectId, rows]);
 
   const exportCSVHandler = useCallback(() => {
+    const fileName = `${slugify(projectName, { lower: true })}-${
+      type === TRACE_DATA_TYPE.traces ? "traces" : "llm-calls"
+    }.csv`;
     const mappedRows = rows.map((row) => {
       return selectedColumns.reduce<Record<string, unknown>>((acc, column) => {
         // we need split by dot to parse usage into correct structure
@@ -54,9 +60,9 @@ const TracesActionsButton: React.FunctionComponent<
 
     FileSaver.saveAs(
       new Blob([json2csv(mappedRows)], { type: "text/csv;charset=utf-8" }),
-      type === TRACE_DATA_TYPE.traces ? "traces.csv" : "llm_calls.csv",
+      fileName,
     );
-  }, [rows, selectedColumns, type]);
+  }, [projectName, rows, selectedColumns, type]);
 
   return (
     <>

diff --git a/apps/opik-frontend/src/components/pages/TracesPage/TracesPage.tsx b/apps/opik-frontend/src/components/pages/TracesPage/TracesPage.tsx
@@ -267,6 +267,7 @@ const TracesPage = () => {
           {selectedRows.length > 0 && (
             <TracesActionsButton
               projectId={projectId}
+              projectName={name}
               rows={selectedRows}
               selectedColumns={selectedColumns}
               type={type as TRACE_DATA_TYPE}