Miguel
/
S7_snap7_Stremer_n_Recorder
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Add TooltipFieldTemplate for enhanced user experience in forms 

- Integrated TooltipFieldTemplate into PlotHistoricalManager, PlotManager, and Dashboard components to provide contextual tooltips for form fields.
- Updated templates in various forms to include the new TooltipFieldTemplate alongside the existing LayoutObjectFieldTemplate.
- Enhanced TooltipFieldTemplate with theme-aware colors and improved styling for better readability.
- Adjusted system state to enable connection and updated the last update timestamp.
This commit is contained in:
Miguel 2025-08-27 13:04:57 +02:00
parent dec3a49836
commit 76c6743537
6 changed files with 2404 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2357
application_events.json
View File

File diff suppressed because it is too large Load Diff

6
frontend/src/components/PlotHistoricalManager.jsx
View File

@ -45,6 +45,7 @@ import Form from '@rjsf/chakra-ui'
import validator from '@rjsf/validator-ajv8'
import allWidgets from './widgets/AllWidgets'
import LayoutObjectFieldTemplate from './rjsf/LayoutObjectFieldTemplate'
import TooltipFieldTemplate from './rjsf/TooltipFieldTemplate'
import PlotHistoricalSession from './PlotHistoricalSession'
import { useVariableContext } from '../contexts/VariableContext'
import * as api from '../services/api'
@ -232,7 +233,10 @@ function CollapsiblePlotItemsForm({ data, schema, uiSchema, onSave, title, icon,
formData={item}
validator={validator}
widgets={allWidgets}
templates={{ ObjectFieldTemplate: LayoutObjectFieldTemplate }}
templates={{
ObjectFieldTemplate: LayoutObjectFieldTemplate,
FieldTemplate: TooltipFieldTemplate
}}
onChange={(e) => {
const newFormData = [...formData]
newFormData[index] = e.formData

16
frontend/src/components/PlotManager.jsx
View File

@ -39,6 +39,7 @@ import Form from '@rjsf/chakra-ui'
import validator from '@rjsf/validator-ajv8'
import allWidgets from './widgets/AllWidgets'
import LayoutObjectFieldTemplate from './rjsf/LayoutObjectFieldTemplate'
import TooltipFieldTemplate from './rjsf/TooltipFieldTemplate'
import PlotRealtimeSession from './PlotRealtimeSession'
import { useVariableContext } from '../contexts/VariableContext'
import * as api from '../services/api'
@ -558,7 +559,10 @@ function CollapsiblePlotItemsForm({ data, schema, uiSchema, onSave, title, icon,
formData={item}
validator={validator}
widgets={allWidgets}
templates={{ ObjectFieldTemplate: LayoutObjectFieldTemplate }}
templates={{
ObjectFieldTemplate: LayoutObjectFieldTemplate,
FieldTemplate: TooltipFieldTemplate
}}
onChange={({ formData: newItemData }) => updateItem(index, newItemData)}
>
<div></div> {/* Prevents form buttons from showing */}
@ -624,7 +628,10 @@ function CollapsiblePlotItemsForm({ data, schema, uiSchema, onSave, title, icon,
formData={item}
validator={validator}
widgets={allWidgets}
templates={{ ObjectFieldTemplate: LayoutObjectFieldTemplate }}
templates={{
ObjectFieldTemplate: LayoutObjectFieldTemplate,
FieldTemplate: TooltipFieldTemplate
}}
onChange={({ formData: newItemData }) => updateItem(index, newItemData)}
>
<div></div> {/* Prevents form buttons from showing */}
@ -1176,7 +1183,10 @@ export default function PlotManager() {
formData={selectedPlotVars}
validator={validator}
widgets={allWidgets}
templates={{ ObjectFieldTemplate: LayoutObjectFieldTemplate }}
templates={{
ObjectFieldTemplate: LayoutObjectFieldTemplate,
FieldTemplate: TooltipFieldTemplate
}}
onSubmit={({ formData }) => {
const updatedConfig = updateSelectedPlotVariables(formData)
savePlotVariables(updatedConfig).then(() => {

18
frontend/src/components/rjsf/TooltipFieldTemplate.jsx
View File

@ -1,5 +1,5 @@
import React from 'react'
import { Box, FormControl, FormErrorMessage, Tooltip as ChakraTooltip } from '@chakra-ui/react'
import { Box, FormControl, FormErrorMessage, Tooltip as ChakraTooltip, useColorModeValue } from '@chakra-ui/react'
/**
* Custom RJSF Field Template with integrated tooltips
@ -21,6 +21,11 @@ export default function TooltipFieldTemplate(props) {
uiSchema
} = props
// Theme-aware colors for tooltips
// Both light and dark themes use dark backgrounds with light text for better readability
const tooltipBg = useColorModeValue('gray.700', 'gray.600')
const tooltipColor = useColorModeValue('white', 'white')
if (hidden) {
return <div style={{ display: 'none' }}>{children}</div>
}
@ -36,6 +41,17 @@ export default function TooltipFieldTemplate(props) {
<ChakraTooltip
label={tooltipContent}
hasArrow
bg={tooltipBg}
color={tooltipColor}
fontSize="sm"
px={3}
py={2}
borderRadius="md"
maxW="300px"
textAlign="center"
placement="top"
openDelay={300}
closeDelay={100}
>
<Box w="full">
{children}

15
frontend/src/pages/Dashboard.jsx
View File

@ -565,7 +565,10 @@ function CollapsibleArrayItemsForm({ data, schema, uiSchema, onSave, title, icon
formData={item}
validator={validator}
widgets={allWidgets}
templates={{ ObjectFieldTemplate: LayoutObjectFieldTemplate }}
templates={{
ObjectFieldTemplate: LayoutObjectFieldTemplate,
FieldTemplate: TooltipFieldTemplate
}}
onChange={({ formData: newItemData }) => updateItem(index, newItemData)}
>
<div></div> {/* Prevents form buttons from showing */}
@ -665,7 +668,10 @@ function CollapsibleArrayForm({ data, schema, uiSchema, onSave, title, icon, get
formData={formData}
validator={validator}
widgets={allWidgets}
templates={{ ObjectFieldTemplate: LayoutObjectFieldTemplate }}
templates={{
ObjectFieldTemplate: LayoutObjectFieldTemplate,
FieldTemplate: TooltipFieldTemplate
}}
onSubmit={({ formData }) => onSave(formData)}
onChange={({ formData }) => setFormData(formData)}
>
@ -1602,7 +1608,10 @@ function DatasetManager() {
formData={selectedDatasetVars}
validator={validator}
widgets={allWidgets}
templates={{ ObjectFieldTemplate: LayoutObjectFieldTemplate }}
templates={{
ObjectFieldTemplate: LayoutObjectFieldTemplate,
FieldTemplate: TooltipFieldTemplate
}}
onSubmit={({ formData }) => {
updateSelectedDatasetVariables(formData)
saveVariables(variablesConfig).then(() => {

4
system_state.json
View File

@ -1,12 +1,12 @@
{
"last_state": {
"should_connect": false,
"should_connect": true,
"should_stream": false,
"active_datasets": [
"DAR"
]
},
"auto_recovery_enabled": true,
"last_update": "2025-08-27T12:43:58.812150",
"last_update": "2025-08-27T12:48:41.182586",
"plotjuggler_path": "C:\\Program Files\\PlotJuggler\\plotjuggler.exe"
}