use Histogram button for toggling event chart

studio/components/interfaces/Settings/Logs/LogTable.tsx

@@ -1,6 +1,6 @@
 import dayjs from 'dayjs'
 import { useEffect, useState, useMemo } from 'react'
-import { Button, IconDownloadCloud, IconEye, Typography } from '@supabase/ui'
+import { Button, IconDownloadCloud, IconEye, IconEyeOff, Typography } from '@supabase/ui'
 import DataGrid from '@supabase/react-data-grid'
 
 import LogSelection from './LogSelection'
@@ -14,6 +14,8 @@ import DatabasePostgresColumnRender from './LogColumnRenderers/DatabasePostgresC
 interface Props {
   data?: Array<LogData | Object>
   queryType?: QueryType
+  onHistogramToggle?: () => void
+  isHistogramShowing?: boolean
 }
 type LogMap = { [id: string]: LogData }
 
@@ -22,7 +24,7 @@ type LogMap = { [id: string]: LogData }
  *
  * When in custom data display mode, the side panel will not open when focusing on logs.
  */
-const LogTable = ({ data = [], queryType }: Props) => {
+const LogTable = ({ data = [], queryType, onHistogramToggle, isHistogramShowing }: Props) => {
   const [focusedLog, setFocusedLog] = useState<LogData | null>(null)
   const columnNames = Object.keys(data[0] || {})
   const hasId = columnNames.includes('id')
@@ -210,9 +212,15 @@ const LogTable = ({ data = [], queryType }: Props) => {
                 )}
               </div>
               <div className="flex items-center gap-2">
-                <Button type="default" icon={<IconEye />}>
-                  Histogram
-                </Button>
+                {onHistogramToggle && (
+                  <Button
+                    type="default"
+                    icon={isHistogramShowing ? <IconEye /> : <IconEyeOff />}
+                    onClick={onHistogramToggle}
+                  >
+                    Histogram
+                  </Button>
+                )}
                 <Button type="default" icon={<IconDownloadCloud />}>
                   Download
                 </Button>

studio/components/interfaces/Settings/Logs/LogsNavigation.tsx

@@ -14,9 +14,9 @@ const LogsNavigation = () => {
       type="underlined"
       size="medium"
       activeId={!activeRoute ? indexRoute : activeRoute}
-      onChange={(e: string) =>
+      onClick={(e: string) => {
         router.push(`/project/${ref}/logs-explorer/${e === indexRoute ? '' : e}`)
-      }
+      }}
     >
       <Tabs.Panel id="query" label="Query" />
       <Tabs.Panel id="sources" label="Sources" />

studio/components/interfaces/Settings/Logs/LogsPreviewer.tsx

@@ -134,8 +134,6 @@ export const LogsPreviewer: React.FC<Props> = ({ projectRef, queryType, override
   return (
     <div className="h-full flex flex-col flex-grow">
       <PreviewFilterPanel
-        isShowingEventChart={showChart}
-        onToggleEventChart={() => setShowChart(!showChart)}
         isLoading={isLoading}
         newCount={newCount}
         templates={TEMPLATES.filter(
@@ -183,7 +181,12 @@ export const LogsPreviewer: React.FC<Props> = ({ projectRef, queryType, override
       <div className="flex flex-col flex-grow relative pt-4">
         <ShimmerLine active={isLoading} />
         <LoadingOpacity active={isLoading}>
-          <LogTable data={logData} queryType={queryType} />
+          <LogTable
+            data={logData}
+            queryType={queryType}
+            isHistogramShowing={showChart}
+            onHistogramToggle={() => setShowChart(!showChart)}
+          />
         </LoadingOpacity>
         <div className="p-2">
           <Button onClick={() => loadOlder()} icon={<IconRewind />} type="default">

studio/components/interfaces/Settings/Logs/PreviewFilterPanel.tsx

@@ -6,8 +6,6 @@ import {
   IconRefreshCw,
   IconSearch,
   IconExternalLink,
-  IconEye,
-  IconEyeOff,
 } from '@supabase/ui'
 import { LogSearchCallback, LogTemplate } from '.'
 import dayjs from 'dayjs'
@@ -27,8 +25,6 @@ interface Props {
   onSearch?: LogSearchCallback
   onExploreClick?: () => void
   onSelectTemplate: (template: LogTemplate) => void
-  isShowingEventChart: boolean
-  onToggleEventChart: () => void
   dispatchWhereFilters: (x: any) => void
   whereFilters: any
   table: LogsTableName
@@ -52,8 +48,6 @@ const PreviewFilterPanel: FC<Props> = ({
   dispatchWhereFilters,
   whereFilters: filters,
   table,
-  isShowingEventChart,
-  onToggleEventChart,
   condensedLayout,
 }) => {
   const [search, setSearch] = useState('')
@@ -195,15 +189,6 @@ const PreviewFilterPanel: FC<Props> = ({
               />
             ))}
         </div>
-        <div className="flex items-center space-x-2">
-          <Button
-            type="default"
-            onClick={() => onToggleEventChart()}
-            icon={isShowingEventChart ? <IconEye /> : <IconEyeOff />}
-          >
-            Event chart
-          </Button>
-        </div>
       </div>
       <Button type="secondary" onClick={onExploreClick} iconRight={<IconExternalLink size={10} />}>
         Explore via query

studio/tests/pages/projects/LogTable.test.js

@@ -1,5 +1,5 @@
 import LogTable from 'components/interfaces/Settings/Logs/LogTable'
-import { render,  waitFor, screen } from '@testing-library/react'
+import { render, waitFor, screen } from '@testing-library/react'
 import userEvent from '@testing-library/user-event'
 test('can display log data', async () => {
   render(
@@ -55,3 +55,11 @@ test('can display custom columns and headers based on data input', async () => {
   await waitFor(() => screen.getByText(/kinda/))
   await waitFor(() => screen.getByText(/123456/))
 })
+
+test('toggle histogram', async () => {
+  const mockFn = jest.fn()
+  render(<LogTable onHistogramToggle={mockFn} isHistogramShowing={true} />)
+  const toggle = await screen.getByText(/Histogram/)
+  userEvent.click(toggle)
+  expect(mockFn).toBeCalled()
+})

studio/tests/pages/projects/LogsPreviewer.test.js

@@ -257,7 +257,7 @@ test('bug: load older btn does not error out when previous page is empty', async
 test('log event chart hide', async () => {
   render(<LogsPreviewer projectRef="123" tableName={LogsTableName.EDGE} />)
   await screen.findByText('Events')
-  const toggle = await screen.findByText(/Event chart/)
+  const toggle = await screen.findByText(/Histogram/)
   userEvent.click(toggle)
   await expect(screen.findByText('Events')).rejects.toThrow()
 })

studio/tests/pages/projects/PreviewFilterPanel.test.js

@@ -27,17 +27,6 @@ test.todo('templates')
 //   // expect(mockFn).toBeCalled()
 // })
 
-test('toggle event chart', async () => {
-  const mockFn = jest.fn()
-  const { rerender } = render(
-    <PreviewFilterPanel onToggleEventChart={mockFn} isShowingEventChart={true} />
-  )
-  const toggle = await screen.getByText(/Event chart/)
-  userEvent.click(toggle)
-  expect(mockFn).toBeCalled()
-  rerender(<PreviewFilterPanel isShowingEventChart={false} />)
-})
-
 test('filter input change and submit', async () => {
   const mockFn = jest.fn()
   render(<PreviewFilterPanel onSearch={mockFn} />)