import { observer } from 'mobx-react-lite' ; import { useCallback } from 'react' ; import { TextPlaceholder } from '@cloudbeaver/core-blocks' ; import type { ObjectPagePanelComponent } from '@cloudbeaver/plugin-object-viewer' ; import type { IDataViewerPageState } from '../IDataViewerPageState' ; import { TableViewer } from '../TableViewer/TableViewer' ; export const DataViewerPanel = observer ( function DataViewerPanel ( { tab , page , } ) { const pageState = page . getState ( tab ) ; const handlePresentationChange = useCallback ( ( presentationId ) => { const pageState = page . getState ( tab ) ; if ( ! pageState ) { page . setState ( tab , { presentationId , resultIndex : 0 , valuePresentationId : null , } ) ; } else { pageState . presentationId = presentationId ; } } , [ page , tab ] ) ; const handleValuePresentationChange = useCallback ( ( valuePresentationId ) => { const pageState = page . getState ( tab ) ; if ( ! pageState ) { page . setState ( tab , { presentationId : '' , resultIndex : 0 , valuePresentationId , } ) ; } else { pageState . valuePresentationId = valuePresentationId ; } } , [ page , tab ] ) ; if ( ! tab . handlerState . tableId ) { return < TextPlaceholder > Table model not loaded < /TextPlaceholder>; } return ( < TableViewer tableId = { tab . handlerState . tableId } resultIndex = { pageState ?. resultIndex } presentationId = { pageState ?. presentationId } valuePresentationId = { pageState ?. valuePresentationId } onPresentationChange = { handlePresentationChange } onValuePresentationChange = { handleValuePresentationChange } / > ) ; } ) ;