MDK Logo
ReferenceUI KitReactUI Kit foundationComponentsWidgets

ExplorerDetail

Per-type Explorer detail panel. Reads the selection the `useExplorerSelection` bridge writes into `devicesStore` and composes the matching cards: - **contain…

Per-type Explorer detail panel. Reads the selection the useExplorerSelection bridge writes into devicesStore and composes the matching cards:

  • container: {@link BatchContainerControlsCard} (batch when >1 selected) with the connected-miner power-mode controls and the active-alarms box, plus {@link StatsGroupCard} for the connected miners and {@link ContainerControlsCard} when an explicit per-socket selection exists. - miner: {@link MinerControlsCard} write controls, {@link MinerInfoCard} read-only info rows, {@link MinerChipsCard} per-chip stats, {@link StatsGroupCard} aggregate, and the active-alarms box. - cabinet: read-only {@link CabinetDetailCard} — powermeter + temperature readings and the LV-cabinet warnings timeline.

Writes queue into the actions draft store; submission stays gated behind the ActionsSidebar.

import { ExplorerDetail } from "@tetherto/mdk-react-devkit";
PropStatusTypeDefaultDescription
deviceTypeRequiredDeviceExplorerDeviceTypeThe active Explorer tab — selects which per-type panel renders.
onNavigateOptional((path: string) => void) | undefinedRouter navigate used by alarm rows to deep-link into `/alerts/:id`.
isCompactOptionalboolean | undefinedCompact layout for the narrower Explorer detail column.

Usage

Per-type Explorer detail panel. Reads the current selection the useExplorerSelection bridge writes into the shared devicesStore and composes the matching cards for the active tab:

  • container — Batch Container Controls (batch when more than one is selected) with the connected-miner power-mode controls and active-alarms box, the connected-miner stats aggregate, and the per-socket Container Controls when a socket selection exists.
  • miner — Miner Controls (write actions), read-only miner info + per-chip stats, the stats aggregate, and the active-alarms box.
  • cabinet — read-only LV cabinet detail: powermeter + temperature readings and the LV-cabinet warnings timeline.

Write actions queue into the actions draft store; submission stays gated behind the ActionsSidebar.

Example

import { DEVICE_EXPLORER_DEVICE_TYPE, ExplorerDetail } from '@tetherto/mdk-react-devkit'import { devicesStore } from '@tetherto/mdk-ui-foundation'import { useEffect } from 'react'// Synthetic placeholder selection — the panel reads the shared `devicesStore`,// so the example seeds one container and clears it again on unmount.const SAMPLE_CONTAINER = {  id: 'container-demo-1',  type: 'container-bd-d40-m56',  info: { container: 'demo-1a' },}export const ExplorerDetailExample = () => {  useEffect(() => {    devicesStore.getState().setResetSelections()    devicesStore.getState().selectContainer(SAMPLE_CONTAINER as never)    return () => devicesStore.getState().setResetSelections()  }, [])  return (    <div className="mdk-example-row">      <ExplorerDetail deviceType={DEVICE_EXPLORER_DEVICE_TYPE.CONTAINER} />    </div>  )}