feat: integrate selection with fieldsAsCols (#6218)

Author: asalem1

src/dataExplorer/components/FieldsAsColumns.tsx

@@ -1,22 +1,40 @@
-import React, {FC, useState} from 'react'
+import React, {FC, useCallback, useContext} from 'react'
 
 // Components
 import {ToggleWithLabelTooltip} from 'src/dataExplorer/components/ToggleWithLabelTooltip'
+import {PersistanceContext} from 'src/dataExplorer/context/persistance'
+import {event} from 'src/cloud/utils/reporting'
 
 // Styles
 import './Sidebar.scss'
 
-const FIELDS_AS_COLUMNS_TOOLTIP = `test`
-
 const FieldsAsColumns: FC = () => {
-  const [fieldsAsColumns, setFieldsAsColumns] = useState(false)
+  const {selection, setSelection} = useContext(PersistanceContext)
+
+  const handleToggle = useCallback(() => {
+    const value = !selection?.resultOptions?.fieldsAsColumn
+    event('set fields as columns: ', {value: `${value}`})
+    setSelection({
+      resultOptions: {
+        ...selection.resultOptions,
+        fieldsAsColumn: value,
+      },
+    })
+  }, [selection.resultOptions, setSelection])
 
   return (
     <ToggleWithLabelTooltip
       label="Fields as Columns"
-      active={fieldsAsColumns}
-      onChange={() => setFieldsAsColumns(current => !current)}
-      tooltipContents={FIELDS_AS_COLUMNS_TOOLTIP}
+      active={!!selection?.resultOptions?.fieldsAsColumn}
+      onChange={handleToggle}
+      tooltipContents={
+        <>
+          <code>schema.fieldsAsCols()</code> is a special application of{' '}
+          <code>pivot()</code> that pivots input data on <code>_field</code> and{' '}
+          <code>_time</code> columns to align fields within each input table
+          that have the same timestamp.
+        </>
+      }
     />
   )
 }