feat: added tooltip to "simple mode" switch

metrico · Apr 16, 2024 · 27401fb · 27401fb
1 parent 919f45c
commit 27401fb
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 2 deletions.
diff --git a/src/components/FilterPanel/FilterPanel.tsx b/src/components/FilterPanel/FilterPanel.tsx
@@ -7,6 +7,7 @@ export interface FilterProps {
     data: PanelData
     onFilter: Function
     onSimplify: Function
+    options: any
 }
 export interface Filters {
     ip: {
@@ -96,7 +97,17 @@ export const FilterPanel = ({ data, onFilter, onSimplify }: FilterProps) => {
                 `
             )}
         >
-            <InlineSwitch showLabel={true} defaultChecked={false} value={isSimplify} onChange={() => { setIsSimplify(!isSimplify); }} label="Simple format" />
+            <Tooltip
+                content={`Changes display to simple format, which is more compact and doesn't have ${options?.aboveArrow} ${options?.belowArrow && options?.aboveArrow ? 'and' : ''} ${options?.aboveArrow} ${options?.belowArrow} labels`} placement="top">
+                <span style={{ display: 'flex', flexDirection: 'column' }}>
+                    <InlineSwitch
+                        showLabel={true}
+                        defaultChecked={false}
+                        value={isSimplify}
+                        onChange={() => { setIsSimplify(!isSimplify); }}
+                        label="Simple format" />
+                </span>
+            </Tooltip>
             <hr />
             {payloadTypesArray.length > 0 &&
                 <MyCollapse label="Payload type" filterState={filters} filterProperty={'type'} setFilters={setFilters} filterLabel={"type"}>

diff --git a/src/components/SimplePanel.tsx b/src/components/SimplePanel.tsx
@@ -507,7 +507,7 @@ export const SimplePanel: React.FC<Props> = ({ options, data, width, height }) =
         >
             <div id="buttons" className={styles.buttonWrapper}>
 
-                <FilterPanel data={data} onFilter={setFilters} onSimplify={setIsSimplify} />
+                <FilterPanel data={data} onFilter={setFilters} onSimplify={setIsSimplify} options={options} />
                 {(data?.request?.app !== 'app') && (
                     // <span >
                     <Dropdown overlay={menu}>