Исправлена работа фильтра подсистем

src/components/d3/D3HorizontalChart.tsx

@@ -129,11 +129,11 @@ const D3HorizontalChart = memo((
                 //@ts-ignore
                 .transition(t)
                 //@ts-ignore
-                .attr('width', d => x(d.data.percent))
+                .attr('width', d => d.data.percent >= 0 ? x(d.data.percent) : 0)
         })
 
         return () => {
-            svg.selectAll("g").selectAll("*").remove()
+            svg.remove()
         }
     }, [width, height, data])
 

src/pages/Telemetry/OperationTime/index.tsx

@@ -1,4 +1,4 @@
-import React, { ReactNode, useEffect, useState } from 'react'
+import React, { memo, ReactNode, useCallback, useEffect, useState } from 'react'
 import { Col, Row, Select } from 'antd'
 import { Moment } from 'moment'
 
@@ -55,9 +55,10 @@ const tableColumns = [
     makeColumn('Кол-во запусков', 'operationCount'),
 ]
 
-const OperationTime = () => {
+const OperationTime = memo(() => {
     const [showLoader, setShowLoader] = useState(false)
     const [data, setData] = useState<DataType[]>([])
+    const [selectedData, setSelectedData] = useState<DataType[]>([])
     const [dateRange, setDateRange] = useState<Moment[]>([])
     const [childrenData, setChildrenData] = useState<ReactNode[]>([])
     const [well] = useWell()
@@ -65,17 +66,18 @@ const OperationTime = () => {
     const errorNotifyText = `Не удалось загрузить данные`
 
     useEffect(() => {
-
         invokeWebApiWrapperAsync(
             async () => {
                 if (!well.id) return
                 try {
-                    setData(arrayOrDefault(await SubsystemOperationTimeService.getStat(
+                    const responseData:DataType[] = arrayOrDefault(await SubsystemOperationTimeService.getStat(
                         well.id,
                         undefined,
                         dateRange[1] ? dateRange[0]?.toISOString() : undefined,
                         dateRange[1]?.toISOString(),
-                        )))
+                    ))
+                    setData(responseData)
+                    setSelectedData(responseData)
                 } catch(e) {
                     setData([])
                     throw e
@@ -95,16 +97,15 @@ const OperationTime = () => {
         )))
     }, [data])
 
-    const selectChange = (value: string[]) => {
-
-        setData(data.reduce((previousValue: DataType[], currentValue) => {
+    const selectChange = useCallback((value: string[]) => {
+        setSelectedData(selectedData.reduce((previousValue: DataType[], currentValue) => {
             if (value.includes(currentValue.subsystemName)) {
                 previousValue.push(currentValue)
             }
             return previousValue
         }, []))
 
-    }
+    },[data]);
 
     return (
         <LoaderPortal show={showLoader}>
@@ -112,8 +113,9 @@ const OperationTime = () => {
             <Row align={'middle'} justify={'space-between'} wrap={false} style={{ backgroundColor: 'white' }}>
                 <Col span={18}>
                     <Select
+                        allowClear
                         mode="multiple"
-                        defaultValue={data.map(d => d.subsystemName)}
+                        value={selectedData.map(d => d.subsystemName)}
                         onChange={selectChange}
                         style={{ width: '100%' }}
                     >
@@ -129,7 +131,7 @@ const OperationTime = () => {
             </Row>
             <div style={{width: '100%', height: '50vh'}}>
                 <D3HorizontalChart
-                    data={data.map(item => ({name: item.subsystemName, percent: item.kUsage * 100}))}
+                    data={selectedData.map(item => ({name: item.subsystemName, percent: item.kUsage * 100}))}
                     colors={subsystemColors}
                     width={'100%'}
                     height={'50vh'}
@@ -138,13 +140,13 @@ const OperationTime = () => {
             <Table
                 size={'small'}
                 columns={tableColumns}
-                dataSource={data.map((d, i) => ({...d, color: subsystemColors[i]}))}
+                dataSource={selectedData.map((d, i) => ({...d, color: subsystemColors[i]}))}
                 scroll={{ y: '25vh', x: true }}
                 pagination={false}
             />
         </LoaderPortal>
     )
-}
+})
 
 export default wrapPrivateComponent(OperationTime, {
     requirements: [],