Начата переработка Мониторинга

src/components/d3/monitoring/D3MonitoringCharts.tsx

@@ -545,7 +545,7 @@ const _D3MonitoringCharts = <DataType extends Record<string, unknown>>({
                             <g ref={setChartAreaRef} className={'chart-area'} transform={`translate(${offset.left}, ${sizes.chartsTop})`}>
                                 <rect width={sizes.inlineWidth} height={sizes.chartsHeight} fill={backgroundColor} />
                             </g>
-                            <g stroke={'black'}>
+                            <g stroke={'white'}>
                                 {d3.range(1, groups.length).map((i) => {
                                     const x = offset.left + (sizes.groupWidth + spaceBetweenGroups) * i - spaceBetweenGroups / 2
                                     return <line key={`${i}`} x1={x} x2={x} y1={sizes.chartsTop} y2={offset.top + sizes.inlineHeight} />

src/pages/Well/Telemetry/TelemetryView/Setpoints/index.jsx

@@ -1,7 +1,6 @@
 import { Button, Modal } from 'antd'
 import { useState, useEffect, memo, useCallback, useMemo } from 'react'
 
-import { useWell } from '@asb/context'
 import { Table } from '@components/Table'
 import { UserView } from '@components/views'
 import LoaderPortal from '@components/LoaderPortal'
@@ -12,7 +11,7 @@ import { SetpointsService } from '@api'
 import SetpointSender from './SetpointSender'
 import { SetpointViewer, getSetpointStatus } from './SetpointViewer'
 
-export const Setpoints = memo(({ ...other }) => {
+export const Setpoints = memo(({ well, ...other }) => {
     const [isModalVisible, setIsModalVisible] = useState(false)
     const [isSenderVisible, setIsSenderVisible] = useState(false)
     const [isViewerVisible, setIsViewerVisible] = useState(false)
@@ -21,8 +20,6 @@ export const Setpoints = memo(({ ...other }) => {
     const [selected, setSelected] = useState(null)
     const [setpointNames, setSetpointNames] = useState([])
 
-    const [well] = useWell()
-
     useEffect(() => {
         invokeWebApiWrapperAsync(
             async () => {

src/pages/Well/Telemetry/TelemetryView/WirelineRunOut.jsx

@@ -1,17 +1,14 @@
 import { memo, useCallback, useEffect, useState } from 'react'
 
-import { useWell } from '@asb/context'
 import { WirelineView } from '@components/views'
 import { invokeWebApiWrapperAsync } from '@components/factory'
 import { TelemetryWirelineRunOutService } from '@api'
 
 
-export const WirelineRunOut = memo(() => {
+export const WirelineRunOut = memo(({ well }) => {
     const [twro, setTwro] = useState({})
     const [isLoading, setIsLoading] = useState(false)
 
-    const [well] = useWell()
-
     const update = useCallback(() => invokeWebApiWrapperAsync(
         async () => {
             const twro = await TelemetryWirelineRunOutService.getData(well.id)

src/pages/Well/Telemetry/TelemetryView/index.jsx

@@ -3,7 +3,7 @@ import { BehaviorSubject, buffer, throttleTime } from 'rxjs'
 import { useSearchParams } from 'react-router-dom'
 import { Alert, Button, Select } from 'antd'
 
-import { useWell } from '@asb/context'
+import { useTopRightBlock, useWell } from '@asb/context'
 import LoaderPortal from '@components/LoaderPortal'
 import { CopyUrlButton } from '@components/CopyUrl'
 import { D3MonitoringCharts } from '@components/d3/monitoring'
@@ -76,6 +76,7 @@ const getRowDate = (row) => row && isRawDate(row.date) ? new Date(row.date) : nu
 
 const TelemetryView = memo(() => {
     const [well, updateWell] = useWell()
+    const setTopRightBlock = useTopRightBlock()
     const [searchParams, setSearchParams] = useSearchParams()
 
     const [dataSaub, setDataSaub] = useState([])
@@ -91,6 +92,7 @@ const TelemetryView = memo(() => {
 
     const [archiveMode, setArchiveMode] = useState(false)
 
+
     const onStatusChanged = useCallback((value) => updateWell({ idState: value }), [well])
 
     const handleDataSaub = useCallback((data, replace = false) => {
@@ -251,6 +253,17 @@ const TelemetryView = memo(() => {
         setEndDate(new Date(saubLast.date))
     }, [archiveMode, saubLast])
 
+    useEffect(() => setTopRightBlock((well) => (
+        <div style={{ display: 'flex', gap: 5 }}>
+            <Setpoints well={well} />
+            <WirelineRunOut well={well} />
+            <Button onClick={() => setArchiveMode((prev) => !prev)} danger={archiveMode}>
+                {archiveMode ? 'Выйти из архива' : 'Войти в архив'}
+            </Button>
+            {archiveMode && <CopyUrlButton />}
+        </div>
+    )), [setTopRightBlock, archiveMode])
+
     return (
         <LoaderPortal show={showLoader} style={{ flexGrow: 1 }}>
             <div className={'telemetry-view-page'}>
@@ -265,9 +278,7 @@ const TelemetryView = memo(() => {
                                 <Option value={2}>Завершено</Option>
                             </Select>
                         </div>
-                        <Setpoints />
                         <LimitingParameterStatistics />
-                        <WirelineRunOut />
                         <div className={'icons'}>
                             <img src={isTorqueStabEnabled(spinLast) ? MomentStabPicEnabled : MomentStabPicDisabled} alt={'TorqueMaster'} />
                             <img src={isSpinEnabled(spinLast) ? SpinPicEnabled : SpinPicDisabled} alt={'SpinMaster'} />
@@ -300,10 +311,6 @@ const TelemetryView = memo(() => {
                         <PeriodPicker value={chartInterval / 1000} onChange={(value) => setChartInterval(value * 1000)} />
                     </div>
                     <Button onClick={() => chartMethods?.setSettingsVisible(true)}>Настроить графики</Button>
-                    <Button onClick={() => setArchiveMode((prev) => !prev)} danger={archiveMode}>
-                        {archiveMode ? 'Выйти из архива' : 'Войти в архив'}
-                    </Button>
-                    {archiveMode && <CopyUrlButton />}
                 </div>
                 <D3MonitoringCharts
                     {...chartProps}