astro-tractstack 2.0.1 → 2.0.3

package/templates/src/components/codehooks/EpinetTableView.tsx

@@ -72,6 +72,24 @@ const EpinetTableView = ({
   const getContentInfo = (
     contentId: string
   ): { title: string; type: string } => {
+    if (contentId === 'commitmentAction-Previously-Entered') {
+      return { title: 'Previously Entered', type: 'Virtual' };
+    }
+    if (contentId === 'identifyAs-Anonymous-Traffic') {
+      return { title: 'Anonymous Traffic', type: 'Virtual' };
+    }
+
+    const mainParts = contentId.split('_');
+    if (mainParts[0] === 'identifyAs' && mainParts.length >= 3) {
+      const beliefSlug = mainParts[1];
+      const value = mainParts[2].replace(/-/g, ' ');
+      const titleCaseSlug = beliefSlug.replace(/([A-Z])/g, ' $1').trim();
+      return {
+        title: `${titleCaseSlug} - ${value}`,
+        type: 'Persona',
+      };
+    }
+
     const content = fullContentMap.find((item) => item.id === contentId);
     if (content) {
       return {
@@ -79,8 +97,9 @@ const EpinetTableView = ({
         type: content.type,
       };
     }
+
     return {
-      title: contentId.substring(0, 8) + '...',
+      title: '[deleted content]',
       type: 'Unknown',
     };
   };
@@ -100,11 +119,9 @@ const EpinetTableView = ({
       return getHumanReadableTime(startHour);
     }
     const startTime = getHumanReadableTime(startHour);
-    // If end hour is 23 (11pm), show "end of day"
     if (endHour === 23) {
       return `${startTime} - end of day`;
     }
-    // Show endHour:59 format
     if (endHour === 0) {
       return `${startTime} - 12:59am`;
     } else if (endHour < 12) {
@@ -116,7 +133,6 @@ const EpinetTableView = ({
     }
   };
 
-  // Parse UTC hourKey and convert to local timezone for display
   const getLocalDisplayTime = (
     hourKey: string
   ): {
@@ -128,24 +144,20 @@ const EpinetTableView = ({
     try {
       const [year, month, day, hour] = hourKey.split('-').map(Number);
       const utcDate = new Date(Date.UTC(year, month - 1, day, hour));
-
-      // Convert UTC to local timezone for display
       const localDate = new Date(utcDate.toLocaleString());
-
       const localDay = `${localDate.getFullYear()}-${String(
         localDate.getMonth() + 1
       ).padStart(2, '0')}-${String(localDate.getDate()).padStart(2, '0')}`;
-
       const localHour = localDate.getHours();
       const localHourDisplay = `${localHour.toString().padStart(2, '0')}:00`;
       const humanReadableTime = getHumanReadableTime(localHour);
-
       return { localDay, localHour, localHourDisplay, humanReadableTime };
     } catch (e) {
       console.warn(`Failed to parse hourKey: ${hourKey}`, e);
-      // Fallback to treating as already local
       const [year, month, day] = hourKey.split('-').slice(0, 3).map(Number);
-      const localDay = `${year}-${String(month).padStart(2, '0')}-${String(day).padStart(2, '0')}`;
+      const localDay = `${year}-${String(month).padStart(2, '0')}-${String(
+        day
+      ).padStart(2, '0')}`;
       const localHour = Number(hourKey.split('-')[3]) || 0;
       const localHourDisplay = `${localHour.toString().padStart(2, '0')}:00`;
       const humanReadableTime = getHumanReadableTime(localHour);
@@ -153,19 +165,15 @@ const EpinetTableView = ({
     }
   };
 
-  // Convert hourKey (UTC) to exact UTC time range for focusing
   const focusOnThisHour = (hourKey: string) => {
     try {
       const [year, month, day, hour] = hourKey.split('-').map(Number);
-
-      // Create exact UTC hour boundaries
       const startTimeUTC = new Date(
         Date.UTC(year, month - 1, day, hour, 0, 0, 0)
       );
       const endTimeUTC = new Date(
         Date.UTC(year, month - 1, day, hour, 59, 59, 999)
       );
-
       epinetCustomFilters.set(window.TRACTSTACK_CONFIG?.tenantId || 'default', {
         ...$epinetCustomFilters,
         startTimeUTC: startTimeUTC.toISOString(),
@@ -173,7 +181,6 @@ const EpinetTableView = ({
       });
     } catch (e) {
       console.warn(`Failed to focus on hour: ${hourKey}`, e);
-      // Fallback - do nothing rather than use legacy system
     }
   };
 
@@ -224,12 +231,11 @@ const EpinetTableView = ({
     let maxHourlyTotal = 0;
 
     const dailyUniqueVisitors = new Set<string>();
-
-    // Get current local time for "future" detection
     const now = new Date();
-    const today = `${now.getFullYear()}-${String(now.getMonth() + 1).padStart(2, '0')}-${String(
-      now.getDate()
-    ).padStart(2, '0')}`;
+    const today = `${now.getFullYear()}-${String(now.getMonth() + 1).padStart(
+      2,
+      '0'
+    )}-${String(now.getDate()).padStart(2, '0')}`;
     const isToday = currentDay === today;
     const currentLocalHour = now.getHours();
 
@@ -306,7 +312,11 @@ const EpinetTableView = ({
             display:
               emptyRangeStart === localEmptyEnd
                 ? `${emptyRangeStart.toString().padStart(2, '0')}:00`
-                : `${emptyRangeStart.toString().padStart(2, '0')}:00 - ${localEmptyEnd.toString().padStart(2, '0')}:59`,
+                : `${emptyRangeStart
+                    .toString()
+                    .padStart(2, '0')}:00 - ${localEmptyEnd
+                    .toString()
+                    .padStart(2, '0')}:59`,
             humanReadableDisplay: getHumanReadableTimeRange(
               emptyRangeStart,
               localEmptyEnd
@@ -351,7 +361,9 @@ const EpinetTableView = ({
         display:
           emptyRangeStart === localEmptyEnd
             ? `${emptyRangeStart.toString().padStart(2, '0')}:00`
-            : `${emptyRangeStart.toString().padStart(2, '0')}:00 - ${localEmptyEnd.toString().padStart(2, '0')}:59`,
+            : `${emptyRangeStart.toString().padStart(2, '0')}:00 - ${localEmptyEnd
+                .toString()
+                .padStart(2, '0')}:59`,
         humanReadableDisplay: getHumanReadableTimeRange(
           emptyRangeStart,
           localEmptyEnd
@@ -480,69 +492,82 @@ const EpinetTableView = ({
               value={item.type === 'active' ? item.hourKey : `empty-${index}`}
               className="border-b border-gray-100 last:border-b-0"
             >
-              <Accordion.ItemTrigger className="flex w-full items-center justify-between p-3 text-left transition-colors duration-200 hover:bg-gray-50">
+              <Accordion.ItemTrigger className="flex w-full cursor-pointer items-center justify-between p-3 text-left transition-colors duration-200 hover:bg-gray-100">
                 {item.type === 'active' ? (
-                  <div className="flex flex-grow items-center space-x-3">
-                    <span className="text-sm font-bold text-gray-700">
-                      {item.humanReadableTime}
-                    </span>
-                    <span className="text-xs text-gray-600">
-                      {item.hourlyTotal} event
-                      {item.hourlyTotal !== 1 ? 's' : ''} /{' '}
-                      {item.hourlyVisitors} visitor
-                      {item.hourlyVisitors !== 1 ? 's' : ''}
-                    </span>
-                    <div className="relative h-2 w-full max-w-48 rounded bg-gray-200">
-                      <div
-                        className="absolute left-0 top-0 h-2 rounded bg-cyan-600"
-                        style={{
-                          width: `${Math.max(item.relativeToMax * 100, 5)}%`,
-                        }}
-                        title={`${item.hourlyTotal} events (${(item.relativeToMax * 100).toFixed(1)}% of busiest hour)`}
-                      />
+                  <div className="flex flex-grow items-center justify-between space-x-3">
+                    <div className="flex flex-grow items-center space-x-3">
+                      <span className="text-sm font-bold text-gray-700">
+                        {item.humanReadableTime}
+                      </span>
+                      <span className="text-xs text-gray-600">
+                        {item.hourlyTotal} event
+                        {item.hourlyTotal !== 1 ? 's' : ''} /{' '}
+                        {item.hourlyVisitors} visitor
+                        {item.hourlyVisitors !== 1 ? 's' : ''}
+                      </span>
+                      <div className="relative h-2 w-full max-w-48 rounded bg-gray-200">
+                        <div
+                          className="absolute left-0 top-0 h-2 rounded bg-cyan-600"
+                          style={{
+                            width: `${Math.max(item.relativeToMax * 100, 5)}%`,
+                          }}
+                          title={`${item.hourlyTotal} events (${(
+                            item.relativeToMax * 100
+                          ).toFixed(1)}% of busiest hour)`}
+                        />
+                      </div>
                     </div>
-                    <div
-                      onClick={(e) => {
-                        e.stopPropagation(); // Prevent accordion toggle
-                        focusOnThisHour(item.hourKey);
-                      }}
-                      className="flex cursor-pointer items-center rounded-md bg-orange-100 px-2 py-1 text-xs font-bold text-orange-800 transition-colors duration-200 hover:bg-orange-200"
-                      title="Focus analytics dashboard on this hour's user journeys"
-                      role="button"
-                      tabIndex={0}
-                      onKeyDown={(e) => {
-                        if (e.key === 'Enter' || e.key === ' ') {
-                          e.preventDefault();
+                    <div className="flex items-center space-x-2">
+                      <div
+                        onClick={(e) => {
                           e.stopPropagation();
                           focusOnThisHour(item.hourKey);
-                        }
-                      }}
-                    >
-                      <MagnifyingGlassIcon className="mr-1 h-3 w-3" />
-                      Journeys this Hour
+                        }}
+                        className="flex cursor-pointer items-center rounded-md bg-orange-100 px-2 py-1 text-xs font-bold text-orange-800 transition-colors duration-200 hover:bg-orange-200"
+                        role="button"
+                        tabIndex={0}
+                        onKeyDown={(e) => {
+                          if (e.key === 'Enter' || e.key === ' ') {
+                            e.preventDefault();
+                            e.stopPropagation();
+                            focusOnThisHour(item.hourKey);
+                          }
+                        }}
+                      >
+                        <MagnifyingGlassIcon className="mr-1 h-3 w-3" />
+                        Journeys this Hour
+                      </div>
+                      <div className="flex items-center rounded-md bg-orange-100 px-2 py-1 text-xs font-bold text-orange-800">
+                        <Accordion.ItemIndicator>
+                          <ChevronDownIcon className="h-3 w-3 transition-transform duration-200 data-[state=open]:rotate-180" />
+                        </Accordion.ItemIndicator>
+                        <span className="ml-1 data-[state=closed]:block data-[state=open]:hidden">
+                          Expand Details
+                        </span>
+                        <span className="ml-1 data-[state=open]:block data-[state=closed]:hidden">
+                          Hide Details
+                        </span>
+                      </div>
                     </div>
                   </div>
                 ) : (
-                  <div className="flex flex-grow items-center">
-                    <span className="text-sm text-gray-700">
-                      {item.humanReadableDisplay}
-                    </span>
-                    <span className="ml-2 text-xs italic text-gray-500">
-                      {item.isFuture ? 'The future awaits!' : 'No activity'}
-                    </span>
+                  <div className="flex flex-grow items-center justify-between">
+                    <div className="flex items-center">
+                      <span className="text-sm text-gray-700">
+                        {item.humanReadableDisplay}
+                      </span>
+                      <span className="ml-2 text-xs italic text-gray-500">
+                        {item.isFuture ? 'The future awaits!' : 'No activity'}
+                      </span>
+                    </div>
+                    <Accordion.ItemIndicator>
+                      <ChevronDownIcon className="h-5 w-5 text-gray-500 transition-transform duration-200 data-[state=open]:rotate-180" />
+                    </Accordion.ItemIndicator>
                   </div>
                 )}
-                <Accordion.ItemIndicator>
-                  <ChevronDownIcon
-                    className={classNames(
-                      'h-5 w-5 text-gray-500 transition-transform duration-200',
-                      'data-[state=open]:rotate-180'
-                    )}
-                  />
-                </Accordion.ItemIndicator>
               </Accordion.ItemTrigger>
 
-              <Accordion.ItemContent className="pt-2">
+              <Accordion.ItemContent className="p-4">
                 {item.type === 'active' && (
                   <div className="space-y-4">
                     {item.contentItems.map((content) => (

package/templates/src/components/codehooks/EpinetWrapper.tsx

@@ -6,7 +6,7 @@ import {
   type ReactNode,
 } from 'react';
 import { useStore } from '@nanostores/react';
-import { epinetCustomFilters } from '@/stores/analytics';
+import { epinetCustomFilters, type AppliedFilter } from '@/stores/analytics';
 import { TractStackAPI } from '@/utils/api';
 import SankeyDiagram from './SankeyDiagram';
 import EpinetDurationSelector from './EpinetDurationSelector';
@@ -34,7 +34,6 @@ const EpinetWrapper = ({
 }: {
   fullContentMap: FullContentMapItem[];
 }) => {
-  // Use the global store instead of local state
   const $epinetCustomFilters = useStore(epinetCustomFilters);
 
   const [analytics, setAnalytics] = useState<{
@@ -54,15 +53,13 @@ const EpinetWrapper = ({
   const [epinetId, setEpinetId] = useState<string | null>(null);
 
   const MAX_POLLING_ATTEMPTS = 3;
-  const POLLING_DELAYS = [2000, 5000, 10000]; // 2s, 5s, 10s
+  const POLLING_DELAYS = [2000, 5000, 10000];
 
-  // Initialize TractStackAPI
   const api = useMemo(
     () => new TractStackAPI(window.TRACTSTACK_CONFIG?.tenantId || 'default'),
     []
   );
 
-  // Clear polling timer on unmount
   useEffect(() => {
     return () => {
       if (pollingTimer) {
@@ -74,43 +71,32 @@ const EpinetWrapper = ({
   useEffect(() => {
     const discoverEpinetId = async () => {
       try {
-        // First, try to find a promoted epinet from content map
         const promotedEpinet = fullContentMap.find(
           (item) => item.type === 'Epinet' && item.promoted
         );
-
         if (promotedEpinet) {
           setEpinetId(promotedEpinet.id);
           return;
         }
-
-        // If no promoted epinet, get first epinet from content map
         const firstEpinet = fullContentMap.find(
           (item) => item.type === 'Epinet'
         );
-
         if (firstEpinet) {
           setEpinetId(firstEpinet.id);
           return;
         }
-
-        // Fallback: no epinet found
-        console.warn('No epinet found in content map');
         setEpinetId(null);
       } catch (error) {
         console.error('Error discovering epinet ID:', error);
         setEpinetId(null);
       }
     };
-
     discoverEpinetId();
   }, [fullContentMap]);
 
-  // Initialize epinet custom filters with default values on mount
   useEffect(() => {
     const nowUTC = new Date();
     const oneWeekAgoUTC = new Date(nowUTC.getTime() - 7 * 24 * 60 * 60 * 1000);
-
     epinetCustomFilters.set(window.TRACTSTACK_CONFIG?.tenantId || 'default', {
       enabled: true,
       visitorType: 'all',
@@ -119,40 +105,11 @@ const EpinetWrapper = ({
       endTimeUTC: nowUTC.toISOString(),
       userCounts: [],
       hourlyNodeActivity: {},
+      availableFilters: [],
+      appliedFilters: [],
     });
   }, []);
 
-  // Detect current duration type from epinetCustomFilters (for UI helpers only)
-  //const currentDurationHelper = useMemo(():
-  //  | 'daily'
-  //  | 'weekly'
-  //  | 'monthly'
-  //  | 'custom' => {
-  //  const { startTimeUTC, endTimeUTC } = $epinetCustomFilters;
-
-  //  if (startTimeUTC && endTimeUTC) {
-  //    const startTime = new Date(startTimeUTC);
-  //    const endTime = new Date(endTimeUTC);
-  //    const diffMs = endTime.getTime() - startTime.getTime();
-  //    const diffHours = diffMs / (1000 * 60 * 60);
-
-  //    if (Math.abs(diffHours - 24) <= 1) return 'daily';
-  //    if (Math.abs(diffHours - 168) <= 1) return 'weekly';
-  //    if (Math.abs(diffHours - 672) <= 1) return 'monthly';
-  //    return 'custom';
-  //  }
-
-  //  return 'weekly'; // default
-  //}, [$epinetCustomFilters.startTimeUTC, $epinetCustomFilters.endTimeUTC]);
-
-  // Fetch data when epinet ID is available
-  useEffect(() => {
-    if (epinetId) {
-      fetchEpinetData();
-    }
-  }, [epinetId]);
-
-  // Watch for changes in the global filters and refetch data
   useEffect(() => {
     if (
       epinetId &&
@@ -171,43 +128,44 @@ const EpinetWrapper = ({
     $epinetCustomFilters.selectedUserId,
     $epinetCustomFilters.startTimeUTC,
     $epinetCustomFilters.endTimeUTC,
+    $epinetCustomFilters.appliedFilters,
   ]);
 
-  // Handle filter preset changes
-  //const handleFilterChange = useCallback(
-  //  (newValue: string) => {
-  //    const nowUTC = new Date();
-  //    const hoursBack: number =
-  //      newValue === 'daily' ? 24 : newValue === 'weekly' ? 168 : 672;
-  //    const startTimeUTC = new Date(
-  //      nowUTC.getTime() - hoursBack * 60 * 60 * 1000
-  //    );
+  const handleBeliefFilterChange = (beliefSlug: string, value: string) => {
+    const tenantId = window.TRACTSTACK_CONFIG?.tenantId || 'default';
+    const currentFilters = epinetCustomFilters.get();
+    let newFilters: AppliedFilter[] = [
+      ...(currentFilters.appliedFilters || []),
+    ];
+
+    if (value === 'All') {
+      newFilters = newFilters.filter((f) => f.beliefSlug !== beliefSlug);
+    } else {
+      const existingIndex = newFilters.findIndex(
+        (f) => f.beliefSlug === beliefSlug
+      );
+      if (existingIndex > -1) {
+        newFilters[existingIndex] = { beliefSlug, value };
+      } else {
+        newFilters.push({ beliefSlug, value });
+      }
+    }
 
-  //    epinetCustomFilters.set(window.TRACTSTACK_CONFIG?.tenantId || 'default', {
-  //      ...$epinetCustomFilters,
-  //      enabled: true,
-  //      startTimeUTC: startTimeUTC.toISOString(),
-  //      endTimeUTC: nowUTC.toISOString(),
-  //    });
-  //  },
-  //  [$epinetCustomFilters]
-  //);
+    epinetCustomFilters.set(tenantId, {
+      ...currentFilters,
+      appliedFilters: newFilters,
+    });
+  };
 
   const fetchEpinetData = useCallback(async () => {
     if (!epinetId) return;
-
     try {
-      setAnalytics((prev) => ({ ...prev, isLoading: true }));
-
+      setAnalytics((prev) => ({ ...prev, isLoading: true, status: 'loading' }));
       if (pollingTimer) {
         clearTimeout(pollingTimer);
         setPollingTimer(null);
       }
-
-      // Build query parameters
       const params = new URLSearchParams();
-
-      // Convert UTC timestamps to hours-back integers (what backend expects)
       if (
         $epinetCustomFilters.startTimeUTC &&
         $epinetCustomFilters.endTimeUTC
@@ -215,76 +173,71 @@ const EpinetWrapper = ({
         const now = new Date();
         const startTime = new Date($epinetCustomFilters.startTimeUTC);
         const endTime = new Date($epinetCustomFilters.endTimeUTC);
-
         const startHour = Math.ceil(
           (now.getTime() - startTime.getTime()) / (1000 * 60 * 60)
         );
         const endHour = Math.floor(
           (now.getTime() - endTime.getTime()) / (1000 * 60 * 60)
         );
-
         params.append('startHour', startHour.toString());
         params.append('endHour', endHour.toString());
       }
-
       params.append('visitorType', $epinetCustomFilters.visitorType || 'all');
       if ($epinetCustomFilters.selectedUserId) {
         params.append('userId', $epinetCustomFilters.selectedUserId);
       }
 
-      // Use TractStackAPI instead of raw fetch
+      // MODIFICATION: Properly format appliedFilters for the backend
+      if (
+        $epinetCustomFilters.appliedFilters &&
+        $epinetCustomFilters.appliedFilters.length > 0
+      ) {
+        params.append(
+          'appliedFilters',
+          JSON.stringify($epinetCustomFilters.appliedFilters)
+        );
+      }
+
       const response = await api.get(
         `/api/v1/analytics/epinet/${epinetId}?${params.toString()}`
       );
-
-      if (!response.success) {
+      if (!response.success)
         throw new Error(`API request failed: ${response.error}`);
-      }
-
       const result = response.data;
-
       if (result.success !== false) {
-        // Check if data is still loading
         const epinetData = result.epinet;
-
         if (
           epinetData &&
           (epinetData.status === 'loading' ||
             epinetData.status === 'refreshing')
         ) {
-          // If data is still loading, poll again after delay
           if (pollingAttempts < MAX_POLLING_ATTEMPTS) {
             const delayMs =
               POLLING_DELAYS[pollingAttempts] ||
               POLLING_DELAYS[POLLING_DELAYS.length - 1];
-
             const newTimer = setTimeout(() => {
               setPollingAttempts(pollingAttempts + 1);
               fetchEpinetData();
             }, delayMs);
-
             setPollingTimer(newTimer);
             return;
           }
         }
-
-        setAnalytics((prev) => ({
-          ...prev,
+        setAnalytics({
           epinet: result.epinet,
           status: 'complete',
           error: null,
-        }));
-
-        // Update the global store with additional data from API response
+          isLoading: false,
+        });
         epinetCustomFilters.set(
           window.TRACTSTACK_CONFIG?.tenantId || 'default',
           {
             ...$epinetCustomFilters,
             userCounts: result.userCounts || [],
             hourlyNodeActivity: result.hourlyNodeActivity || {},
+            availableFilters: result?.availableFilters || [],
           }
         );
-
         setPollingAttempts(0);
       } else {
         throw new Error(result.error || 'Unknown API error');
@@ -295,18 +248,14 @@ const EpinetWrapper = ({
         error: error instanceof Error ? error.message : 'Unknown error',
         status: 'error',
       }));
-
-      // Schedule a retry if we haven't reached max attempts
       if (pollingAttempts < MAX_POLLING_ATTEMPTS) {
         const delayMs =
           POLLING_DELAYS[pollingAttempts] ||
           POLLING_DELAYS[POLLING_DELAYS.length - 1];
-
         const newTimer = setTimeout(() => {
           setPollingAttempts(pollingAttempts + 1);
           fetchEpinetData();
         }, delayMs);
-
         setPollingTimer(newTimer);
       }
     } finally {
@@ -316,7 +265,6 @@ const EpinetWrapper = ({
 
   const { epinet, isLoading, status, error } = analytics;
 
-  // Show loading while discovering epinet ID
   if (!epinetId) {
     return (
       <div className="flex h-96 w-full items-center justify-center rounded bg-gray-100">
@@ -330,18 +278,13 @@ const EpinetWrapper = ({
     );
   }
 
-  if (
-    !epinet ||
-    !epinet.nodes ||
-    !epinet.links ||
-    epinet.nodes.length === 0 ||
-    epinet.links.length === 0
-  )
+  if ((isLoading || status === 'loading') && !epinet) {
     return (
       <div className="flex h-64 items-center justify-center">
         <div className="h-8 w-8 animate-spin rounded-full border-b-2 border-cyan-600"></div>
       </div>
     );
+  }
 
   if (error && !epinet) {
     return (
@@ -368,13 +311,27 @@ const EpinetWrapper = ({
     epinet.nodes.length === 0 ||
     epinet.links.length === 0
   ) {
+    if (isLoading || status === 'loading') {
+      return (
+        <div className="flex h-64 items-center justify-center">
+          <div className="h-8 w-8 animate-spin rounded-full border-b-2 border-cyan-600"></div>
+        </div>
+      );
+    }
     return (
-      <div className="rounded-lg bg-gray-50 p-8 text-center text-gray-800">
-        <p>
-          No user journey data is available yet. This visualization will appear
-          when users start interacting with your content.
-        </p>
-      </div>
+      <>
+        <div className="rounded-lg bg-gray-50 p-8 text-center text-gray-800">
+          <p>No user journey data is available for the selected filters.</p>
+        </div>
+        <EpinetDurationSelector
+          fullContentMap={fullContentMap}
+          isLoading={isLoading || status === 'loading'}
+          hourlyNodeActivity={$epinetCustomFilters.hourlyNodeActivity}
+          availableFilters={$epinetCustomFilters.availableFilters}
+          appliedFilters={$epinetCustomFilters.appliedFilters}
+          onBeliefFilterChange={handleBeliefFilterChange}
+        />
+      </>
     );
   }
 
@@ -396,7 +353,7 @@ const EpinetWrapper = ({
         }
       >
         <div className="space-y-6">
-          <div className="rounded-lg bg-white p-6 shadow">
+          <div className="rounded-lg bg-white p-2 shadow md:p-6">
             <div className="mb-4 flex items-center justify-between">
               {(isLoading || status === 'loading') && (
                 <div className="flex items-center space-x-2 text-sm text-gray-500">
@@ -410,11 +367,13 @@ const EpinetWrapper = ({
               isLoading={isLoading || status === 'loading'}
             />
           </div>
-
           <EpinetDurationSelector
             fullContentMap={fullContentMap}
             isLoading={isLoading || status === 'loading'}
             hourlyNodeActivity={$epinetCustomFilters.hourlyNodeActivity}
+            availableFilters={$epinetCustomFilters.availableFilters}
+            appliedFilters={$epinetCustomFilters.appliedFilters}
+            onBeliefFilterChange={handleBeliefFilterChange}
           />
         </div>
       </ErrorBoundary>