Extract value renderer panel

app/src/components/Sidebar/Sidebar.tsx

@@ -1,28 +1,20 @@
 import * as q from '../../../../backend/src/Model'
 import * as React from 'react'
-import Clear from '@material-ui/icons/Clear'
-import Code from '@material-ui/icons/Code'
 import Copy from '../Copy'
 import CustomIconButton from '../CustomIconButton'
-import DateFormatter from '../helper/DateFormatter'
 import Delete from '@material-ui/icons/Delete'
 import ExpandMore from '@material-ui/icons/ExpandMore'
-import MessageHistory from './MessageHistory'
 import NodeStats from './NodeStats'
-import Reorder from '@material-ui/icons/Reorder'
-import ToggleButton from '@material-ui/lab/ToggleButton'
-import ToggleButtonGroup from '@material-ui/lab/ToggleButtonGroup'
 import Topic from './Topic'
+import ValueRendererPanel from './ValueRenderer/Panel'
 import { AppState } from '../../reducers'
 import { bindActionCreators } from 'redux'
 import { connect } from 'react-redux'
 import { settingsActions, sidebarActons } from '../../actions'
 import { StyleRulesCallback, Theme, withStyles } from '@material-ui/core/styles'
 import { TopicViewModel } from '../../TopicViewModel'
