astro-tractstack 2.0.1 → 2.0.3

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

@@ -2,8 +2,9 @@ import { useEffect, useRef, useState } from 'react';
 import * as d3 from 'd3';
 import { sankey, sankeyLinkHorizontal } from 'd3-sankey';
 
-const MAX_HEIGHT = 1200;
-const COMPRESSED_HEIGHT = 384; // Fixed height for compressed view
+const MAX_HEIGHT = 1600;
+const COMPRESSED_HEIGHT = 256;
+const MIN_DIAGRAM_WIDTH = 800; // Define a minimum width for the diagram
 
 const colors = [
   '#ef4444',
@@ -52,7 +53,7 @@ const SankeyDiagram = ({ data, isLoading = false }: SankeyDiagramProps) => {
   const containerRef = useRef<HTMLDivElement | null>(null);
   const hasScrolledRef = useRef(false);
   const [dimensions, setDimensions] = useState({
-    width: 800,
+    width: MIN_DIAGRAM_WIDTH,
     height: 500,
   });
   const [isExpanded, setIsExpanded] = useState(false);
@@ -60,7 +61,11 @@ const SankeyDiagram = ({ data, isLoading = false }: SankeyDiagramProps) => {
   useEffect(() => {
     const updateDimensions = () => {
       if (containerRef.current) {
-        const containerWidth = containerRef.current.offsetWidth;
+        // Ensure the diagram width is the larger of the container or our defined minimum
+        const containerWidth = Math.max(
+          MIN_DIAGRAM_WIDTH,
+          containerRef.current.offsetWidth
+        );
         const nodeCount = data.nodes.length || 1;
         const optimalHeight = nodeCount * (40 + 10) + 50;
         const finalHeight = Math.min(MAX_HEIGHT, optimalHeight);
@@ -245,7 +250,6 @@ const SankeyDiagram = ({ data, isLoading = false }: SankeyDiagramProps) => {
 
   return (
     <div ref={containerRef} className="relative w-full">
-      {/* Expand/Compress Controls */}
       <div className="mb-3 flex items-center justify-between">
         <div className="text-sm text-gray-600">
           {data.nodes.length} nodes • {data.links.length} connections
@@ -292,23 +296,21 @@ const SankeyDiagram = ({ data, isLoading = false }: SankeyDiagramProps) => {
         </button>
       </div>
 
-      {/* Compression Warning */}
       {needsCompression && (
         <div className="mb-2 rounded bg-amber-50 px-3 py-2 text-sm text-amber-800">
           <strong>Compressed view</strong> - click anywhere to expand!
         </div>
       )}
 
-      {/* SVG Container - Clickable when compressed */}
       <div
-        className={`transition-all duration-300 ${
+        className={`overflow-x-auto transition-all duration-300 md:overflow-visible ${
           needsCompression
             ? 'cursor-pointer hover:bg-gray-50 hover:shadow-md'
             : ''
         }`}
         style={{
           height: `${displayHeight}px`,
-          overflow: 'hidden',
+          overflowY: 'hidden',
         }}
         onClick={needsCompression ? handleExpand : undefined}
         role={needsCompression ? 'button' : undefined}
@@ -333,7 +335,7 @@ const SankeyDiagram = ({ data, isLoading = false }: SankeyDiagramProps) => {
           height={dimensions.height}
           style={{
             display: 'block',
-            width: '100%',
+            minWidth: `${dimensions.width}px`, // Ensure SVG itself doesn't shrink
             height: `${dimensions.height}px`,
             transform: needsCompression
               ? `scaleY(${displayHeight / dimensions.height})`
@@ -345,6 +347,10 @@ const SankeyDiagram = ({ data, isLoading = false }: SankeyDiagramProps) => {
         ></svg>
       </div>
 
+      <div className="mt-2 text-center text-xs text-gray-500 md:hidden">
+        &larr; Scroll to see full journey map &rarr;
+      </div>
+
       {isLoading && (
         <div className="absolute inset-0 flex items-center justify-center rounded bg-black bg-opacity-80">
           <div className="flex items-center space-x-2 text-white">

package/templates/src/components/storykeep/Dashboard_Analytics.tsx

@@ -1,4 +1,4 @@
-import { useState, useEffect, useCallback, useMemo, Component } from 'react';
+import { useState, useCallback, useMemo, Component } from 'react';
 import type { ReactNode } from 'react';
 import { useStore } from '@nanostores/react';
 import { epinetCustomFilters } from '@/stores/analytics';
@@ -104,6 +104,30 @@ export default function StoryKeepDashboard_Analytics({
     error: null,
   });
 
+  const handleBeliefFilterChange = (beliefSlug: string, value: string) => {
+    const tenantId = window.TRACTSTACK_CONFIG?.tenantId || 'default';
+    const currentFilters = epinetCustomFilters.get();
+    let newFilters = [...(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(tenantId, {
+      ...currentFilters,
+      appliedFilters: newFilters,
+    });
+  };
+
   // Duration helper for UI
   const currentDurationHelper = useMemo(():
     | 'daily'
@@ -440,6 +464,10 @@ export default function StoryKeepDashboard_Analytics({
                     analytics.isLoading || analytics.status === 'loading'
                   }
                   hourlyNodeActivity={analytics.hourlyNodeActivity}
+                  // MODIFICATION: Read availableFilters from the store, not local state
+                  availableFilters={$epinetCustomFilters.availableFilters}
+                  appliedFilters={$epinetCustomFilters.appliedFilters}
+                  onBeliefFilterChange={handleBeliefFilterChange}
                 />
               </div>
             </ErrorBoundary>
@@ -455,6 +483,10 @@ export default function StoryKeepDashboard_Analytics({
                   analytics.isLoading || analytics.status === 'loading'
                 }
                 hourlyNodeActivity={analytics.hourlyNodeActivity}
+                // MODIFICATION: Read availableFilters from the store, not local state
+                availableFilters={$epinetCustomFilters.availableFilters}
+                appliedFilters={$epinetCustomFilters.appliedFilters}
+                onBeliefFilterChange={handleBeliefFilterChange}
               />
             </>
           )
@@ -468,6 +500,10 @@ export default function StoryKeepDashboard_Analytics({
               fullContentMap={fullContentMap}
               isLoading={analytics.isLoading || analytics.status === 'loading'}
               hourlyNodeActivity={analytics.hourlyNodeActivity}
+              // MODIFICATION: Read availableFilters from the store, not local state
+              availableFilters={$epinetCustomFilters.availableFilters}
+              appliedFilters={$epinetCustomFilters.appliedFilters}
+              onBeliefFilterChange={handleBeliefFilterChange}
             />
           </>
         )}

package/templates/src/components/storykeep/controls/content/KnownResourceForm.tsx

@@ -39,36 +39,25 @@ const FIELD_TYPES = [
   { value: 'image', label: 'Image' },
 ];
 
-const KnownResourceForm = ({
+const KnownResourceFormRenderer = ({
   categorySlug,
   contentMap,
   onClose,
-}: KnownResourceFormProps) => {
+  brandConfig,
+}: KnownResourceFormProps & { brandConfig: BrandConfig }) => {
   const [newFieldName, setNewFieldName] = useState('');
   const [showAddField, setShowAddField] = useState(false);
-  const [brandConfig, setBrandConfig] = useState<BrandConfig | null>(null);
-  const [loading, setLoading] = useState(false);
-
-  useEffect(() => {
-    if (!brandConfig && !loading) {
-      setLoading(true);
-      getBrandConfig(window.TRACTSTACK_CONFIG?.tenantId || 'default')
-        .then(setBrandConfig)
-        .catch(console.error)
-        .finally(() => setLoading(false));
-    }
-  }, [brandConfig, loading]);
 
-  const knownResources = brandConfig?.KNOWN_RESOURCES || {};
   const isCreate = categorySlug === 'new';
-  const currentCategory = isCreate ? {} : knownResources[categorySlug] || {};
+  const knownResources = brandConfig.KNOWN_RESOURCES || {};
+  const currentCategory = isCreate ? {} : knownResources[categorySlug];
 
   const hasExistingResources =
     !isCreate && contentMap.some((item) => item.categorySlug === categorySlug);
 
   const initialState: KnownResourceState = {
     categorySlug: isCreate ? '' : categorySlug,
-    fields: isCreate ? {} : currentCategory,
+    fields: currentCategory,
   };
 
   const validator = (state: KnownResourceState): FieldErrors => {
@@ -90,8 +79,6 @@ const KnownResourceForm = ({
     validator,
     onSave: async (data) => {
       try {
-        // Update known resources in brand config
-        if (!brandConfig) throw new Error('Brand config not loaded');
         const brandState = convertToLocalState(brandConfig);
         const updatedKnownResources = {
           ...brandState.knownResources,
@@ -108,7 +95,6 @@ const KnownResourceForm = ({
           updatedBrandState
         );
 
-        // Call success callback after save (original pattern)
         setTimeout(() => {
           onClose?.(true);
         }, 1000);
@@ -179,7 +165,6 @@ const KnownResourceForm = ({
 
   return (
     <div className="space-y-8">
-      {/* Header */}
       <div className="border-b border-gray-200 pb-4">
         <h2 className="text-2xl font-bold text-gray-900">
           {isCreate ? 'Create Resource Category' : `Edit ${categorySlug}`}
@@ -200,7 +185,6 @@ const KnownResourceForm = ({
       </div>
 
       <div className="space-y-6">
-        {/* Category Name */}
         <StringInput
           label="Category Name"
           value={formState.state.categorySlug}
@@ -214,7 +198,6 @@ const KnownResourceForm = ({
           Must be lowercase with hyphens. Cannot be changed after creation.
         </p>
 
-        {/* Fields Section */}
         <div className="space-y-6">
           <div className="flex items-center justify-between">
             <h3 className="text-lg font-bold text-gray-900">Fields</h3>
@@ -228,7 +211,6 @@ const KnownResourceForm = ({
             </button>
           </div>
 
-          {/* Add Field Form */}
           {showAddField && (
             <div className="rounded-lg border border-gray-200 bg-gray-50 p-4">
               <h4 className="mb-3 text-sm font-bold text-gray-900">
@@ -264,7 +246,6 @@ const KnownResourceForm = ({
             </div>
           )}
 
-          {/* Existing Fields */}
           {Object.keys(formState.state.fields).length === 0 ? (
             <div className="py-6 text-center text-gray-500">
               No fields defined yet. Click "Add Field" to create your first
@@ -275,7 +256,6 @@ const KnownResourceForm = ({
               {Object.entries(formState.state.fields).map(
                 ([fieldName, fieldDef]) => {
                   const locked = isFieldLocked(fieldName);
-
                   return (
                     <div
                       key={fieldName}
@@ -304,7 +284,6 @@ const KnownResourceForm = ({
                           </button>
                         )}
                       </div>
-
                       <div className="grid grid-cols-1 gap-4 md:grid-cols-3">
                         <EnumSelect
                           label="Type"
@@ -315,7 +294,6 @@ const KnownResourceForm = ({
                           options={FIELD_TYPES}
                           disabled={locked}
                         />
-
                         <BooleanToggle
                           label="Optional"
                           value={fieldDef.optional || false}
@@ -324,7 +302,6 @@ const KnownResourceForm = ({
                           }
                           disabled={locked}
                         />
-
                         {fieldDef.type === 'categoryReference' && (
                           <EnumSelect
                             label="Reference Category"
@@ -341,7 +318,6 @@ const KnownResourceForm = ({
                             disabled={locked}
                           />
                         )}
-
                         {fieldDef.type === 'number' && (
                           <>
                             <NumberInput
@@ -372,7 +348,6 @@ const KnownResourceForm = ({
         </div>
       </div>
 
-      {/* Save/Cancel Bar */}
       <UnsavedChangesBar
         formState={formState}
         message="You have unsaved resource category changes"
@@ -380,7 +355,6 @@ const KnownResourceForm = ({
         cancelLabel="Discard Changes"
       />
 
-      {/* Cancel Navigation Button */}
       <div className="flex justify-start">
         <button
           type="button"
@@ -394,4 +368,60 @@ const KnownResourceForm = ({
   );
 };
 
+const KnownResourceForm = ({
+  categorySlug,
+  contentMap,
+  onClose,
+}: KnownResourceFormProps) => {
+  const [brandConfig, setBrandConfig] = useState<BrandConfig | null>(null);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+
+  useEffect(() => {
+    getBrandConfig(window.TRACTSTACK_CONFIG?.tenantId || 'default')
+      .then(setBrandConfig)
+      .catch((err) => {
+        console.error('Failed to load brand configuration:', err);
+        setError(
+          'Could not load resource category configuration. Please try again.'
+        );
+      })
+      .finally(() => setLoading(false));
+  }, []);
+
+  if (loading) {
+    return (
+      <div className="py-12 text-center text-gray-500">
+        Loading configuration...
+      </div>
+    );
+  }
+
+  if (error) {
+    return (
+      <div className="rounded-md bg-red-50 p-4 text-center text-red-700">
+        {error}
+      </div>
+    );
+  }
+
+  const isCreate = categorySlug === 'new';
+  if (!isCreate && !(brandConfig?.KNOWN_RESOURCES || {})[categorySlug]) {
+    return (
+      <div className="py-12 text-center text-gray-500">
+        Resource category "{categorySlug}" not found.
+      </div>
+    );
+  }
+
+  return (
+    <KnownResourceFormRenderer
+      categorySlug={categorySlug}
+      contentMap={contentMap}
+      onClose={onClose}
+      brandConfig={brandConfig!}
+    />
+  );
+};
+
 export default KnownResourceForm;

package/templates/src/components/storykeep/state/FetchAnalytics.tsx

@@ -20,13 +20,12 @@ interface FetchAnalyticsProps {
   onAnalyticsUpdate: (analytics: AnalyticsState) => void;
 }
 
-// Global singleton state to prevent multi-component conflicts
 class AnalyticsService {
   private static instance: AnalyticsService;
   private isInitialized = false;
   private activeRequest: AbortController | null = null;
   private requestCache = new Map<string, { data: any; timestamp: number }>();
-  private readonly CACHE_TTL = 5000; // 5 seconds
+  private readonly CACHE_TTL = 5000;
   private readonly DEBOUNCE_MS = 300;
   private debounceTimer: NodeJS.Timeout | null = null;
   private floodProtection = {
@@ -34,7 +33,7 @@ class AnalyticsService {
     windowStart: 0,
     isBlocked: false,
   };
-  private readonly FLOOD_WINDOW_MS = 10000; // 10 seconds
+  private readonly FLOOD_WINDOW_MS = 10000;
   private readonly FLOOD_THRESHOLD = 5;
 
   static getInstance(): AnalyticsService {
@@ -51,35 +50,25 @@ class AnalyticsService {
 
   private isFloodBlocked(): boolean {
     const now = Date.now();
-
-    // Reset window if needed
     if (now - this.floodProtection.windowStart > this.FLOOD_WINDOW_MS) {
       this.floodProtection.requestCount = 0;
       this.floodProtection.windowStart = now;
       this.floodProtection.isBlocked = false;
     }
-
-    // Check if blocked
     if (this.floodProtection.isBlocked) {
       if (VERBOSE) console.log('🚫 Request blocked by flood protection');
       return true;
     }
-
-    // Increment counter and check threshold
     this.floodProtection.requestCount++;
     if (this.floodProtection.requestCount > this.FLOOD_THRESHOLD) {
       this.floodProtection.isBlocked = true;
       if (VERBOSE) console.log('🚨 Flood protection activated');
-
-      // Auto-unblock after delay
       setTimeout(() => {
         this.floodProtection.isBlocked = false;
         if (VERBOSE) console.log('✅ Flood protection deactivated');
-      }, 30000); // 30 second cooldown
-
+      }, 30000);
       return true;
     }
-
     return false;
   }
 
@@ -94,8 +83,6 @@ class AnalyticsService {
 
   private setCachedResponse(cacheKey: string, data: any): void {
     this.requestCache.set(cacheKey, { data, timestamp: Date.now() });
-
-    // Cleanup old cache entries
     const cutoff = Date.now() - this.CACHE_TTL;
     for (const [key, value] of this.requestCache.entries()) {
       if (value.timestamp < cutoff) {
@@ -108,35 +95,29 @@ class AnalyticsService {
     filters: any,
     onUpdate: (data: AnalyticsState) => void
   ): Promise<void> {
-    // Flood protection
     if (this.isFloodBlocked()) {
       return;
     }
 
     try {
-      // Cancel any existing request
       if (this.activeRequest) {
         this.activeRequest.abort();
         if (VERBOSE) console.log('🛑 Cancelled previous request');
       }
 
-      // Create new abort controller
       this.activeRequest = new AbortController();
 
-      // Build URL parameters
       const params = new URLSearchParams();
       if (filters.startTimeUTC && filters.endTimeUTC) {
         const now = new Date();
         const startTime = new Date(filters.startTimeUTC);
         const endTime = new Date(filters.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());
       }
@@ -146,16 +127,18 @@ class AnalyticsService {
       if (filters.selectedUserId)
         params.append('userId', filters.selectedUserId);
 
-      const cacheKey = this.getCacheKey(params);
+      // MODIFICATION: Properly format appliedFilters for the backend
+      if (filters.appliedFilters && filters.appliedFilters.length > 0) {
+        params.append('appliedFilters', JSON.stringify(filters.appliedFilters));
+      }
 
-      // Check cache first
+      const cacheKey = this.getCacheKey(params);
       const cachedData = this.getCachedResponse(cacheKey);
       if (cachedData) {
         onUpdate(cachedData);
         return;
       }
 
-      // Set loading state
       onUpdate({
         dashboard: null,
         leads: null,
@@ -167,23 +150,17 @@ class AnalyticsService {
         error: null,
       });
 
-      // Make request using existing TractStackAPI
       const api = new TractStackAPI(
         window.TRACTSTACK_CONFIG?.tenantId || 'default'
       );
       const endpoint = `/api/v1/analytics/all${params.toString() ? `?${params.toString()}` : ''}`;
-
       if (VERBOSE) console.log('🔥 Making API request', { endpoint });
 
       const response = await api.get(endpoint);
-
-      if (!response.success) {
+      if (!response.success)
         throw new Error(response.error || 'Failed to fetch analytics data');
-      }
-
       const data = response.data;
 
-      // Check if data is still loading - implement polling logic
       const isStillLoading =
         data?.status === 'loading' ||
         data?.status === 'refreshing' ||
@@ -196,8 +173,6 @@ class AnalyticsService {
 
       if (isStillLoading) {
         if (VERBOSE) console.log('⏳ Backend data still loading, will poll...');
-
-        // Update with partial data but keep loading state
         const partialAnalytics = {
           dashboard: data.dashboard,
           leads: data.leads,
@@ -208,27 +183,20 @@ class AnalyticsService {
           error: null,
           isLoading: true,
         };
-
         onUpdate(partialAnalytics);
 
-        // Schedule polling retry - use the cache key to prevent multiple polls
         const pollKey = `poll_${cacheKey}`;
         if (!this.requestCache.has(pollKey)) {
           this.requestCache.set(pollKey, { data: null, timestamp: Date.now() });
-
           setTimeout(() => {
             this.requestCache.delete(pollKey);
-            // Clear the main cache entry to force fresh request
             this.requestCache.delete(cacheKey);
-            // Retry the fetch
             this.fetchAnalytics(filters, onUpdate);
           }, 2000);
         }
-
         return;
       }
 
-      // Process successful response
       const analyticsData = {
         dashboard: data.dashboard,
         leads: data.leads,
@@ -240,23 +208,23 @@ class AnalyticsService {
         isLoading: false,
       };
 
-      // Cache the response
       this.setCachedResponse(cacheKey, analyticsData);
-
-      // Update caller
       onUpdate(analyticsData);
 
-      if (VERBOSE) console.log('✅ Analytics request completed successfully');
+      // MODIFICATION: Correctly extract top-level availableFilters and update the store
+      epinetCustomFilters.set(window.TRACTSTACK_CONFIG?.tenantId || 'default', {
+        ...filters,
+        availableFilters: data.availableFilters || [],
+      });
 
+      if (VERBOSE) console.log('✅ Analytics request completed successfully');
       this.activeRequest = null;
     } catch (error) {
       if (error instanceof Error && error.name === 'AbortError') {
         if (VERBOSE) console.log('🔄 Request aborted');
         return;
       }
-
       console.error('❌ Analytics fetch error:', error);
-
       onUpdate({
         dashboard: null,
         leads: null,
@@ -268,7 +236,6 @@ class AnalyticsService {
           error instanceof Error ? error.message : 'Unknown error occurred',
         isLoading: false,
       });
-
       this.activeRequest = null;
     }
   }
@@ -286,13 +253,9 @@ class AnalyticsService {
 
   initializeFilters(tenantId: string): void {
     if (this.isInitialized) return;
-
     if (VERBOSE) console.log('🏁 Initializing analytics filters');
-
     const nowUTC = new Date();
     const oneWeekAgoUTC = new Date(nowUTC.getTime() - 7 * 24 * 60 * 60 * 1000);
-
-    // Only set if not already initialized to prevent store churn
     const current = epinetCustomFilters.get();
     if (!current.enabled) {
       epinetCustomFilters.set(tenantId, {
@@ -301,19 +264,15 @@ class AnalyticsService {
         selectedUserId: null,
         startTimeUTC: oneWeekAgoUTC.toISOString(),
         endTimeUTC: nowUTC.toISOString(),
+        availableFilters: [],
+        appliedFilters: [],
       });
     }
-
     this.isInitialized = true;
   }
 
   debouncedFetch(filters: any, onUpdate: (data: AnalyticsState) => void): void {
-    // Clear existing debounce timer
-    if (this.debounceTimer) {
-      clearTimeout(this.debounceTimer);
-    }
-
-    // Set new debounced fetch
+    if (this.debounceTimer) clearTimeout(this.debounceTimer);
     this.debounceTimer = setTimeout(() => {
       this.fetchAnalytics(filters, onUpdate);
     }, this.DEBOUNCE_MS);
@@ -329,29 +288,21 @@ export default function FetchAnalytics({
 
   if (VERBOSE) {
     console.log('🔄 FetchAnalytics render', {
-      filters: {
-        startTimeUTC: $epinetCustomFilters.startTimeUTC,
-        endTimeUTC: $epinetCustomFilters.endTimeUTC,
-        visitorType: $epinetCustomFilters.visitorType,
-        selectedUserId: $epinetCustomFilters.selectedUserId,
-      },
+      filters: { ...$epinetCustomFilters },
     });
   }
 
-  // Cleanup on unmount
   useEffect(() => {
     return () => {
       analyticsService.current.cleanup();
     };
   }, []);
 
-  // Initialize filters once
   useEffect(() => {
     const tenantId = window.TRACTSTACK_CONFIG?.tenantId || 'default';
     analyticsService.current.initializeFilters(tenantId);
   }, []);
 
-  // Debounced fetch when filters change
   useEffect(() => {
     if (
       !$epinetCustomFilters.enabled ||
@@ -362,15 +313,14 @@ export default function FetchAnalytics({
       return;
     }
 
-    // Create stable filter signature to prevent unnecessary fetches
     const filtersSignature = JSON.stringify({
       startTimeUTC: $epinetCustomFilters.startTimeUTC,
       endTimeUTC: $epinetCustomFilters.endTimeUTC,
       visitorType: $epinetCustomFilters.visitorType,
       selectedUserId: $epinetCustomFilters.selectedUserId,
+      appliedFilters: $epinetCustomFilters.appliedFilters,
     });
 
-    // Skip if filters haven't actually changed
     if (filtersSignature === lastFiltersRef.current) {
       return;
     }
@@ -389,6 +339,7 @@ export default function FetchAnalytics({
     $epinetCustomFilters.selectedUserId,
     $epinetCustomFilters.startTimeUTC,
     $epinetCustomFilters.endTimeUTC,
+    $epinetCustomFilters.appliedFilters,
     onAnalyticsUpdate,
   ]);