Add responsive width for canvas

src/App.less

@@ -115,4 +115,6 @@ html, body {
   &:active {
     cursor: move;
   }
+
+  border: 1px solid @border-color-split;
 }

src/components/Log.tsx

@@ -1,5 +1,7 @@
 import {
+  useCallback,
   useEffect,
+  useRef,
   useState,
 } from 'react';
 import {
@@ -16,25 +18,42 @@ import {
   DashboardOutlined,
 } from '@ant-design/icons';
 import { CheckboxValueType } from 'antd/lib/checkbox/Group';
+import { connect } from 'react-redux';
 import { Parser } from 'mlg-converter';
 import { Field, Result as ParserResult } from 'mlg-converter/dist/types';
 import PerfectScrollbar from 'react-perfect-scrollbar';
 import { loadLogs } from '../utils/api';
 import Canvas, { LogEntry } from './Log/Canvas';
+import { AppState, UIState } from '../types/state';
+import { Config } from '../types/config';
+import store from '../store';
 
 // const { SubMenu } = Menu;
 const { TabPane } = Tabs;
 const { Content } = Layout;
 
-const Log = () => {
+const mapStateToProps = (state: AppState) => ({
+  ui: state.ui,
+  status: state.status,
+  config: state.config,
+});
+
+const Log = ({ ui, config }: { ui: UIState, config: Config }) => {
   const { Sider } = Layout;
+  const contentRef = useRef<HTMLDivElement | null>(null);
+  const margin = 30;
+  const [canvasWidth, setCanvasWidth] = useState(0);
   const sidebarWidth = 250;
+  const calculateCanvasWidth = useCallback(() => setCanvasWidth((contentRef.current?.clientWidth || 0) - margin), []);
   const siderProps = {
     width: sidebarWidth,
     collapsible: true,
     breakpoint: 'xl',
-    // collapsed: ui.sidebarCollapsed,
+    collapsed: ui.sidebarCollapsed,
-    // onCollapse: (collapsed: boolean) => store.dispatch({ type: 'ui/sidebarCollapsed', payload: collapsed }),
+    onCollapse: (collapsed: boolean) => {
+      store.dispatch({ type: 'ui/sidebarCollapsed', payload: collapsed });
+      setTimeout(calculateCanvasWidth, 1);
+    },
   } as any;
   const [isLoading, setIsLoading] = useState(true);
   const [logs, setLogs] = useState<ParserResult>();
@@ -58,7 +77,12 @@ const Log = () => {
 
         console.log(parsed);
       });
-  }, []);
+
+    window.addEventListener('resize', calculateCanvasWidth);
+    calculateCanvasWidth();
+
+    return () => window.removeEventListener('resize', calculateCanvasWidth);
+  }, [calculateCanvasWidth]);
 
   return (
     <>
@@ -66,7 +90,8 @@ const Log = () => {
         {isLoading ?
           <Skeleton />
           :
-            <Tabs defaultActiveKey="fields" style={{ marginLeft: 20 }}>
+          !ui.sidebarCollapsed &&
+          <Tabs defaultActiveKey="fields" style={{ marginLeft: 20 }}>
             <TabPane tab={<EditOutlined />} key="fields">
               <PerfectScrollbar options={{ suppressScrollX: true }}>
                 <Checkbox.Group onChange={setSelectedFields} value={selectedFields}>
@@ -81,25 +106,31 @@ const Log = () => {
             <TabPane tab={<FileTextOutlined />} key="files">
               <PerfectScrollbar options={{ suppressScrollX: true }}>
                 Files
-              </PerfectScrollbar>
+                </PerfectScrollbar>
             </TabPane>
             <TabPane tab={<DashboardOutlined />} key="gauges">
               Gauges
-            </TabPane>
+              </TabPane>
           </Tabs>
         }
       </Sider>
       <Layout style={{ width: '100%', textAlign: 'center', marginTop: 50 }}>
         <Content>
-          {isLoading ?
+          <div ref={contentRef} style={{ width: '100%', marginRight: margin }}>
-            <Spin size="large" />
+            {isLoading ?
-            :
+              <Spin size="large" />
-            <Canvas data={logs!.records as LogEntry[]} />
+              :
-          }
+              <Canvas
+                data={logs!.records as LogEntry[]}
+                width={canvasWidth}
+                height={600}
+              />
+            }
+          </div>
         </Content>
       </Layout>
     </>
   );
 };
 
-export default Log;
+export default connect(mapStateToProps)(Log);

src/components/Log/Canvas.tsx

@@ -24,7 +24,15 @@ enum Colors {
   WHITE = '#fff',
 }
 
-const Canvas = ({ data }: { data: LogEntry[] }) => {
+const Canvas = ({
+  data,
+  width,
+  height,
+}: {
+  data: LogEntry[],
+  width: number,
+  height: number,
+}) => {
   const [zoom, setZoom] = useState(1);
   const [pan, setPan] = useState(0);
   const [isMouseDown, setIsMouseDown] = useState(false);
@@ -32,7 +40,7 @@ const Canvas = ({ data }: { data: LogEntry[] }) => {
   const [previousTouch, setPreviousTouch] = useState<Touch | null>(null);
   const leftBoundary = 0;
   const [rightBoundary, setRightBoundary] = useState(0);
-  const canvasRef = useRef<HTMLCanvasElement>();
+  const canvasRef = useRef<HTMLCanvasElement | null>(null);
   const checkPan = (current: number, value: number) => {
     if (current > leftBoundary) {
       return leftBoundary;
@@ -139,14 +147,14 @@ const Canvas = ({ data }: { data: LogEntry[] }) => {
 
   useEffect(() => {
     plot();
-  }, [plot]);
+  }, [plot, width, height]);
 
   return (
     <canvas
       ref={canvasRef as any}
       className="plot"
-      width="1200px"
+      width={width}
-      height="600px"
+      height={height}
       onWheel={onWheel}
       onMouseMove={onMouseMove}
       onTouchMove={onTouchMove}