Animate PidId border and icons: MSE, Spin, TorqueStab.

Refactor TelemetryView Replace antd.Grid to own html5Grid.
Fix RigMnemo bit animation.

doc/MSE_and_torqueStab_info.txt

@@ -1,7 +1,7 @@
-Вопрос Олегу: Какой бит и в каком регистре (или значение регистра) контроллера спинмастера сигнализирует что система спинмастер активана/работает?
+# Вопрос Олегу: Какой бит и в каком регистре (или значение регистра) контроллера спинмастера сигнализирует что система спинмастер активана/работает?
 Ответ: Такого бита нет, но можно понять если etap %MW1600: INT; не равен 6 и не равен 0 тогда система в работе
 
-Вопрос Олегу: Какой бит и в каком регистре (или значение регистра) контроллера спинмастера сигнализирует что система стабилизации крутящего момента активна/работает?
+# Вопрос Олегу: Какой бит и в каком регистре (или значение регистра) контроллера спинмастера сигнализирует что система стабилизации крутящего момента активна/работает?
 Ответ: Такого бита по сути тоже нет но можно понять что 
 когда stik_sleep %MX2802.01: BOOL; =true
 и

package.json

@@ -32,7 +32,7 @@
     "react_test": "react-scripts test",
     "eject": "react-scripts eject"
   },
