From a6ea7d84444335bd5dce9ccdc85db5a97edbfc6d Mon Sep 17 00:00:00 2001 From: Jamie Rasmussen Date: Thu, 5 Dec 2024 13:49:02 -0600 Subject: [PATCH] refactor(ui): break an import cycle --- .../PagePanelComponents/Home/Browse3.tsx | 61 +------------------ .../Home/Browse3/pages/CallPage/CallPage.tsx | 2 +- .../pages/CallPage/PaginationControls.tsx | 2 +- .../Browse3/pages/CallsPage/CallsTable.tsx | 2 +- .../Home/TableRowSelectionContext.tsx | 61 +++++++++++++++++++ 5 files changed, 65 insertions(+), 63 deletions(-) create mode 100644 weave-js/src/components/PagePanelComponents/Home/TableRowSelectionContext.tsx diff --git a/weave-js/src/components/PagePanelComponents/Home/Browse3.tsx b/weave-js/src/components/PagePanelComponents/Home/Browse3.tsx index 976e232716a4..3517f4d3b9c7 100644 --- a/weave-js/src/components/PagePanelComponents/Home/Browse3.tsx +++ b/weave-js/src/components/PagePanelComponents/Home/Browse3.tsx @@ -104,6 +104,7 @@ import { WFDataModelAutoProvider, } from './Browse3/pages/wfReactInterface/context'; import {useHasTraceServerClientContext} from './Browse3/pages/wfReactInterface/traceServerClientContext'; +import {TableRowSelectionProvider} from './TableRowSelectionContext'; import {useDrawerResize} from './useDrawerResize'; LicenseInfo.setLicenseKey( @@ -1149,63 +1150,3 @@ const Browse3Breadcrumbs: FC = props => { ); }; - -export const TableRowSelectionContext = React.createContext<{ - rowIdsConfigured: boolean; - rowIdInTable: (id: string) => boolean; - setRowIds?: (rowIds: string[]) => void; - getNextRowId?: (currentId: string) => string | null; - getPreviousRowId?: (currentId: string) => string | null; -}>({ - rowIdsConfigured: false, - rowIdInTable: (id: string) => false, - setRowIds: () => {}, - getNextRowId: () => null, - getPreviousRowId: () => null, -}); - -const TableRowSelectionProvider: FC<{children: React.ReactNode}> = ({ - children, -}) => { - const [rowIds, setRowIds] = useState([]); - const rowIdsConfigured = useMemo(() => rowIds.length > 0, [rowIds]); - const rowIdInTable = useCallback( - (currentId: string) => rowIds.includes(currentId), - [rowIds] - ); - - const getNextRowId = useCallback( - (currentId: string) => { - const currentIndex = rowIds.indexOf(currentId); - if (currentIndex !== -1) { - return rowIds[currentIndex + 1]; - } - return null; - }, - [rowIds] - ); - - const getPreviousRowId = useCallback( - (currentId: string) => { - const currentIndex = rowIds.indexOf(currentId); - if (currentIndex !== -1) { - return rowIds[currentIndex - 1]; - } - return null; - }, - [rowIds] - ); - - return ( - - {children} - - ); -}; diff --git a/weave-js/src/components/PagePanelComponents/Home/Browse3/pages/CallPage/CallPage.tsx b/weave-js/src/components/PagePanelComponents/Home/Browse3/pages/CallPage/CallPage.tsx index 545c64eb4b94..3e4a74a48851 100644 --- a/weave-js/src/components/PagePanelComponents/Home/Browse3/pages/CallPage/CallPage.tsx +++ b/weave-js/src/components/PagePanelComponents/Home/Browse3/pages/CallPage/CallPage.tsx @@ -17,7 +17,7 @@ import {makeRefCall} from '../../../../../../util/refs'; import {Button} from '../../../../../Button'; import {Tailwind} from '../../../../../Tailwind'; import {Browse2OpDefCode} from '../../../Browse2/Browse2OpDefCode'; -import {TableRowSelectionContext} from '../../../Browse3'; +import {TableRowSelectionContext} from '../../../TableRowSelectionContext'; import { FEEDBACK_EXPAND_PARAM, TRACETREE_PARAM, diff --git a/weave-js/src/components/PagePanelComponents/Home/Browse3/pages/CallPage/PaginationControls.tsx b/weave-js/src/components/PagePanelComponents/Home/Browse3/pages/CallPage/PaginationControls.tsx index 9a2222e7e0a7..7254851929af 100644 --- a/weave-js/src/components/PagePanelComponents/Home/Browse3/pages/CallPage/PaginationControls.tsx +++ b/weave-js/src/components/PagePanelComponents/Home/Browse3/pages/CallPage/PaginationControls.tsx @@ -3,7 +3,7 @@ import {Button} from '@wandb/weave/components/Button'; import React, {FC, useCallback, useContext, useEffect} from 'react'; import {useHistory} from 'react-router-dom'; -import {TableRowSelectionContext} from '../../../Browse3'; +import {TableRowSelectionContext} from '../../../TableRowSelectionContext'; import { FEEDBACK_EXPAND_PARAM, TRACETREE_PARAM, diff --git a/weave-js/src/components/PagePanelComponents/Home/Browse3/pages/CallsPage/CallsTable.tsx b/weave-js/src/components/PagePanelComponents/Home/Browse3/pages/CallsPage/CallsTable.tsx index d7db3324ac98..e6e62180f64c 100644 --- a/weave-js/src/components/PagePanelComponents/Home/Browse3/pages/CallsPage/CallsTable.tsx +++ b/weave-js/src/components/PagePanelComponents/Home/Browse3/pages/CallsPage/CallsTable.tsx @@ -45,7 +45,7 @@ import {useViewerInfo} from '../../../../../../common/hooks/useViewerInfo'; import {A, TargetBlank} from '../../../../../../common/util/links'; import {TailwindContents} from '../../../../../Tailwind'; import {flattenObjectPreservingWeaveTypes} from '../../../Browse2/browse2Util'; -import {TableRowSelectionContext} from '../../../Browse3'; +import {TableRowSelectionContext} from '../../../TableRowSelectionContext'; import { useWeaveflowCurrentRouteContext, WeaveflowPeekContext, diff --git a/weave-js/src/components/PagePanelComponents/Home/TableRowSelectionContext.tsx b/weave-js/src/components/PagePanelComponents/Home/TableRowSelectionContext.tsx new file mode 100644 index 000000000000..a0e14a3367a4 --- /dev/null +++ b/weave-js/src/components/PagePanelComponents/Home/TableRowSelectionContext.tsx @@ -0,0 +1,61 @@ +import React, {FC, useCallback, useMemo, useState} from 'react'; + +export const TableRowSelectionContext = React.createContext<{ + rowIdsConfigured: boolean; + rowIdInTable: (id: string) => boolean; + setRowIds?: (rowIds: string[]) => void; + getNextRowId?: (currentId: string) => string | null; + getPreviousRowId?: (currentId: string) => string | null; +}>({ + rowIdsConfigured: false, + rowIdInTable: (id: string) => false, + setRowIds: () => {}, + getNextRowId: () => null, + getPreviousRowId: () => null, +}); + +export const TableRowSelectionProvider: FC<{children: React.ReactNode}> = ({ + children, +}) => { + const [rowIds, setRowIds] = useState([]); + const rowIdsConfigured = useMemo(() => rowIds.length > 0, [rowIds]); + const rowIdInTable = useCallback( + (currentId: string) => rowIds.includes(currentId), + [rowIds] + ); + + const getNextRowId = useCallback( + (currentId: string) => { + const currentIndex = rowIds.indexOf(currentId); + if (currentIndex !== -1) { + return rowIds[currentIndex + 1]; + } + return null; + }, + [rowIds] + ); + + const getPreviousRowId = useCallback( + (currentId: string) => { + const currentIndex = rowIds.indexOf(currentId); + if (currentIndex !== -1) { + return rowIds[currentIndex - 1]; + } + return null; + }, + [rowIds] + ); + + return ( + + {children} + + ); +};