feat: Add filter for root spans

.changeset/silent-ducks-crash.md

@@ -0,0 +1,5 @@
+---
+"@hyperdx/app": patch
+---
+
+feat: Add filter for root spans

packages/app/src/components/DBSearchPageFilters.tsx

@@ -13,7 +13,10 @@ import {
   tcFromChartConfig,
   tcFromSource,
 } from '@hyperdx/common-utils/dist/core/metadata';
-import { ChartConfigWithDateRange } from '@hyperdx/common-utils/dist/types';
+import {
+  ChartConfigWithDateRange,
+  SourceKind,
+} from '@hyperdx/common-utils/dist/types';
 import {
   Accordion,
   ActionIcon,
@@ -186,7 +189,7 @@ export const FilterCheckbox = ({
               flex={1}
               title={label}
             >
-              {label}
+              {label || <span className="fst-italic">(empty)</span>}
             </Text>
             {percentage != null && (
               <FilterPercentage
@@ -907,6 +910,30 @@ const DBSearchPageFiltersComponent = ({
     [filterState],
   );
 
+  const setRootSpansOnly = useCallback(
+    (rootSpansOnly: boolean) => {
+      if (!source?.parentSpanIdExpression) return;
+
+      if (rootSpansOnly) {
+        setFilterValue(source.parentSpanIdExpression, '', 'only');
+      } else {
+        clearFilter(source.parentSpanIdExpression);
+      }
+    },
+    [setFilterValue, clearFilter, source],
+  );
+
+  const isRootSpansOnly = useMemo(() => {
+    if (!source?.parentSpanIdExpression || source.kind !== SourceKind.Trace)
+      return false;
+
+    const parentSpanIdFilter = filterState?.[source?.parentSpanIdExpression];
+    return (
+      parentSpanIdFilter?.included.size === 1 &&
+      parentSpanIdFilter?.included.has('')
+    );
+  }, [filterState, source]);
+
   return (
     <Box className={classes.filtersPanel} style={{ width: `${size}%` }}>
       <div className={resizeStyles.resizeHandle} onMouseDown={startResize} />
@@ -996,6 +1023,29 @@ const DBSearchPageFiltersComponent = ({
             />
           )}
 
+          {source?.kind === SourceKind.Trace &&
+            source.parentSpanIdExpression && (
+              <Checkbox
+                size={13 as any}
+                checked={isRootSpansOnly}
+                ms="6px"
+                label={
+                  <Tooltip
+                    openDelay={200}
+                    color="gray"
+                    position="right"
+                    withArrow
+                    label="Only show root spans (spans with no parent span)."
+                  >
+                    <Text size="xs" c="gray.3" mt="-1px">
+                      <i className="bi bi-diagram-3"></i> Root Spans Only
+                    </Text>
+                  </Tooltip>
+                }
+                onChange={event => setRootSpansOnly(event.target.checked)}
+              />
+            )}
+
           {isLoading || isFacetsLoading ? (
             <Flex align="center" justify="center">
               <Loader size="xs" color="gray" />