-  "proxy": "http://192.168.1.58:5000",
+  "proxy": "http://192.168.1.70:5000",
   "eslintConfig": {
     "extends": [
       "react-app",

src/components/Grid.jsx

@@ -1,18 +1,18 @@
-export const Grid = ({children, ...other}) => {
+export const Grid = ({children, style, ...other}) => {
   const gridContainerStyle = {
     display: 'grid',
     margin: '8px',
     justifyItems: 'stretch',
     alignItems: 'stretch',
-    ...other,
+    ...style,
   }
 
-  return <div style={gridContainerStyle}>
+  return <div style={gridContainerStyle} {...other}>
     {children}
   </div>
 }
 
-export const GridItem = ({children, row, col, rowSpan, colSpan, ...other}) => {
+export const GridItem = ({children, row, col, rowSpan, colSpan, style, ...other}) => {
   const localRow = +row
   const localCol = +col
   const localColSpan = colSpan ? colSpan - 1 : 0
@@ -23,10 +23,17 @@ export const GridItem = ({children, row, col, rowSpan, colSpan, ...other}) => {
     gridRowStart: localRow,
     gridRowEnd: localRow + localRowSpan,
     padding: '4px',
-    ...other,
+    ...style,
   }
 
-  return <div style={gridItemStyle}>
+  return <div style={gridItemStyle} {...other}>
     {children}
   </div>
 }
+
+export const Flex = ({children, style, ...other}) => 
+  <div
+  style={{display:'flex', ...style}}
+  {...other}>
+    {children}
+  </div>

src/pages/TelemetryView/ActiveMessagesOnline.jsx

@@ -34,8 +34,8 @@ const columns = [
   {
     title: 'Категория',
     dataIndex: 'categoryId',
-    render: (_, item) => categoryDictionary[item.categoryId].title,
+    render: (_, item) => categoryDictionary[item.categoryId]?.title,
-    style: (_, item) => categoryDictionary[item.categoryId].style,
+    style: (_, item) => categoryDictionary[item.categoryId]?.style,
     sorter: (a, b) => a.categoryId - b.categoryId,
     sortDirections: ['descend', 'ascend'],
   },

src/pages/TelemetryView/Column.jsx

@@ -2,7 +2,7 @@ import {Display} from "../../components/Display";
 import {ChartTimeOnline} from "./ChartTimeOnline";
 import {ChartTimeOnlineFooter} from "./ChartTimeOnlineFooter";
 
-export const Column = ({lineGroup, data, interval, showBorder}) => {
+export const Column = ({lineGroup, data, interval, showBorder, style}) => {
   let lines = [lineGroup.linePv]
 
   if (lineGroup.lineSp)
@@ -26,7 +26,7 @@ export const Column = ({lineGroup, data, interval, showBorder}) => {
   }
 
   return (
-    <>
+    <div style={style}>
       <div style={{boxShadow: showBorder ? "inset 0px 0px 0px 3px black" : ""}}>
         <Display
           label={lineGroup.label}
@@ -41,5 +41,5 @@ export const Column = ({lineGroup, data, interval, showBorder}) => {
       <ChartTimeOnlineFooter
         data={dataLast}
         {...lineGroup} />
-    </>)
+    </div>)
 }

src/pages/TelemetryView/CustomColumn.jsx

@@ -28,7 +28,9 @@ export const CustomColumn = ({data}) => {
         format = {param.format}
         />)}
       <RigMnemo
-        blockPosition={dataLast?.blockPosition??0}
+        blockPosition={dataLast?.blockPosition??Number.NaN}
-        bitPosition={dataLast?.bitDepth??3200}/>
+        bitPosition={dataLast?.bitDepth??Number.NaN}
+        wellDepth={dataLast?.wellDepth??Number.NaN}
+        />
     </>)
 }

src/pages/TelemetryView/RigMnemo.jsx

@@ -39,35 +39,54 @@ const styleBlock = {
   fill: "#ffdd55",
 };
 
-const stylePump1 = {
+// const stylePump1 = {
-  ...styleBase,
+//   ...styleBase,
-  fill: "#5fd35f",
+//   fill: "#5fd35f",
-};
+// };
 
-const stylePump2 = {
+// const stylePump2 = {
-  ...styleBase,
+//   ...styleBase,
-  fill: "#b3b3b3",
+//   fill: "#b3b3b3",
-};
+// };
 
 export default function RigMnemo({
   blockPosition,
   bitPosition,
+  wellDepth
 }) {
+  let blockPositionY = 0
+  let bitPositionY = 0
 
-  let blockPositionLocal = +blockPosition
+  const isBlockVisible = blockPosition != null && Number.isFinite(blockPosition)
-  blockPositionLocal = blockPositionLocal ? blockPositionLocal : 0
+  const isBitVisible = wellDepth && bitPosition != null && Number.isFinite(bitPosition) && Number.isFinite(wellDepth)
-  const blockTranslate = `translate(-75, ${-35 + (50 * (30 - blockPositionLocal) / 30)})`
 
-  //let bitPositionLocal = +bitPosition
+  if (isBlockVisible)
-  //bitPositionLocal = bitPositionLocal ? bitPositionLocal : 0
+    blockPositionY = -35 + (50 * (30 - +blockPosition) / 30)
-  //const bitTranslate = `translate(0, ${-41 + 41 * (3426 - bitPosition)/(3426 - 3200)})`
+
-  const bitTranslate = `translate(0, 0)`
+  if (isBitVisible) {
+    const bitPositionLocal = +bitPosition
+    const wellDepthLocal = +wellDepth
+    const altitude = 8
+    //-75 + 75*bitPositionProc
+    const bitPositionProc = (bitPositionLocal)/(wellDepthLocal)
+
+    if (bitPositionLocal < altitude)
+      bitPositionY = -75 + 16 * bitPositionLocal/altitude
+    else
+      bitPositionY = -59 + 59 * bitPositionLocal / wellDepthLocal
+
+    if( wellDepthLocal > 20 && (wellDepthLocal - bitPositionLocal) > 2 && bitPositionProc > 0.96)
+      bitPositionY = -2    
+  }
+
+  const blockTranslate = `translate(-75, ${blockPositionY})`
+  const bitTranslate = `translate(0, ${bitPositionY})`
 
   return (
     <svg
-      width="400"
+      width="170"
       height="540"
-      viewBox="20 0 105.83333 145.52084"
+      viewBox="20 0 40 145"
       version="1.1"
       id="svg8"
     >
@@ -125,6 +144,7 @@ export default function RigMnemo({
       <g id="Well" style={styleWell}>
         <path d="M 33.072916,97.895832 H 39.6875 V 142.875 h -6.614584 z" />
       </g>
+      {isBitVisible && 
         <g id="Bit"
           transform={bitTranslate}>
           <path
@@ -136,6 +156,8 @@ export default function RigMnemo({
             d="m 34.395833,138.90625 v -3.96875 h 3.96875 v 3.96875 z"
           />
         </g>
+      }
+      {isBlockVisible &&
         <g id="Block"
           transform={blockTranslate}
           style={styleBlock}
@@ -144,7 +166,8 @@ export default function RigMnemo({
           <path d="m 111.38958,45.772916 c 0,0 0.17047,0.398584 0.26459,0.529167 0.0941,0.130583 0.22384,0.166227 0.26458,0.264583 0.0407,0.09836 0.0328,0.390283 0,0.529167 -0.0328,0.138884 -0.10568,0.166378 -0.26458,0.264584 -0.1589,0.09821 -0.37027,0.09821 -0.52917,0 -0.1589,-0.09821 -0.23179,-0.1257 -0.26458,-0.264584 -0.0328,-0.138884 0,-0.529167 0,-0.529167 0,0 0.10568,0.430961 0.26458,0.529167 0.1589,0.09821 0.40444,0.124726 0.52917,0 0.12472,-0.124725 0.0576,-0.39007 0,-0.529167 -0.0576,-0.139097 -0.17047,-0.133999 -0.26459,-0.264583 -0.0941,-0.130584 -0.26458,-0.529167 -0.26458,-0.529167 z" />
           <path d="m 110.33125,47.360416 v 2.38125 l 0.79375,10e-7 v 0.529166 h -0.26458 V 50.8 l 1.32291,-10e-7 v -0.529166 h -0.26458 v -0.529167 l 0.79375,10e-7 v -2.38125 z" />
         </g>
-      <g id="Pump1" transform="translate(-0.79375,2.6066667e-4)">
+      }
+      {/* <g id="Pump1" transform="translate(-0.79375,2.6066667e-4)">
         <circle
           style={stylePump1}
           id="PumpCircle"
@@ -179,7 +202,7 @@ export default function RigMnemo({
           d="m 48.948828,78.052995 v 5.292056 h 0.13086 l 5.158984,-2.6e-4 v -5.292057 z m 0.263672,0.263672 4.7625,-2.61e-4 v 4.762761 l -4.7625,2.6e-4 z"
           id="PumpSquare"
         />
-      </g>
+      </g> */}
     </svg>
   );
 }

src/pages/TelemetryView/UserOfWells.jsx

@@ -1,6 +1,6 @@
 import { Display } from '../../components/Display'
 
-export const UserOfWells = ({ data }) => {
+export const UserOfWell = ({ data }) => {
   const dataLast = data[data.length - 1]
 
   return <Display className='border_small display_flex_container user_card'

src/pages/TelemetryView/index.jsx

@@ -1,15 +1,16 @@
 import {useState, useEffect} from 'react'
-import {Row, Col, Select} from 'antd'
+import {Select} from 'antd'
 
 import {Column} from './Column'
 import {CustomColumn} from './CustomColumn'
 import ActiveMessagesOnline from './ActiveMessagesOnline'
 import {ModeDisplay} from "./ModeDisplay"
-import {UserOfWells} from './UserOfWells'
+import {UserOfWell} from './UserOfWells'
 
 import LoaderPortal from '../../components/LoaderPortal'
+import {Grid, GridItem, Flex} from '../../components/Grid'
 import {Subscribe} from '../../services/signalr'
-import {DataService} from '../../services/api'
+import {TelemetryDataSaubService, TelemetryDataSpinService} from '../../services/api'
 import {invokeWebApiWrapperAsync} from '../../components/factory'
 
 import MomentStabPicEnabled from "../../images/DempherOn.png"
@@ -140,67 +141,109 @@ const timePeriodCollection = [
 
 const defaultChartInterval = '600'
 
+const getLast = (data) =>
+  Array.isArray(data) ? data.slice(-1)[0] : data
+
+const isMseEnabled = (dataSaub) => {
+  const lastData = getLast(dataSaub)
+  return (lastData?.mseState && 2) > 0
+}
+
+const isTorqueStabEnabled = (dataSpin) => {
+  const lastData = getLast(dataSpin)
+  return lastData?.state === 7
+}
+
+const isSpinEnabled = (dataSpin) => {
+  const lastData = getLast(dataSpin)
+  return lastData?.state > 0 && lastData?.state !== 6
+}
+
+const getIndexOfDrillingBy = (dataSaub)=>{
+  const order = {
+    0: -1,
+    1: 1, // скорость
+    2: 2, // давление
+    3: 3, // нагрузка
+    4: 5, // момент
+  }
+  const idFeedRegulator = getLast(dataSaub)?.idFeedRegulator??0
+  return order[idFeedRegulator]??-1
+}
+
 export default function TelemetryView({idWell}) {
-  const [saubData, setSaubData] = useState([])
+  const [dataSaub, setDataSaub] = useState([])
+  const [dataSpin, setDataSpin] = useState([])
   const [chartInterval, setChartInterval] = useState(defaultChartInterval)
   const [showLoader, setShowLoader] = useState(false)
 
   const options = timePeriodCollection.map((line) => <Option key={line.value}>{line.label}</Option>)
 
-  const handleReceiveDataSaub = (data) => {
+  const handleDataSaub = (data) => {
     if (data) {
-      setSaubData(data)
+      setDataSaub(data)
+    }
+  }
+
+  const handleDataSpin = (data) => {
+    if (data) {
+      setDataSpin(data)
     }
   }
 
   useEffect(() => {
     invokeWebApiWrapperAsync(
       async () => {
-        const data = await DataService.getData(idWell, null, chartInterval)
+        const dataSaub = await TelemetryDataSaubService.getData(idWell, null, chartInterval)
-        handleReceiveDataSaub(data)
+        const dataSpin = await TelemetryDataSpinService.getData(idWell, null, chartInterval)
+        handleDataSaub(dataSaub)
+        handleDataSpin(dataSpin)
       },
       setShowLoader,
       `Не удалось получить данные по скважине "${idWell}"`,
     )    
-    return Subscribe('hubs/telemetry', 'ReceiveDataSaub', `well_${idWell}`, handleReceiveDataSaub)
+    const unsubscribeSaub = Subscribe('hubs/telemetry', 'ReceiveDataSaub', `well_${idWell}`, handleDataSaub)
+    const unsubscribeSpin = Subscribe('hubs/telemetry', 'ReceiveDataSpin', `well_${idWell}`, handleDataSpin)
+    return () => {
+      unsubscribeSaub()
+      unsubscribeSpin()
+    }
   }, [idWell, chartInterval])
 
-  const colSpan = 24 / (paramsGroups.length)
-
   return (<LoaderPortal show={showLoader}>
-    <Row style={{marginBottom: '1rem'}}>
+    <Grid style={{gridTemplateColumns: 'auto repeat(6, 1fr)'}}>
-      <Col>
+      <GridItem col='1' row='1' colSpan='8' style={{marginBottom: '0.5rem'}}>
-        <ModeDisplay data={saubData}/>
+        <Flex>
-      </Col>
+          <ModeDisplay data={dataSaub}/>
-      <span style={{flexGrow: 0.1}}>&nbsp;</span>
+          <div style={{marginLeft: '1rem'}}>
-      <Col>
             Интервал:&nbsp;
             <Select defaultValue={defaultChartInterval} onChange={setChartInterval}>
               {options}
             </Select>
-      </Col>
+          </div>
-      <span style={{flexGrow: 1}}>&nbsp;</span>
+          <span style={{flexGrow: 20}}>&nbsp;</span>
-      <img src={saubData[saubData.length - 1]?.isMomentStabEnabled ? MomentStabPicEnabled : MomentStabPicDisabled} style={{marginRight: "15px"}} alt="TorqueMaster"/>
+          <img src={isTorqueStabEnabled(dataSpin) ? MomentStabPicEnabled : MomentStabPicDisabled} style={{marginRight: "15px"}} alt="TorqueMaster"/>
-      <img src={saubData[saubData.length - 1]?.isSpinEnabled ? SpinPicEnabled : SpinPicDisabled} style={{marginRight: "15px"}} alt="SpinMaster"/>
+          <img src={isSpinEnabled(dataSpin) ? SpinPicEnabled : SpinPicDisabled} style={{marginRight: "15px"}} alt="SpinMaster"/>
-      <h2 style={{marginBottom: 0, marginRight: "15px",fontWeight: "bold", color: saubData[saubData.length - 1]?.mseEnabled === 24968 ? "green" : "lightgrey"}}>MSE</h2>
+          <h2 style={{marginBottom: 0, marginRight: "15px",fontWeight: "bold", color: isMseEnabled(dataSaub) ? "green" : "lightgrey"}}>MSE</h2>
-      <Col>
+          <UserOfWell data={dataSaub}/>
-        <UserOfWells data={saubData}/>
+        </Flex>
-      </Col>
+      </GridItem>
-    </Row>
+      <GridItem col='1' row='2' rowSpan='3' style={{minWidth:'260px', width:'0.142fr'}}>
-    <Row>
+        <CustomColumn data={dataSaub}/>
-      <Col span={3}>
+      </GridItem>      
-        <CustomColumn data={saubData}/>
-      </Col>
-      <Col span={24 - 3}>
-        <Row>
       {paramsGroups.map((group, index) =>
-            <Col span={colSpan} className='border_small' key={group.label}>
+        <GridItem col={2 + index} row='2' className='border_small' key={group.label}>          
-              <Column data={saubData} lineGroup={group} interval={chartInterval}
+          <Column 
-                      showBorder={saubData[saubData.length - 1]?.drillingBy === index}/>
+            style={{width:'13vw'}}
-            </Col>)}
+            data={dataSaub}
-        </Row>
+            lineGroup={group}
-      </Col>
+            interval={chartInterval}
-    </Row>
+            showBorder={getIndexOfDrillingBy(dataSaub) === index}/>
+        </GridItem>)}
+
+      <GridItem col='2' row='3' colSpan='7'>
         <ActiveMessagesOnline idWell={idWell}/>
+      </GridItem>
+    </Grid>
   </LoaderPortal>)
 }

src/pages/TelemetryView/index_backup.jsx

@@ -0,0 +1,238 @@
+import {useState, useEffect} from 'react'
+import {Row, Col, Select} from 'antd'
+
+import {Column} from './Column'
+import {CustomColumn} from './CustomColumn'
+import ActiveMessagesOnline from './ActiveMessagesOnline'
+import {ModeDisplay} from "./ModeDisplay"
+import {UserOfWell} from './UserOfWells'
+
+import LoaderPortal from '../../components/LoaderPortal'
+import {Subscribe} from '../../services/signalr'
+import {TelemetryDataSaubService, TelemetryDataSpinService} from '../../services/api'
+import {invokeWebApiWrapperAsync} from '../../components/factory'
+
+import MomentStabPicEnabled from "../../images/DempherOn.png"
+import MomentStabPicDisabled from "../../images/DempherOff.png"
+import SpinPicEnabled from "../../images/SpinEnabled.png"
+import SpinPicDisabled from "../../images/SpinDisabled.png"
+
+import '../../styles/message.css'
+
+const {Option} = Select
+
+const dash = [7, 3]
+
+const blockHeightGroup = {
+  label: "Высота блока",
+  yDisplay: false,
+  linePv: {label: "blockPosition", units: 'м', xAccessorName: "blockPosition", yAccessorName: "date", color: '#333'},
+  lineOther: {
+    label: "wellDepth",
+    units: 'м',
+    xAccessorName: "wellDepth",
+    yAccessorName: "date",
+    color: '#333',
+    showLine: false,
+    xConstValue: 30
+  },
+}
+
+const blockSpeedGroup = {
+  label: "Скорость блока",
+  yDisplay: false,
+  linePv: {label: "blockSpeed", units: 'м/ч', xAccessorName: "blockSpeed", yAccessorName: "date", color: '#0a0'},
+  lineSp: {label: "blockSpeedSp", units: 'м/ч', xAccessorName: "blockSpeedSp", yAccessorName: "date", color: '#0a0'},
+}
+
+const pressureGroup = {
+  label: "Давление",
+  yDisplay: false,
+  linePv: {label: "pressure", units: 'атм', xAccessorName: "pressure", yAccessorName: "date", color: '#c00'},
+  lineSp: {label: "pressureSp", units: 'атм', xAccessorName: "pressureSp", yAccessorName: "date", color: '#c00'},
+  lineIdle: {label: "pressureIdle", units: 'атм', xAccessorName: "pressureIdle", yAccessorName: "date", color: '#c00'},
+  linesOther: [
+    {
+      label: "мекс. перепад",
+      units: 'атм',
+      xAccessorName: "pressureDeltaLimitMax",
+      yAccessorName: "date",
+      color: '#c00'
+    },
+  ],
+}
+
+const axialLoadGroup = {
+  label: "Осевая нагрузка",
+  yDisplay: false,
+  linePv: {label: "axialLoad", units: 'т', xAccessorName: "axialLoad", yAccessorName: "date", color: '#00a'},
+  lineSp: {label: "axialLoadSp", units: 'т', xAccessorName: "axialLoadSp", yAccessorName: "date", color: '#00a', dash},
+  linesOther: [
+    {label: "axialLoadLimitMax", units: 'т', xAccessorName: "axialLoadLimitMax", yAccessorName: "date", color: '#00a'},
+  ],
+}
+
+const hookWeightGroup = {
+  label: "Вес на крюке",
+  yDisplay: false,
+  linePv: {label: "hookWeight", units: 'т', xAccessorName: "hookWeight", yAccessorName: "date", color: '#0aa'},
+  lineIdle: {
+    label: "hookWeightIdle",
+    units: 'т',
+    xAccessorName: "hookWeightIdle",
+    yAccessorName: "date",
+    color: '#0aa',
+    dash
+  },
+  linesOther: [
+    {
+      label: "hookWeightLimitMin",
+      units: 'т',
+      xAccessorName: "hookWeightLimitMin",
+      yAccessorName: "date",
+      color: '#0aa'
+    },
+    {
+      label: "hookWeightLimitMax",
+      units: 'т',
+      xAccessorName: "hookWeightLimitMax",
+      yAccessorName: "date",
+      color: '#0aa'
+    },
+  ],
+}
+
+const rotorTorqueGroup = {
+  label: "Момент на роторе",
+  yDisplay: false,
+  linePv: {label: "rotorTorque", units: 'кН·м', xAccessorName: "rotorTorque", yAccessorName: "date", color: '#a0a'},
+  lineSp: {label: "rotorTorqueSp", units: 'кН·м', xAccessorName: "rotorTorqueSp", yAccessorName: "date", color: '#a0a'},
+  lineIdle: {
+    label: "rotorTorqueIdle",
+    units: 'кН·м',
+    xAccessorName: "rotorTorqueIdle",
+    yAccessorName: "date",
+    color: '#a0a'
+  },
+  linesOther: [
+    {
+      label: "rotorTorqueLimitMax",
+      units: 'кН·м',
+      xAccessorName: "rotorTorqueLimitMax",
+      yAccessorName: "date",
+      color: '#a0a'
+    },
+  ],
+}
+
+const paramsGroups = [blockHeightGroup, blockSpeedGroup, pressureGroup, axialLoadGroup, hookWeightGroup, rotorTorqueGroup]
+
+const timePeriodCollection = [
+  {value: '60', label: '1 минута'},
+  {value: '300', label: '5 минут'},
+  {value: '600', label: '10 минут'},
+  {value: '1800', label: '30 минут'},
+  {value: '3600', label: '1 час'},
+  {value: '21600', label: '6 часов'},
+  {value: '43200', label: '12 часов'},
+  {value: '86400', label: '24 часа'}
+]
+
+const defaultChartInterval = '600'
+
+const getLast = (data) =>
+  Array.isArray(data) ? data.slice(-1)[0] : data
+
+const isMseEnabled = (dataSaub) => {
+  const lastData = getLast(dataSaub)
+  return (lastData?.mseState && 2) > 0
+}
+
+const isTorqueStabEnabled = (dataSpin) => {
+  const lastData = getLast(dataSpin)
+  return lastData?.state === 7
+}
+
+const isSpinEnabled = (dataSpin) => {
+  const lastData = getLast(dataSpin)
+  return lastData?.state > 0 && lastData?.state !== 6
+}
+
+export default function TelemetryView({idWell}) {
+  const [dataSaub, setDataSaub] = useState([])
+  const [dataSpin, setDataSpin] = useState([])
+  const [chartInterval, setChartInterval] = useState(defaultChartInterval)
+  const [showLoader, setShowLoader] = useState(false)
+
+  const options = timePeriodCollection.map((line) => <Option key={line.value}>{line.label}</Option>)
+
+  const handleDataSaub = (data) => {
+    if (data) {
+      setDataSaub(data)
+    }
+  }
+
+  const handleDataSpin = (data) => {
+    if (data) {
+      setDataSpin(data)
+    }
+  }
+
+  useEffect(() => {
+    invokeWebApiWrapperAsync(
+      async () => {
+        const dataSaub = await TelemetryDataSaubService.getData(idWell, null, chartInterval)
+        const dataSpin = await TelemetryDataSpinService.getData(idWell, null, chartInterval)
+        handleDataSaub(dataSaub)
+        handleDataSpin(dataSpin)
+      },
+      setShowLoader,
+      `Не удалось получить данные по скважине "${idWell}"`,
+    )    
+    const unsubscribeSaub = Subscribe('hubs/telemetry', 'ReceiveDataSaub', `well_${idWell}`, handleDataSaub)
+    const unsubscribeSpin = Subscribe('hubs/telemetry', 'ReceiveDataSpin', `well_${idWell}`, handleDataSpin)
+    return () => {
+      unsubscribeSaub()
+      unsubscribeSpin()
+    }
+  }, [idWell, chartInterval])
+
+  const colSpan = 24 / (paramsGroups.length)
+
+  return (<LoaderPortal show={showLoader}>
+    <Row style={{marginBottom: '1rem'}}>
+      <Col>
+        <ModeDisplay data={dataSaub}/>
+      </Col>
+      <span style={{flexGrow: 0.1}}>&nbsp;</span>
+      <Col>
+        Интервал:&nbsp;
+        <Select defaultValue={defaultChartInterval} onChange={setChartInterval}>
+          {options}
+        </Select>
+      </Col>
+      <span style={{flexGrow: 1}}>&nbsp;</span>
+      <img src={isTorqueStabEnabled(dataSpin) ? MomentStabPicEnabled : MomentStabPicDisabled} style={{marginRight: "15px"}} alt="TorqueMaster"/>
+      <img src={isSpinEnabled(dataSpin) ? SpinPicEnabled : SpinPicDisabled} style={{marginRight: "15px"}} alt="SpinMaster"/>
+      <h2 style={{marginBottom: 0, marginRight: "15px",fontWeight: "bold", color: isMseEnabled(dataSaub) ? "green" : "lightgrey"}}>MSE</h2>
+      <Col>
+        <UserOfWell data={dataSaub}/>
+      </Col>
+    </Row>
+    <Row>
+      <Col span={3}>
+        <CustomColumn data={dataSaub}/>
+      </Col>
+      <Col span={24 - 3}>
+        <Row>
+          {paramsGroups.map((group, index) =>
+            <Col span={colSpan} className='border_small' key={group.label}>
+              <Column data={dataSaub} lineGroup={group} interval={chartInterval}
+                      showBorder={dataSaub[dataSaub.length - 1]?.drillingBy === index}/>
+            </Col>)}
+        </Row>
+      </Col>
+    </Row>
+    <ActiveMessagesOnline idWell={idWell}/>
+  </LoaderPortal>)
+}