-import { ValueRendererDisplayMode } from '../../reducers/Settings'
 
 import {
-  Button,
   ExpansionPanel,
   ExpansionPanelDetails,
   ExpansionPanelSummary,
@@ -34,13 +26,11 @@ import {
 const throttle = require('lodash.throttle')
 
 const Publish = React.lazy(() => import('./Publish/Publish'))
-const ValueRenderer = React.lazy(() => import('./ValueRenderer'))
 
 interface Props {
   node?: q.TreeNode<TopicViewModel>
   actions: typeof sidebarActons
   settingsActions: typeof settingsActions
-  valueRendererDisplayMode: ValueRendererDisplayMode
   classes: any
   connectionId?: string
 }
@@ -52,7 +42,6 @@ interface State {
 }
 
 class Sidebar extends React.Component<Props, State> {
-  private valueRef: any = React.createRef<HTMLDivElement>()
   private updateNode = throttle(() => {
     this.setState(this.state)
   }, 300)
@@ -141,34 +130,12 @@ class Sidebar extends React.Component<Props, State> {
     this.props.actions.clearTopic(topic, recursive, maxCount)
   }
 
-  private renderActionButtons() {
-    const handleValue = (_e: React.MouseEvent, value: any) => {
-      this.props.settingsActions.setValueDisplayMode(value)
-    }
-
-    return (
-      <ToggleButtonGroup id="valueRendererDisplayMode" value={this.props.valueRendererDisplayMode} exclusive={true} onChange={handleValue}>
-        <ToggleButton value="diff" id="valueRendererDisplayMode-diff">
-          <Tooltip title="Show difference between the current and the last message">
-            <Code />
-          </Tooltip>
-        </ToggleButton>
-        <ToggleButton value="raw" id="valueRendererDisplayMode-raw">
-          <Tooltip title="Raw value">
-            <Reorder />
-          </Tooltip>
-        </ToggleButton>
-      </ToggleButtonGroup>
-    )
-  }
-
   private renderNode() {
     const { classes, node } = this.props
 
     const copyTopic = node ? <Copy value={node.path()} /> : null
     const deleteTopic = this.renderTopicDeleteButton()
     const deleteRecursiveTopic = this.renderRecursiveTopicDeleteButton()
-    const copyValue = node && node.message ? <Copy value={node.message.value} /> : null
     const summaryStyle = { minHeight: '0' }
     return (
       <div>
@@ -180,20 +147,7 @@ class Sidebar extends React.Component<Props, State> {
             <Topic node={this.props.node} didSelectNode={this.updateNode} />
           </ExpansionPanelDetails>
         </ExpansionPanel>
-        <ExpansionPanel key="value" defaultExpanded={true}>
+        {<ValuePanel />}
-          <ExpansionPanelSummary expandIcon={<ExpandMore />} style={summaryStyle}>
-            <Typography className={classes.heading}>Value {copyValue}</Typography>
-          </ExpansionPanelSummary>
-          <ExpansionPanelDetails style={this.detailsStyle}>
-            {this.messageMetaInfo()}
-            <div ref={this.valueRef}>
-              <React.Suspense fallback={<div>Loading...</div>}>
-                {this.renderValue()}
-              </React.Suspense>
-            </div>
-            <div><MessageHistory onSelect={this.handleMessageHistorySelect} selected={this.state.compareMessage} node={this.props.node} /></div>
-          </ExpansionPanelDetails>
-        </ExpansionPanel>
         <ExpansionPanel defaultExpanded={true}>
           <ExpansionPanelSummary expandIcon={<ExpandMore />} style={summaryStyle}>
             <Typography className={classes.heading}>Publish</Typography>
@@ -214,59 +168,6 @@ class Sidebar extends React.Component<Props, State> {
     )
   }
 
-  private renderValue() {
-    const node = this.props.node
-    if (!node || !node.message) {
-      return null
-    }
-
-    return (
-      <ValueRenderer
-        message={node.message}
-        messageHistory={node.messageHistory}
-        compareWith={this.state.compareMessage} />
-    )
-  }
-
-  private messageMetaInfo() {
-    if (!this.props.node || !this.props.node.message || !this.props.node.mqttMessage) {
-      return null
-    }
-
-    const retainedButton = (
-      <Tooltip title="Delete retained topic" placement="top">
-        <Button
-          size="small"
-          color="secondary"
-          variant="contained"
-          style={{ marginTop: '-3px', padding: '0px 4px', minHeight: '24px' }}
-          onClick={this.props.actions.clearRetainedTopic}
-        >
-          retained <Clear style={{ fontSize: '16px', marginLeft: '2px' }} />
-        </Button>
-      </Tooltip>
-    )
-
-    return (
-      <div style={{ width: '100%', display: 'flex', paddingLeft: '8px' }}>
-        <div style={{ flex: 6 }}><Typography>QoS: {this.props.node.mqttMessage.qos}</Typography></div>
-        <span style={{ marginTop: '-8px' }}>{this.renderActionButtons()}</span>
-        <div style={{ flex: 8, textAlign: 'center' }}>
-          {this.props.node.mqttMessage.retain ? retainedButton : null}
-        </div>
-        <div style={{ flex: 8, textAlign: 'right' }}><Typography><i><DateFormatter date={this.props.node.message.received} /></i></Typography></div>
-      </div>
-    )
-  }
-
-  private handleMessageHistorySelect = (message: q.Message) => {
-    if (message !== this.state.compareMessage) {
-      this.setState({ compareMessage: message })
-    } else {
-      this.setState({ compareMessage: undefined })
-    }
-  }
-
   private renderNodeStats() {
     if (!this.props.node) {
       return null
@@ -283,7 +184,6 @@ class Sidebar extends React.Component<Props, State> {
 const mapStateToProps = (state: AppState) => {
   return {
     node: state.tree.selectedTopic,
-    valueRendererDisplayMode: state.settings.valueRendererDisplayMode,
   }
 }
 

app/src/components/Sidebar/ValueRenderer/MessageHistory.tsx

@@ -1,9 +1,9 @@
-import * as q from '../../../../backend/src/Model'
+import * as q from '../../../../../backend/src/Model'
 import * as React from 'react'
 import BarChart from '@material-ui/icons/BarChart'
-import DateFormatter from '../helper/DateFormatter'
+import DateFormatter from '../../helper/DateFormatter'
-import History from './History'
+import History from '../History'
-import { TopicViewModel } from '../../TopicViewModel'
+import { TopicViewModel } from '../../../TopicViewModel'
 
 const PlotHistory = React.lazy(() => import('./PlotHistory'))
 

app/src/components/Sidebar/ValueRenderer/Panel.tsx

@@ -0,0 +1,178 @@
+import * as q from '../../../../../backend/src/Model'
+import * as React from 'react'
+import Clear from '@material-ui/icons/Clear'
+import Code from '@material-ui/icons/Code'
+import Copy from '../../Copy'
+import DateFormatter from '../../helper/DateFormatter'
+import ExpandMore from '@material-ui/icons/ExpandMore'
+import MessageHistory from './MessageHistory'
+import Reorder from '@material-ui/icons/Reorder'
+import ToggleButton from '@material-ui/lab/ToggleButton'
+import ToggleButtonGroup from '@material-ui/lab/ToggleButtonGroup'
+import ValueRenderer from './ValueRenderer'
+import { AppState } from '../../../reducers'
+import { bindActionCreators } from 'redux'
+import { connect } from 'react-redux'
+import { settingsActions, sidebarActons } from '../../../actions'
+import { ValueRendererDisplayMode } from '../../../reducers/Settings'
+
+import {
+  Button,
+  ExpansionPanel,
+  ExpansionPanelDetails,
+  ExpansionPanelSummary,
+  Tooltip,
+  Typography,
+  StyleRulesCallback,
+  withStyles,
+  Theme,
+  } from '@material-ui/core'
+
+interface Props {
+  node?: q.TreeNode<any>
+  valueRendererDisplayMode: ValueRendererDisplayMode
+  sidebarActions: typeof sidebarActons
+  settingsActions: typeof settingsActions
+  classes: any
+}
+
+interface State {
+  compareMessage?: q.Message
+}
+
+class Panel extends React.Component<Props, State> {
+  constructor(props: Props) {
+    super(props)
+    this.state = { }
+  }
+
+  public render() {
+    const { node, classes } = this.props
+    const { detailsStyle, summaryStyle } = this.panelStyle()
+
+    const copyValue = node && node.message ? <Copy value={node.message.value} /> : null
+
+    return (
+      <ExpansionPanel key="value" defaultExpanded={true}>
+          <ExpansionPanelSummary expandIcon={<ExpandMore />} style={summaryStyle}>
+            <Typography className={classes.heading}>Value {copyValue}</Typography>
+          </ExpansionPanelSummary>
+          <ExpansionPanelDetails style={detailsStyle}>
+            {this.messageMetaInfo()}
+            <div>
+              <React.Suspense fallback={<div>Loading...</div>}>
+                {this.renderValue()}
+              </React.Suspense>
+            </div>
+            <div><MessageHistory onSelect={this.handleMessageHistorySelect} selected={this.state.compareMessage} node={this.props.node} /></div>
+          </ExpansionPanelDetails>
+        </ExpansionPanel>
+    )
+  }
+
+  private renderValue() {
+    const node = this.props.node
+    if (!node || !node.message) {
+      return null
+    }
+
+    return (
+      <ValueRenderer
+        message={node.message}
+        messageHistory={node.messageHistory}
+        compareWith={this.state.compareMessage} />
+    )
+  }
+
+  private messageMetaInfo() {
+    if (!this.props.node || !this.props.node.message || !this.props.node.mqttMessage) {
+      return null
+    }
+
+    const retainedButton = (
+      <Tooltip title="Delete retained topic" placement="top">
+        <Button
+          size="small"
+          color="secondary"
+          variant="contained"
+          style={{ marginTop: '-3px', padding: '0px 4px', minHeight: '24px' }}
+          onClick={this.props.sidebarActions.clearRetainedTopic}
+        >
+          retained <Clear style={{ fontSize: '16px', marginLeft: '2px' }} />
+        </Button>
+      </Tooltip>
+    )
+
+    return (
+      <div style={{ width: '100%', display: 'flex', paddingLeft: '8px' }}>
+        <div style={{ flex: 6 }}><Typography>QoS: {this.props.node.mqttMessage.qos}</Typography></div>
+        <span style={{ marginTop: '-8px' }}>{this.renderActionButtons()}</span>
+        <div style={{ flex: 8, textAlign: 'center' }}>
+          {this.props.node.mqttMessage.retain ? retainedButton : null}
+        </div>
+        <div style={{ flex: 8, textAlign: 'right' }}><Typography><i><DateFormatter date={this.props.node.message.received} /></i></Typography></div>
+      </div>
+    )
+  }
+
+  private renderActionButtons() {
+    const handleValue = (_e: React.MouseEvent, value: any) => {
+      this.props.settingsActions.setValueDisplayMode(value)
+    }
+
+    return (
+      <ToggleButtonGroup id="valueRendererDisplayMode" value={this.props.valueRendererDisplayMode} exclusive={true} onChange={handleValue}>
+        <ToggleButton value="diff" id="valueRendererDisplayMode-diff">
+          <Tooltip title="Show difference between the current and the last message">
+            <Code />
+          </Tooltip>
+        </ToggleButton>
+        <ToggleButton value="raw" id="valueRendererDisplayMode-raw">
+          <Tooltip title="Raw value">
+            <Reorder />
+          </Tooltip>
+        </ToggleButton>
+      </ToggleButtonGroup>
+    )
+  }
+
+  private panelStyle() {
+    return {
+      detailsStyle: { padding: '0px 16px 8px 8px', display: 'block' },
+      summaryStyle: { minHeight: '0' },
+    }
+  }
+
+  private handleMessageHistorySelect = (message: q.Message) => {
+    if (message !== this.state.compareMessage) {
+      this.setState({ compareMessage: message })
+    } else {
+      this.setState({ compareMessage: undefined })
+    }
+  }
+}
+
+const mapDispatchToProps = (dispatch: any) => {
+  return {
+    sidebarActions: bindActionCreators(sidebarActons, dispatch),
+    settingsActions: bindActionCreators(settingsActions, dispatch),
+  }
+}
+
+const mapStateToProps = (state: AppState) => {
+  return {
+    valueRendererDisplayMode: state.settings.valueRendererDisplayMode,
+    node: state.tree.selectedTopic,
+  }
+}
+
+const styles: StyleRulesCallback<string> = (theme: Theme) => {
+  return {
+    heading: {
+      fontSize: theme.typography.pxToRem(15),
+      fontWeight: theme.typography.fontWeightRegular,
+    },
+  }
+}
+
+export default withStyles(styles)(connect(mapStateToProps, mapDispatchToProps)(Panel))

app/src/components/Sidebar/ValueRenderer/PlotHistory.tsx

@@ -1,6 +1,6 @@
-import * as q from '../../../../backend/src/Model'
+import * as q from '../../../../../backend/src/Model'
 import * as React from 'react'
-import DateFormatter from '../helper/DateFormatter'
+import DateFormatter from '../../helper/DateFormatter'
 import { default as ReactResizeDetector } from 'react-resize-detector'
 import 'react-vis/dist/style.css'
 const { XYPlot, LineMarkSeries, Hint, YAxis, HorizontalGridLines } = require('react-vis')

app/src/components/Sidebar/ValueRenderer/ValueRenderer.tsx

@@ -1,10 +1,10 @@
-import * as q from '../../../../backend/src/Model'
+import * as q from '../../../../../backend/src/Model'
 import * as React from 'react'
-import CodeDiff from '../CodeDiff'
+import CodeDiff from '../../CodeDiff'
-import { AppState } from '../../reducers'
+import { AppState } from '../../../reducers'
 import { connect } from 'react-redux'
 import { default as ReactResizeDetector } from 'react-resize-detector'
-import { ValueRendererDisplayMode } from '../../reducers/Settings'
+import { ValueRendererDisplayMode } from '../../../reducers/Settings'
 
 interface Props {
   message: q.Message