Merge branch 'main' into andrescrz/OPIK-71-add-metadata-to-experiment

comet-ml · Sep 11, 2024 · 5e95b6e · 5e95b6e
2 parents 4fe574c + 77996fe
commit 5e95b6e
Show file tree

Hide file tree

Showing 10 changed files with 32 additions and 7 deletions.
diff --git a/apps/opik-frontend/index.html b/apps/opik-frontend/index.html
@@ -5,7 +5,6 @@
     <link rel="icon" type="image/svg+xml" href="/favicon.ico" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Comet Opik</title>
-    <script type='text/javascript' src='../../config.js?version=1725550071774'></script>
   </head>
   <body class="size-full">
     <div class="size-full" id="root"></div>

diff --git a/apps/opik-frontend/public/config.js b/apps/opik-frontend/public/config.js
diff --git a/apps/opik-frontend/src/api/datasets/useExperimentsList.ts b/apps/opik-frontend/src/api/datasets/useExperimentsList.ts
@@ -3,6 +3,7 @@ import api, { EXPERIMENTS_REST_ENDPOINT, QueryConfig } from "@/api/api";
 import { Experiment } from "@/types/datasets";
 
 type UseExperimentsListParams = {
+  workspaceName: string;
   datasetId?: string;
   search?: string;
   page: number;
@@ -16,11 +17,12 @@ export type UseExperimentsListResponse = {
 
 const getExperimentsList = async (
   { signal }: QueryFunctionContext,
-  { datasetId, search, size, page }: UseExperimentsListParams,
+  { workspaceName, datasetId, search, size, page }: UseExperimentsListParams,
 ) => {
   const { data } = await api.get(EXPERIMENTS_REST_ENDPOINT, {
     signal,
     params: {
+      workspace_name: workspaceName,
       ...(search && { name: search }),
       ...(datasetId && { datasetId }),
       size,

diff --git a/apps/opik-frontend/src/components/layout/SideBar/SideBar.tsx b/apps/opik-frontend/src/components/layout/SideBar/SideBar.tsx
@@ -91,6 +91,7 @@ const SideBar: React.FunctionComponent<SideBarProps> = ({
   );
   const { data: experimentsData } = useExperimentsList(
     {
+      workspaceName,
       page: 1,
       size: 1,
     },

diff --git a/...pik-frontend/src/components/pages/CompareExperimentsPage/AddExperimentToCompareDialog.tsx b/...pik-frontend/src/components/pages/CompareExperimentsPage/AddExperimentToCompareDialog.tsx
@@ -14,6 +14,7 @@ import Loader from "@/components/shared/Loader/Loader";
 import DataTablePagination from "@/components/shared/DataTablePagination/DataTablePagination";
 import SearchInput from "@/components/shared/SearchInput/SearchInput";
 import { cn } from "@/lib/utils";
+import useAppStore from "@/store/AppStore";
 
 const DEFAULT_SIZE = 10;
 
@@ -26,6 +27,7 @@ type AddExperimentToCompareDialogProps = {
 const AddExperimentToCompareDialog: React.FunctionComponent<
   AddExperimentToCompareDialogProps
 > = ({ datasetId, open, setOpen }) => {
+  const workspaceName = useAppStore((state) => state.activeWorkspaceName);
   const [search, setSearch] = useState("");
   const [page, setPage] = useState(1);
   const [size, setSize] = useState(DEFAULT_SIZE);
@@ -40,6 +42,7 @@ const AddExperimentToCompareDialog: React.FunctionComponent<
 
   const { data, isPending } = useExperimentsList(
     {
+      workspaceName,
       datasetId,
       search,
       page,

diff --git a/apps/opik-frontend/src/components/pages/CompareExperimentsPage/CompareExperimentsPage.tsx b/apps/opik-frontend/src/components/pages/CompareExperimentsPage/CompareExperimentsPage.tsx
@@ -227,7 +227,7 @@ const CompareExperimentsPage: React.FunctionComponent = () => {
 
   const rows = useMemo(() => data?.content ?? [], [data?.content]);
   const total = data?.total ?? 0;
-  const noDataText = "There are no data for selected experiments";
+  const noDataText = "There is no data for the selected experiments";
   const title = !isCompare
     ? experiment?.name
     : `Compare (${experimentsIds.length})`;

diff --git a/apps/opik-frontend/src/components/pages/ExperimentsPage/ExperimentsPage.tsx b/apps/opik-frontend/src/components/pages/ExperimentsPage/ExperimentsPage.tsx
@@ -90,6 +90,7 @@ const ExperimentsPage: React.FunctionComponent = () => {
   const [rowSelection, setRowSelection] = useState<RowSelectionState>({});
   const { data, isPending } = useExperimentsList(
     {
+      workspaceName,
       search,
       page,
       size,

diff --git a/apps/opik-frontend/src/components/shared/LoadableSelectBox/LoadableSelectBox.tsx b/apps/opik-frontend/src/components/shared/LoadableSelectBox/LoadableSelectBox.tsx
@@ -148,7 +148,7 @@ export const LoadableSelectBox = ({
         {hasMoreSection && (
           <div className="absolute inset-x-0 bottom-0 flex h-10 items-center justify-between px-4">
             <div className="comet-body-s text-muted-slate">
-              Showing first ${optionsCount} items.
+              {`Showing first ${optionsCount} items.`}
             </div>
             <Button variant="link" onClick={onLoadMore}>
               Load more

diff --git a/apps/opik-frontend/src/plugins/comet/init.tsx b/apps/opik-frontend/src/plugins/comet/init.tsx
@@ -1,6 +1,7 @@
 /// <reference types="@types/segment-analytics" />
 
 import { initAnalytics } from "./analytics";
+import { loadScript } from "@/plugins/comet/utils";
 
 type EnvironmentVariablesOverwrite = {
   OPIK_SEGMENT_ID?: string;
@@ -9,8 +10,12 @@ type EnvironmentVariablesOverwrite = {
 declare global {
   interface Window {
     analytics: SegmentAnalytics.AnalyticsJS;
-    environmentVariablesOverwrite: EnvironmentVariablesOverwrite;
+    environmentVariablesOverwrite?: EnvironmentVariablesOverwrite;
   }
 }
 
-initAnalytics(window.environmentVariablesOverwrite.OPIK_SEGMENT_ID);
+loadScript(location.origin + `/config.js?version=${new Date().getTime()}`).then(
+  () => {
+    initAnalytics(window.environmentVariablesOverwrite?.OPIK_SEGMENT_ID);
+  },
+);
diff --git a/apps/opik-frontend/src/plugins/comet/utils.ts b/apps/opik-frontend/src/plugins/comet/utils.ts
@@ -12,3 +12,18 @@ export const buildUrl = (
 
   return `${BASE_URL}${path}${FROM_PARAM}${workspaceNameParameter}${search}`;
 };
+
+export const loadScript = (url: string) => {
+  return new Promise<void>((resolve, reject) => {
+    const script = document.createElement("script");
+    script.src = url;
+    script.async = true;
+    script.addEventListener("load", () => {
+      resolve();
+    });
+    script.addEventListener("error", () => {
+      reject(new Error(`Failed to load script: ${url}`));
+    });
+    document.body.appendChild(script);
+  });
+};
-Original file line number
+Diff line change
@@ Expand Up / @@ -90,6 +90,7 @@ const ExperimentsPage: React.FunctionComponent = () => { @@
       const [rowSelection, setRowSelection] = useState<RowSelectionState>({});
       const { data, isPending } = useExperimentsList(
         {
+          workspaceName,
           search,
           page,
           size,
@@ Expand Down @@