fix: dashboard improvements and query speed improvements

apps/start/src/components/overview/overview-top-devices.tsx

@@ -1,11 +1,9 @@
 import { useEventQueryFilters } from '@/hooks/use-event-query-filters';
-import { cn } from '@/utils/cn';
-import { useState } from 'react';
+import { useMemo, useState } from 'react';
 
 import { NOT_SET_VALUE } from '@openpanel/constants';
 import type { IChartType } from '@openpanel/validation';
 
-import { useNumber } from '@/hooks/use-numer-formatter';
 import { useTRPC } from '@/integrations/trpc/react';
 import { pushModal } from '@/modals';
 import { useQuery } from '@tanstack/react-query';
@@ -13,7 +11,12 @@ import { SerieIcon } from '../report-chart/common/serie-icon';
 import { Widget, WidgetBody } from '../widget';
 import { OVERVIEW_COLUMNS_NAME } from './overview-constants';
 import OverviewDetailsButton from './overview-details-button';
-import { WidgetButtons, WidgetFooter, WidgetHead } from './overview-widget';
+import {
+  OverviewLineChart,
+  OverviewLineChartLoading,
+} from './overview-line-chart';
+import { OverviewViewToggle, useOverviewView } from './overview-view-toggle';
+import { WidgetFooter, WidgetHeadSearchable } from './overview-widget';
 import {
   OverviewWidgetTableGeneric,
   OverviewWidgetTableLoading,
@@ -31,6 +34,7 @@ export default function OverviewTopDevices({
     useOverviewOptions();
   const [filters, setFilter] = useEventQueryFilters();
   const [chartType] = useState<IChartType>('bar');
+  const [searchQuery, setSearchQuery] = useState('');
   const isPageFilter = filters.find((filter) => filter.name === 'path');
   const [widget, setWidget, widgets] = useOverviewWidget('tech', {
     device: {
@@ -316,6 +320,7 @@ export default function OverviewTopDevices({
   });
 
   const trpc = useTRPC();
+  const [view] = useOverviewView();
 
   const query = useQuery(
     trpc.overview.topGeneric.queryOptions({
@@ -328,31 +333,67 @@ export default function OverviewTopDevices({
     }),
   );
 
+  const seriesQuery = useQuery(
+    trpc.overview.topGenericSeries.queryOptions(
+      {
+        projectId,
+        range,
+        filters,
+        column: widget.key,
+        startDate,
+        endDate,
+        interval,
+      },
+      {
+        enabled: view === 'chart',
+      },
+    ),
+  );
+
+  const filteredData = useMemo(() => {
+    const data = (query.data ?? []).slice(0, 15);
+    if (!searchQuery.trim()) {
+      return data;
+    }
+    const queryLower = searchQuery.toLowerCase();
+    return data.filter((item) => item.name?.toLowerCase().includes(queryLower));
+  }, [query.data, searchQuery]);
+
+  const tabs = widgets.map((w) => ({
+    key: w.key,
+    label: w.btn,
+  }));
+
   return (
     <>
       <Widget className="col-span-6 md:col-span-3">
-        <WidgetHead>
-          <div className="title">{widget.title}</div>
-
-          <WidgetButtons>
-            {widgets.map((w) => (
-              <button
-                type="button"
-                key={w.key}
-                onClick={() => setWidget(w.key)}
-                className={cn(w.key === widget.key && 'active')}
-              >
-                {w.btn}
-              </button>
-            ))}
-          </WidgetButtons>
-        </WidgetHead>
+        <WidgetHeadSearchable
+          tabs={tabs}
+          activeTab={widget.key}
+          onTabChange={setWidget}
+          searchValue={searchQuery}
+          onSearchChange={setSearchQuery}
+          searchPlaceholder={`Search ${widget.btn.toLowerCase()}`}
+          className="border-b-0 pb-2"
+        />
         <WidgetBody className="p-0">
-          {query.isLoading ? (
+          {view === 'chart' ? (
+            seriesQuery.isLoading ? (
+              <OverviewLineChartLoading />
+            ) : seriesQuery.data ? (
+              <OverviewLineChart
+                data={seriesQuery.data}
+                interval={interval}
+                searchQuery={searchQuery}
+              />
+            ) : (
+              <OverviewLineChartLoading />
+            )
+          ) : query.isLoading ? (
             <OverviewWidgetTableLoading />
           ) : (
             <OverviewWidgetTableGeneric
-              data={query.data ?? []}
+              data={filteredData}
               column={{
                 name: OVERVIEW_COLUMNS_NAME[widget.key],
                 render(item) {
@@ -384,7 +425,8 @@ export default function OverviewTopDevices({
               })
             }
           />
-          {/* <OverviewChartToggle {...{ chartType, setChartType }} /> */}
+          <div className="flex-1" />
+          <OverviewViewToggle />
         </WidgetFooter>
       </Widget>
     </>