only run sample query when visible (#1499)

Improves the Chart Explorer page to only run the sample query when the accordion is open and visible. Also changed default to closed since it's below the fold.

@pulpdrew assigned to you as you originally observed this issue

Demo:
https://github.com/user-attachments/assets/6108323a-767f-4e9f-88cf-4b9e2de9def1

Fixes HDX-2895

Author: brandon-pereira

.changeset/silver-mugs-obey.md

@@ -0,0 +1,5 @@
+---
+"@hyperdx/app": patch
+---
+
+Performance Improvement to only run sample query when the table is visible

packages/app/src/components/DBEditTimeChartForm.tsx

@@ -475,6 +475,8 @@ export default function EditTimeChartForm({
     name: 'series',
   });
 
+  const [isSampleEventsOpen, setIsSampleEventsOpen] = useState(false);
+
   const select = watch('select');
   const sourceId = watch('source');
   const whereLanguage = watch('whereLanguage');
@@ -1234,7 +1236,10 @@ export default function EditTimeChartForm({
         <>
           <Divider mt="md" />
           {showSampleEvents && (
-            <Accordion defaultValue="sample">
+            <Accordion
+              value={isSampleEventsOpen ? 'sample' : null}
+              onChange={value => setIsSampleEventsOpen(value === 'sample')}
+            >
               <Accordion.Item value="sample">
                 <Accordion.Control icon={<IconList size={16} />}>
                   <Text size="sm" style={{ alignSelf: 'center' }}>
@@ -1250,7 +1255,7 @@ export default function EditTimeChartForm({
                       <DBSqlRowTableWithSideBar
                         sourceId={sourceId}
                         config={sampleEventsConfig}
-                        enabled
+                        enabled={isSampleEventsOpen}
                         isLive={false}
                         queryKeyPrefix={'search'}
                       />