From b3a37e4794caaaeddc3801f8303c721094644ce0 Mon Sep 17 00:00:00 2001 From: Thomas Nordquist Date: Wed, 22 May 2024 14:44:06 +0200 Subject: [PATCH] chore: refactor --- app/src/actions/Tree.ts | 9 +- .../ConnectionSetup/ProfileList/index.tsx | 2 +- .../Sidebar/TopicPanel/TopicPanel.tsx | 3 +- .../Sidebar/TopicPanel/TopicTypeButton.tsx | 61 +- .../Sidebar/ValueRenderer/MessageHistory.tsx | 168 ++--- .../Sidebar/ValueRenderer/ValuePanel.tsx | 9 +- .../Sidebar/ValueRenderer/ValueRenderer.tsx | 70 +- app/src/components/TopicPlot.tsx | 18 +- .../Tree/TreeNode/TreeNodeTitle.tsx | 57 +- .../Tree/TreeNode/effects/useViewModel.tsx | 18 + .../effects/useViewModelSubscriptions.tsx | 44 +- app/src/components/helper/Copy.tsx | 5 +- app/src/components/hooks/useDecoder.ts | 28 + app/src/components/hooks/useSubscription.ts | 10 + app/src/model/LegacyConnectionSettings.ts | 1 - app/src/model/TopicViewModel.ts | 60 +- app/yarn.lock | 671 ++++++++++++------ backend/src/Model/TreeNode.ts | 31 - backend/src/Model/sparkplugb.ts | 5 - yarn.lock | 291 +++++++- 20 files changed, 1037 insertions(+), 524 deletions(-) create mode 100644 app/src/components/Tree/TreeNode/effects/useViewModel.tsx create mode 100644 app/src/components/hooks/useDecoder.ts create mode 100644 app/src/components/hooks/useSubscription.ts diff --git a/app/src/actions/Tree.ts b/app/src/actions/Tree.ts index 0dd1896..25ddcc0 100644 --- a/app/src/actions/Tree.ts +++ b/app/src/actions/Tree.ts @@ -33,13 +33,8 @@ const debouncedSelectTopic = debounce( setTopicDispatch = setTopic(topic.path()) } - if (previouslySelectedTopic && previouslySelectedTopic.viewModel) { - previouslySelectedTopic.viewModel.setSelected(false) - } - - if (topic.viewModel) { - topic.viewModel.setSelected(true) - } + previouslySelectedTopic?.viewModel?.setSelected(false) + topic.viewModel?.setSelected(true) const selectTreeTopicDispatch = { selectedTopic: topic, diff --git a/app/src/components/ConnectionSetup/ProfileList/index.tsx b/app/src/components/ConnectionSetup/ProfileList/index.tsx index eb76fc1..8efa461 100644 --- a/app/src/components/ConnectionSetup/ProfileList/index.tsx +++ b/app/src/components/ConnectionSetup/ProfileList/index.tsx @@ -7,7 +7,7 @@ import { connect } from 'react-redux' import { connectionManagerActions } from '../../../actions' import { ConnectionOptions } from '../../../model/ConnectionOptions' import { KeyCodes } from '../../../utils/KeyCodes' -import { List, ListSubheader } from '@material-ui/core' +import { List } from '@material-ui/core' import { Theme, withStyles } from '@material-ui/core/styles' import { useGlobalKeyEventHandler } from '../../../effects/useGlobalKeyEventHandler' diff --git a/app/src/components/Sidebar/TopicPanel/TopicPanel.tsx b/app/src/components/Sidebar/TopicPanel/TopicPanel.tsx index 253f8f1..504f860 100644 --- a/app/src/components/Sidebar/TopicPanel/TopicPanel.tsx +++ b/app/src/components/Sidebar/TopicPanel/TopicPanel.tsx @@ -12,7 +12,6 @@ import { sidebarActions } from '../../../actions' const TopicPanel = (props: { node?: q.TreeNode; actions: typeof sidebarActions }) => { const { node } = props - console.log(node && node.path()) const copyTopic = node ? : null @@ -35,7 +34,7 @@ const TopicPanel = (props: { node?: q.TreeNode; actions: typeof sidebarActi ), - [node, node && node.childTopicCount()] + [node, node?.childTopicCount()] ) } diff --git a/app/src/components/Sidebar/TopicPanel/TopicTypeButton.tsx b/app/src/components/Sidebar/TopicPanel/TopicTypeButton.tsx index 0ab317d..c982f63 100644 --- a/app/src/components/Sidebar/TopicPanel/TopicTypeButton.tsx +++ b/app/src/components/Sidebar/TopicPanel/TopicTypeButton.tsx @@ -11,23 +11,6 @@ import WarningRounded from '@material-ui/icons/WarningRounded' import { IDecoder, decoders } from '../../../../../backend/src/Model/sparkplugb' import { Tooltip } from '@material-ui/core' -// const options: q.TopicDataType[] = ['json', 'string', 'hex', 'integer', 'unsigned int', 'floating point'] -const options: q.TopicDataType[] = [ - 'json', - 'string', - 'hex', - 'uint8', - 'uint16', - 'uint32', - 'uint64', - 'int8', - 'int16', - 'int32', - 'int64', - 'float', - 'double', -] - export const TopicTypeButton = (props: { node?: q.TreeNode }) => { const { node } = props if (!node || !node.message || !node.message.payload) { @@ -39,34 +22,40 @@ export const TopicTypeButton = (props: { node?: q.TreeNode }) => { const [anchorEl, setAnchorEl] = React.useState(null) const [open, setOpen] = React.useState(false) - const selectOption = useCallback((decoder: IDecoder, format: string) => { - if (!node) { - return - } - node.decoder = decoder - node.decoderFormat = format - setOpen(false) - }, []) + const selectOption = useCallback( + (decoder: IDecoder, format: string) => { + if (!node) { + return + } - const handleToggle = (event: React.MouseEvent) => { - event.stopPropagation() - if (open === true) { - return - } - setAnchorEl(event.currentTarget) - setOpen(prevOpen => !prevOpen) - } + node.viewModel.decoder = { decoder, format } + setOpen(false) + }, + [node] + ) - const handleClose = (event: React.MouseEvent) => { + const handleToggle = useCallback( + (event: React.MouseEvent) => { + event.stopPropagation() + if (open === true) { + return + } + setAnchorEl(event.currentTarget) + setOpen(prevOpen => !prevOpen) + }, + [open] + ) + + const handleClose = useCallback((event: React.MouseEvent) => { if (anchorEl && anchorEl.contains(event.target as HTMLElement)) { return } setOpen(false) - } + }, []) return (