Debounce select topic action

Update dependecies & release
Show broker statistics only if there are any
2026-09-11 17:13:53 +00:00 · 2019-01-25 20:57:20 +01:00 · 2019-01-25 20:17:05 +01:00 · 2019-01-25 20:02:45 +01:00 · 2019-01-25 20:02:09 +01:00 · 2019-01-25 20:01:44 +01:00
16 changed files with 34 additions and 32 deletions
@@ -1,5 +1,5 @@
 # MQTT-Explorer
-[![Downloads](https://github-basic-badges.herokuapp.com/release/thomasnordquist/MQTT-Explorer.svg)](https://travis-ci.org/thomasnordquist/MQTT-Explorer/releases)
+[![Downloads](https://img.shields.io/github/release/thomasnordquist/mqtt-explorer.svg)](https://travis-ci.org/thomasnordquist/MQTT-Explorer/releases)
 [![Downloads](https://img.shields.io/github/downloads/thomasnordquist/mqtt-explorer/total.svg)](https://travis-ci.org/thomasnordquist/MQTT-Explorer/releases)
 [![Build Status](https://travis-ci.org/thomasnordquist/MQTT-Explorer.svg?branch=master)](https://travis-ci.org/thomasnordquist/MQTT-Explorer)

@@ -3,7 +3,7 @@
    <head>
        <meta charset="UTF-8" />
        <title>MQTT-Explorer</title>
-        <script src="./build/bugtracking.bundle.js"></script>
+        <script src="./bugtracking.bundle.js"></script>

        <style>
          body, html {
@@ -2301,7 +2301,7 @@
      }
    },
    "electron-telemetry": {
-      "version": "git+https://github.com/thomasnordquist/electron-telemetry.git#d5610659860aa248998226e1498920932eb570ed",
+      "version": "git+https://github.com/thomasnordquist/electron-telemetry.git#a58a28de84874b16fb3d60ae9e83f5a94d873353",
      "from": "git+https://github.com/thomasnordquist/electron-telemetry.git",
      "dev": true,
      "requires": {
@@ -17,6 +17,7 @@
    "electron-nucleus": "^1.11.0",
    "electron-telemetry": "git+https://github.com/thomasnordquist/electron-telemetry.git",
    "html-webpack-plugin": "^4.0.0-beta.5",
+    "lodash.debounce": "^4.0.8",
    "number-abbreviate": "^2.0.0",
    "react": "^16.8.0-alpha.1",
    "react-dom": "^16.7.0",
@@ -98,7 +98,7 @@ const styles = (theme: Theme) => {
    },
    content: {
      width: '100vw',
-      overflowX: 'hidden',
+      overflowX: 'hidden' as 'hidden',
      backgroundColor: theme.palette.background.default,
      transition: theme.transitions.create('transform', {
        easing: theme.transitions.easing.sharp,
@@ -107,7 +107,7 @@ const styles = (theme: Theme) => {
      transform: 'translateX(0px)',
    },
    contentShift: {
-      overflowX: 'hidden',
+      overflowX: 'hidden' as 'hidden',
      width: '100vw',
      padding: 0,
      backgroundColor: theme.palette.background.default,
@@ -5,8 +5,13 @@ import { Dispatch, AnyAction } from 'redux'
 import { setTopic } from './Publish'
 import { TopicViewModel } from '../TopicViewModel'
 import { batchActions } from 'redux-batched-actions'
+const debounce = require('lodash.debounce')

 export const selectTopic = (topic: q.TreeNode<TopicViewModel>) => (dispatch: Dispatch<any>, getState: () => AppState)  => {
+  debouncedSelectTopic(topic, dispatch, getState)
+}
+
+const debouncedSelectTopic = debounce((topic: q.TreeNode<TopicViewModel>, dispatch: Dispatch<any>, getState: () => AppState)  => {
  const { selectedTopic } = getState().tree
  if (selectedTopic === topic) {
    return
@@ -36,7 +41,7 @@ export const selectTopic = (topic: q.TreeNode<TopicViewModel>) => (dispatch: Dis
  } else {
    dispatch(selectTreeTopicDispatch)
  }
-}
+}, 70)

 export const showTree = (tree?: q.Tree<TopicViewModel>) => (dispatch: Dispatch<any>, getState: () => AppState): AnyAction  => {
  const visibleTree = getState().tree.tree
@@ -42,7 +42,7 @@ class BrokerStatistics extends React.Component<Props, {}> {

  public render() {
    const { tree, classes } = this.props
-    if (!tree) {
+    if (!tree || !tree.findNode('$SYS')) {
      return null
    }

@@ -23,15 +23,16 @@ import ExpandMore from '@material-ui/icons/ExpandMore'
 import Clear from '@material-ui/icons/Clear'
 import MessageHistory from './MessageHistory'
 import NodeStats from './NodeStats'
-const Publish = React.lazy(() => import('./Publish/Publish'))
 import Topic from './Topic'
-const ValueRenderer = React.lazy(() => import('./ValueRenderer'))
 import { connect } from 'react-redux'
 import { bindActionCreators } from 'redux'
 import { TopicViewModel } from '../../TopicViewModel'
-
+import { default as ReactResizeDetector } from 'react-resize-detector'
 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,
@@ -42,6 +43,7 @@ interface Props {
 interface State {
  node: q.TreeNode<TopicViewModel>
  compareMessage?: q.Message
+  valueRenderWidth: number
 }

 class Sidebar extends React.Component<Props, State> {
@@ -53,7 +55,7 @@ class Sidebar extends React.Component<Props, State> {
  constructor(props: any) {
    super(props)
    console.error('Find and fix me #state')
-    this.state = { node: new q.Tree() }
+    this.state = { node: new q.Tree(), valueRenderWidth: 300 }
  }

  public componentWillReceiveProps(nextProps: Props) {
@@ -114,6 +116,7 @@ class Sidebar extends React.Component<Props, State> {
            {this.messageMetaInfo()}
            <div ref={this.valueRef}>
            <React.Suspense fallback={<div>Loading...</div>}>
+              <ReactResizeDetector handleWidth={true} onResize={this.valueRenderWidthChange} />
              <ValueRenderer message={this.props.node && this.props.node.message} />
            </React.Suspense>
            </div>
@@ -143,9 +146,14 @@ class Sidebar extends React.Component<Props, State> {
    )
  }

+  private valueRenderWidthChange = (width: number) => {
+    console.log(width)
+    this.setState({ valueRenderWidth: width })
+  }
+
  private showValueComparison = (a: any) => (
    <Fade {...a.TransitionProps} timeout={350}>
-      <Paper>
+      <Paper style={{ maxWidth: this.state.valueRenderWidth }}>
        <ValueRenderer message={this.state.compareMessage} />
      </Paper>
    </Fade>
@@ -38,7 +38,7 @@ class ValueRenderer extends React.Component<Props, {}> {
      const theme = (this.props.theme.palette.type === 'dark') ? 'monokai' : 'bright:inverted'
      return (
        <ReactJson
-          style={{ width: '100%' }}
+          style={{ width: '100%', overflowY: 'scroll', wordBreak: 'break-all' }}
          src={json}
          name={null}
          theme={theme}
@@ -225,7 +225,7 @@ class TreeNode extends React.Component<Props, State> {

  private setHover = debounce((hover: boolean) => {
    this.setState({ mouseOver: hover })
-  }, 5)
+  }, 45)

  private didClickNode = (event: React.MouseEvent) => {
    event.stopPropagation()
@@ -1,11 +0,0 @@
-import { createReducer } from './lib'
-import { createMuiTheme, Theme } from '@material-ui/core'
-
-const initialState: Theme = createMuiTheme({
-  palette: {
-    type: 'dark',
-  },
-  typography: { useNextVariants: true },
-})
-
-export const theme = createReducer(initialState, {})
@@ -5,7 +5,6 @@ import { PublishState, publishReducer } from './Publish'
 import { ConnectionState, connectionReducer } from './Connection'
 import { SettingsState, settingsReducer } from './Settings'
 import { TreeState, treeReducer } from './Tree'
-import { theme } from './theme'

 export enum ActionTypes {
  showUpdateNotification = 'SHOW_UPDATE_NOTIFICATION',
@@ -63,7 +62,6 @@ const tooBigReducer: Reducer<TooBigOfState | undefined, CustomAction> = (state =
 }

 const reducer = combineReducers({
-  theme,
  tooBigReducer,
  publish: publishReducer,
  connection: connectionReducer,
@@ -11,10 +11,11 @@ setInterval(() => {
  try {
    electronRendererTelementry.trackCustomEvent({ name: 'heapStatistics', payload: process.getHeapStatistics() })
    electronRendererTelementry.trackCustomEvent({ name: 'cpuUsage', payload: process.getCPUUsage() })
+    electronRendererTelementry.trackCustomEvent({ name: 'runningSince', payload: performance.now() })
  } catch (error) {
    console.error(error)
  }
-}, 30 * 1000)
+}, 60 * 1000)

 export function trackEvent(name: string) {
  if (name.match(/^@@redux/)) {
@@ -66,7 +66,7 @@ module.exports = {
    plugins: [
      new LiveReloadPlugin({}),
      new HtmlWebpackPlugin({ template: './index.html', file: './build/index.html', inject: false }),
-      new BundleAnalyzerPlugin(),
+    //   new BundleAnalyzerPlugin(),
    ],

    // When importing a module whose path matches one of the following, just
@@ -1,6 +1,6 @@
 {
  "name": "MQTT-Explorer",
-  "version": "0.1.0",
+  "version": "0.1.2",
  "lockfileVersion": 1,
  "requires": true,
  "dependencies": {
@@ -1281,7 +1281,7 @@
      }
    },
    "electron-telemetry": {
-      "version": "git+https://github.com/thomasnordquist/electron-telemetry.git#d5610659860aa248998226e1498920932eb570ed",
+      "version": "git+https://github.com/thomasnordquist/electron-telemetry.git#a58a28de84874b16fb3d60ae9e83f5a94d873353",
      "from": "git+https://github.com/thomasnordquist/electron-telemetry.git",
      "requires": {
        "@types/node": "^10.12.18",
@@ -1,6 +1,6 @@
 {
  "name": "MQTT-Explorer",
-  "version": "0.1.1",
+  "version": "0.1.2",
  "description": "Explore your message queues",
  "main": "dist/src/electron.js",
  "scripts": {
Author	SHA1	Message	Date
Thomas Nordquist	697b57a141	Debounce select topic action	2019-01-25 20:57:20 +01:00
Thomas Nordquist	98369b278a	Update dependecies & release	2019-01-25 20:17:05 +01:00
Thomas Nordquist	033e4945d0	Show broker statistics only if there are any	2019-01-25 20:02:45 +01:00
Thomas Nordquist	ac498a948e	Fix shield	2019-01-25 20:02:09 +01:00
Thomas Nordquist	d286611825	Track app uptime	2019-01-25 20:01:44 +01:00
Thomas Nordquist	763f301bfd	Fix side by side view width	2019-01-25 19:24:41 +01:00
Thomas Nordquist	d92dfde167	Prepare release	2019-01-25 18:07:42 +01:00
Thomas Nordquist	d8844aca89	Fix bugtracking	2019-01-25 18:07:13 +01:00
Thomas Nordquist	55b5233ee4	Clean up and fix build	2019-01-25 18:06:58 +01:00