@burdenoff/microfe-bigconsole 2026.805.2 → 2026.805.3

package/dist/bigconsole/components/widgets/DrilldownConfigPanel.js.map

@@ -1 +1 @@
-{"version":3,"file":"DrilldownConfigPanel.js","names":[],"sources":["../../../../src/bigconsole/components/widgets/DrilldownConfigPanel.tsx"],"sourcesContent":["/**\n * DrilldownConfigPanel Component\n *\n * UI for configuring widget drilldown settings.\n * Allows selecting target dashboard, navigation mode, and parameter mappings.\n *\n * v2.0 Features:\n * - passGlobalFilters: Pass current dashboard filters to target\n * - maxDepth: Limit drilldown depth (default: 3)\n * - openIn: Open in same tab or new tab\n * - Field suggestions based on widget data\n */\n\nimport { type FC, memo, useState, useEffect, useCallback, useMemo } from 'react';\nimport { useApolloClient } from '@apollo/client/react';\nimport type { Widget, NavigationMode } from '../../types';\nimport { ListDashboardsDocument } from '../../../generated/wspace-operations';\nimport { DEFAULT_MAX_DEPTH } from '../../hooks/useDrilldown';\n\n// ============================================================================\n// Types\n// ============================================================================\n\nexport interface DrilldownConfigPanelProps {\n  /** Widget to configure drilldown for */\n  widget: Widget;\n  /** Callback when drilldown settings change (for tracking unsaved changes) */\n  onChange?: (config: DrilldownConfig) => void;\n  /** Sample widget data for field suggestions */\n  widgetData?: Record<string, unknown>;\n}\n\nexport interface DrilldownConfig {\n  enabled: boolean;\n  targetDashboardId: string;\n  navigationMode: NavigationMode;\n  parameterMapping: Record<string, string>;\n  /** Whether to pass global filters to target dashboard */\n  passGlobalFilters: boolean;\n  /** Maximum drilldown depth (default: 3) */\n  maxDepth: number;\n  /** Open in same tab or new tab (for SAME_WINDOW mode) */\n  openIn: 'same' | 'new';\n}\n\ninterface DashboardOption {\n  id: string;\n  name: string;\n}\n\ninterface ParameterMapping {\n  key: string;\n  value: string;\n}\n\n// ============================================================================\n// Helper Functions\n// ============================================================================\n\n/**\n * Extract available fields from widget data for field suggestions\n */\nfunction extractFieldPaths(obj: unknown, prefix = ''): string[] {\n  if (!obj || typeof obj !== 'object') return [];\n\n  const paths: string[] = [];\n\n  // Handle arrays - use first element as template\n  if (Array.isArray(obj)) {\n    if (obj.length > 0 && typeof obj[0] === 'object') {\n      return extractFieldPaths(obj[0], prefix);\n    }\n    return [];\n  }\n\n  // Handle objects\n  for (const [key, value] of Object.entries(obj as Record<string, unknown>)) {\n    const path = prefix ? `${prefix}.${key}` : key;\n    paths.push(path);\n\n    // Recurse into nested objects (but not too deep)\n    if (value && typeof value === 'object' && !Array.isArray(value) && prefix.split('.').length < 2) {\n      paths.push(...extractFieldPaths(value, path));\n    }\n  }\n\n  return paths;\n}\n\n// ============================================================================\n// Component\n// ============================================================================\n\nexport const DrilldownConfigPanel: FC<DrilldownConfigPanelProps> = memo(function DrilldownConfigPanel({\n  widget,\n  onChange,\n  widgetData,\n}) {\n  const apolloClient = useApolloClient();\n\n  // State\n  const [enabled, setEnabled] = useState(widget.drilldown?.enabled ?? false);\n  const [targetDashboardId, setTargetDashboardId] = useState(widget.drilldown?.targetDashboardId ?? '');\n  const [navigationMode, setNavigationMode] = useState<NavigationMode>(widget.drilldown?.navigationMode ?? 'MODAL');\n  const [passGlobalFilters, setPassGlobalFilters] = useState(widget.drilldown?.passGlobalFilters ?? true);\n  const [maxDepth, setMaxDepth] = useState(widget.drilldown?.maxDepth ?? DEFAULT_MAX_DEPTH);\n  const [openIn, setOpenIn] = useState<'same' | 'new'>(widget.drilldown?.openIn ?? 'same');\n  const [parameterMappings, setParameterMappings] = useState<ParameterMapping[]>(() => {\n    const mapping = widget.drilldown?.parameterMapping as Record<string, string> | undefined;\n    if (mapping) {\n      return Object.entries(mapping).map(([key, value]) => ({ key, value }));\n    }\n    return [{ key: '', value: '' }];\n  });\n\n  const [dashboards, setDashboards] = useState<DashboardOption[]>([]);\n  const [loading, setLoading] = useState(false);\n  const [showFieldSuggestions, setShowFieldSuggestions] = useState<number | null>(null);\n\n  // Extract available field paths from widget data\n  const availableFields = useMemo(() => {\n    if (!widgetData) return [];\n\n    // Common prefixes for different widget types\n    const prefixes = ['row', 'item', 'point', 'selectedData'];\n    const fields = extractFieldPaths(widgetData);\n\n    // Generate mustache-style suggestions\n    const suggestions: string[] = [];\n    for (const field of fields) {\n      for (const prefix of prefixes) {\n        suggestions.push(`{{${prefix}.${field}}}`);\n      }\n    }\n\n    // Add common widget data fields\n    suggestions.push('{{widget.value}}', '{{widget.title}}', '{{widget.id}}');\n    suggestions.push('{{globals.vars.dateFrom}}', '{{globals.vars.dateTo}}');\n\n    return [...new Set(suggestions)];\n  }, [widgetData]);\n\n  // Notify parent of changes\n  const notifyChange = useCallback(() => {\n    const parameterMapping: Record<string, string> = {};\n    for (const { key, value } of parameterMappings) {\n      if (key.trim() && value.trim()) {\n        parameterMapping[key.trim()] = value.trim();\n      }\n    }\n    onChange?.({\n      enabled,\n      targetDashboardId,\n      navigationMode,\n      parameterMapping,\n      passGlobalFilters,\n      maxDepth,\n      openIn,\n    });\n  }, [enabled, targetDashboardId, navigationMode, parameterMappings, passGlobalFilters, maxDepth, openIn, onChange]);\n\n  // Call notifyChange when any value changes\n  useEffect(() => {\n    notifyChange();\n  }, [\n    enabled,\n    targetDashboardId,\n    navigationMode,\n    parameterMappings,\n    passGlobalFilters,\n    maxDepth,\n    openIn,\n    notifyChange,\n  ]);\n\n  // Fetch available dashboards\n  useEffect(() => {\n    async function fetchDashboards() {\n      setLoading(true);\n      try {\n        const result = await apolloClient.query<{ listDashboards: { edges: Record<string, unknown>[] } }>({\n          query: ListDashboardsDocument,\n          variables: { first: 100 },\n          fetchPolicy: 'cache-first',\n        });\n\n        const edges = result.data?.listDashboards?.edges || [];\n        setDashboards(\n          edges.map((edge: Record<string, unknown>) => {\n            const node = edge.node as Record<string, unknown>;\n            return {\n              id: node.id as string,\n              name: node.name as string,\n            };\n          })\n        );\n      } catch (err) {\n      } finally {\n        setLoading(false);\n      }\n    }\n\n    fetchDashboards();\n  }, [apolloClient]);\n\n  // Add parameter mapping row\n  const addParameterMapping = useCallback(() => {\n    setParameterMappings((prev) => [...prev, { key: '', value: '' }]);\n  }, []);\n\n  // Remove parameter mapping row\n  const removeParameterMapping = useCallback((index: number) => {\n    setParameterMappings((prev) => prev.filter((_, i) => i !== index));\n  }, []);\n\n  // Update parameter mapping\n  const updateParameterMapping = useCallback((index: number, field: 'key' | 'value', newValue: string) => {\n    setParameterMappings((prev) => prev.map((item, i) => (i === index ? { ...item, [field]: newValue } : item)));\n  }, []);\n\n  return (\n    <div className=\"space-y-4 pb-8\">\n      {/* Enable Toggle */}\n      <div className=\"flex items-center justify-between p-3 rounded-lg border border-border-default bg-bg-surface\">\n        <label className=\"text-sm font-medium text-text-primary\">Enable Drilldown</label>\n        <button\n          type=\"button\"\n          role=\"switch\"\n          aria-checked={enabled}\n          onClick={() => setEnabled(!enabled)}\n          className={`\n              relative inline-flex h-6 w-11 items-center rounded-full transition-colors cursor-pointer border\n              ${enabled ? 'bg-action-primary-bg border-action-primary-bg' : 'bg-gray-300 border-gray-400'}\n            `}\n        >\n          <span\n            className={`\n                inline-block h-4 w-4 transform rounded-full bg-white shadow transition-transform\n                ${enabled ? 'translate-x-6' : 'translate-x-1'}\n              `}\n          />\n        </button>\n      </div>\n\n      {enabled && (\n        <>\n          {/* Target Dashboard */}\n          <div>\n            <label className=\"block text-sm font-medium text-text-primary mb-1\">Target Dashboard</label>\n            <select\n              value={targetDashboardId}\n              onChange={(e) => setTargetDashboardId(e.target.value)}\n              disabled={loading}\n              className=\"w-full px-3 py-2 rounded-md border border-border-default bg-bg-surface text-text-primary text-sm focus:outline-none focus:ring-2 focus:ring-action-primary-bg\"\n            >\n              <option value=\"\">Select a dashboard...</option>\n              {dashboards\n                .filter((d) => d.id !== widget.dashboardId) // Exclude current dashboard\n                .map((dashboard) => (\n                  <option key={dashboard.id} value={dashboard.id}>\n                    {dashboard.name}\n                  </option>\n                ))}\n            </select>\n          </div>\n\n          {/* Navigation Mode */}\n          <div>\n            <label className=\"block text-sm font-medium text-text-primary mb-1\">Navigation Mode</label>\n            <div className=\"flex gap-2\">\n              {(['MODAL', 'NEW_TAB', 'SAME_WINDOW'] as NavigationMode[]).map((mode) => (\n                <button\n                  key={mode}\n                  type=\"button\"\n                  onClick={() => setNavigationMode(mode)}\n                  className={`\n                      flex-1 px-3 py-2 rounded-md text-sm font-medium transition-colors\n                      ${\n                        navigationMode === mode\n                          ? 'bg-action-primary-bg text-white'\n                          : 'bg-bg-sunken text-text-secondary hover:bg-bg-sunken/80'\n                      }\n                    `}\n                >\n                  {mode === 'MODAL' && 'Modal'}\n                  {mode === 'NEW_TAB' && 'New Tab'}\n                  {mode === 'SAME_WINDOW' && 'Same Window'}\n                </button>\n              ))}\n            </div>\n            <p className=\"text-xs text-text-tertiary mt-1\">\n              {navigationMode === 'MODAL' && 'Opens target dashboard in a modal overlay'}\n              {navigationMode === 'NEW_TAB' && 'Opens target dashboard in a new browser tab'}\n              {navigationMode === 'SAME_WINDOW' && 'Navigates to target dashboard in current window'}\n            </p>\n          </div>\n\n          {/* Parameter Mappings */}\n          <div>\n            <div className=\"flex items-center justify-between mb-2\">\n              <label className=\"text-sm font-medium text-text-primary\">Parameter Mappings</label>\n              <button\n                type=\"button\"\n                onClick={addParameterMapping}\n                className=\"text-xs text-action-primary-text hover:underline\"\n              >\n                + Add Parameter\n              </button>\n            </div>\n\n            <div className=\"space-y-2\">\n              {parameterMappings.map((mapping, index) => (\n                <div key={index} className=\"relative\">\n                  <div className=\"flex gap-2 items-center\">\n                    <input\n                      type=\"text\"\n                      value={mapping.key}\n                      onChange={(e) => updateParameterMapping(index, 'key', e.target.value)}\n                      placeholder=\"Parameter name\"\n                      className=\"flex-1 px-2 py-1.5 rounded border border-border-default bg-bg-surface text-text-primary text-sm focus:outline-none focus:ring-1 focus:ring-action-primary-bg\"\n                    />\n                    <span className=\"text-text-tertiary\">=</span>\n                    <div className=\"flex-1 relative\">\n                      <input\n                        type=\"text\"\n                        value={mapping.value}\n                        onChange={(e) => updateParameterMapping(index, 'value', e.target.value)}\n                        onFocus={() => setShowFieldSuggestions(index)}\n                        onBlur={() => setTimeout(() => setShowFieldSuggestions(null), 200)}\n                        placeholder=\"{{row.field}} or static\"\n                        className=\"w-full px-2 py-1.5 rounded border border-border-default bg-bg-surface text-text-primary text-sm focus:outline-none focus:ring-1 focus:ring-action-primary-bg\"\n                      />\n                      {/* Field suggestions dropdown */}\n                      {showFieldSuggestions === index && availableFields.length > 0 && (\n                        <div className=\"absolute z-10 top-full left-0 right-0 mt-1 max-h-40 overflow-y-auto bg-bg-surface border border-border-default rounded-md shadow-lg\">\n                          {availableFields.slice(0, 10).map((field) => (\n                            <button\n                              key={field}\n                              type=\"button\"\n                              onClick={() => {\n                                updateParameterMapping(index, 'value', field);\n                                setShowFieldSuggestions(null);\n                              }}\n                              className=\"w-full px-3 py-1.5 text-left text-xs text-text-primary hover:bg-bg-sunken font-mono\"\n                            >\n                              {field}\n                            </button>\n                          ))}\n                        </div>\n                      )}\n                    </div>\n                    {parameterMappings.length > 1 && (\n                      <button\n                        type=\"button\"\n                        onClick={() => removeParameterMapping(index)}\n                        className=\"p-1 text-text-tertiary hover:text-status-error-text\"\n                      >\n                        <svg className=\"w-4 h-4\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n                          <path strokeLinecap=\"round\" strokeLinejoin=\"round\" strokeWidth={2} d=\"M6 18L18 6M6 6l12 12\" />\n                        </svg>\n                      </button>\n                    )}\n                  </div>\n                </div>\n              ))}\n            </div>\n\n            <p className=\"text-xs text-text-tertiary mt-2\">\n              Use <code className=\"px-1 bg-bg-sunken rounded\">{'{{row.field}}'}</code> for dynamic values or enter\n              static text.\n              <br />\n              Examples: <code className=\"px-1 bg-bg-sunken rounded\">{'{{row.category}}'}</code>,{' '}\n              <code className=\"px-1 bg-bg-sunken rounded\">{'{{item.id}}'}</code>,{' '}\n              <code className=\"px-1 bg-bg-sunken rounded\">{'{{globals.vars.dateFrom}}'}</code>\n            </p>\n          </div>\n\n          {/* Advanced Options */}\n          <div className=\"border-t border-border-default pt-4 mt-4\">\n            <h4 className=\"text-sm font-medium text-text-primary mb-3\">Advanced Options</h4>\n\n            {/* Pass Global Filters */}\n            <div className=\"flex items-center justify-between p-2 rounded bg-bg-sunken mb-3\">\n              <div>\n                <label className=\"text-sm text-text-primary\">Pass Global Filters</label>\n                <p className=\"text-xs text-text-tertiary\">Include current dashboard filters in drilldown</p>\n              </div>\n              <button\n                type=\"button\"\n                role=\"switch\"\n                aria-checked={passGlobalFilters}\n                onClick={() => setPassGlobalFilters(!passGlobalFilters)}\n                className={`\n                    relative inline-flex h-5 w-9 items-center rounded-full transition-colors cursor-pointer border\n                    ${passGlobalFilters ? 'bg-action-primary-bg border-action-primary-bg' : 'bg-gray-300 border-gray-400'}\n                  `}\n              >\n                <span\n                  className={`\n                      inline-block h-3 w-3 transform rounded-full bg-white shadow transition-transform\n                      ${passGlobalFilters ? 'translate-x-5' : 'translate-x-1'}\n                    `}\n                />\n              </button>\n            </div>\n\n            {/* Max Depth */}\n            <div className=\"flex items-center justify-between p-2 rounded bg-bg-sunken mb-3\">\n              <div>\n                <label className=\"text-sm text-text-primary\">Max Drilldown Depth</label>\n                <p className=\"text-xs text-text-tertiary\">Limit nested drilldown levels</p>\n              </div>\n              <select\n                value={maxDepth}\n                onChange={(e) => setMaxDepth(Number(e.target.value))}\n                className=\"w-16 px-2 py-1 rounded border border-border-default bg-bg-surface text-text-primary text-sm\"\n              >\n                {[1, 2, 3, 4, 5].map((n) => (\n                  <option key={n} value={n}>\n                    {n}\n                  </option>\n                ))}\n              </select>\n            </div>\n\n            {/* Open In (only for SAME_WINDOW mode) */}\n            {navigationMode === 'SAME_WINDOW' && (\n              <div className=\"flex items-center justify-between p-2 rounded bg-bg-sunken\">\n                <div>\n                  <label className=\"text-sm text-text-primary\">Open In</label>\n                  <p className=\"text-xs text-text-tertiary\">Tab behavior for navigation</p>\n                </div>\n                <div className=\"flex gap-1\">\n                  <button\n                    type=\"button\"\n                    onClick={() => setOpenIn('same')}\n                    className={`\n                        px-2 py-1 rounded text-xs font-medium transition-colors\n                        ${\n                          openIn === 'same'\n                            ? 'bg-action-primary-bg text-white'\n                            : 'bg-bg-surface text-text-secondary hover:bg-bg-sunken/80 border border-border-default'\n                        }\n                      `}\n                  >\n                    Same Tab\n                  </button>\n                  <button\n                    type=\"button\"\n                    onClick={() => setOpenIn('new')}\n                    className={`\n                        px-2 py-1 rounded text-xs font-medium transition-colors\n                        ${\n                          openIn === 'new'\n                            ? 'bg-action-primary-bg text-white'\n                            : 'bg-bg-surface text-text-secondary hover:bg-bg-sunken/80 border border-border-default'\n                        }\n                      `}\n                  >\n                    New Tab\n                  </button>\n                </div>\n              </div>\n            )}\n          </div>\n        </>\n      )}\n\n      {/* Info when drilldown will be removed */}\n      {!enabled && widget.drilldown?.id && (\n        <div className=\"p-2 rounded bg-amber-100 text-amber-800 text-sm\">\n          Drilldown will be removed when you save changes.\n        </div>\n      )}\n    </div>\n  );\n});\n\nexport default DrilldownConfigPanel;\n"],"mappings":"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"}
+{"version":3,"file":"DrilldownConfigPanel.js","names":[],"sources":["../../../../src/bigconsole/components/widgets/DrilldownConfigPanel.tsx"],"sourcesContent":["/**\n * DrilldownConfigPanel Component\n *\n * UI for configuring widget drilldown settings.\n * Allows selecting target dashboard, navigation mode, and parameter mappings.\n *\n * v2.0 Features:\n * - passGlobalFilters: Pass current dashboard filters to target\n * - maxDepth: Limit drilldown depth (default: 3)\n * - openIn: Open in same tab or new tab\n * - Field suggestions based on widget data\n */\n\nimport { type FC, memo, useState, useEffect, useCallback, useMemo } from 'react';\nimport { useApolloClient } from '@apollo/client/react';\nimport { useI18n } from '@burdenoff/fe-libs/shared/providers/shell/I18nProvider';\nimport type { Widget, NavigationMode } from '../../types';\nimport { ListDashboardsDocument } from '../../../generated/wspace-operations';\nimport { DEFAULT_MAX_DEPTH } from '../../hooks/useDrilldown';\n\n// ============================================================================\n// Types\n// ============================================================================\n\nexport interface DrilldownConfigPanelProps {\n  /** Widget to configure drilldown for */\n  widget: Widget;\n  /** Callback when drilldown settings change (for tracking unsaved changes) */\n  onChange?: (config: DrilldownConfig) => void;\n  /** Sample widget data for field suggestions */\n  widgetData?: Record<string, unknown>;\n}\n\nexport interface DrilldownConfig {\n  enabled: boolean;\n  targetDashboardId: string;\n  navigationMode: NavigationMode;\n  parameterMapping: Record<string, string>;\n  /** Whether to pass global filters to target dashboard */\n  passGlobalFilters: boolean;\n  /** Maximum drilldown depth (default: 3) */\n  maxDepth: number;\n  /** Open in same tab or new tab (for SAME_WINDOW mode) */\n  openIn: 'same' | 'new';\n}\n\ninterface DashboardOption {\n  id: string;\n  name: string;\n}\n\ninterface ParameterMapping {\n  key: string;\n  value: string;\n}\n\n// ============================================================================\n// Helper Functions\n// ============================================================================\n\n/**\n * Extract available fields from widget data for field suggestions\n */\nfunction extractFieldPaths(obj: unknown, prefix = ''): string[] {\n  if (!obj || typeof obj !== 'object') return [];\n\n  const paths: string[] = [];\n\n  // Handle arrays - use first element as template\n  if (Array.isArray(obj)) {\n    if (obj.length > 0 && typeof obj[0] === 'object') {\n      return extractFieldPaths(obj[0], prefix);\n    }\n    return [];\n  }\n\n  // Handle objects\n  for (const [key, value] of Object.entries(obj as Record<string, unknown>)) {\n    const path = prefix ? `${prefix}.${key}` : key;\n    paths.push(path);\n\n    // Recurse into nested objects (but not too deep)\n    if (value && typeof value === 'object' && !Array.isArray(value) && prefix.split('.').length < 2) {\n      paths.push(...extractFieldPaths(value, path));\n    }\n  }\n\n  return paths;\n}\n\n// ============================================================================\n// Component\n// ============================================================================\n\nexport const DrilldownConfigPanel: FC<DrilldownConfigPanelProps> = memo(function DrilldownConfigPanel({\n  widget,\n  onChange,\n  widgetData,\n}) {\n  const { t } = useI18n();\n  const apolloClient = useApolloClient();\n\n  // State\n  const [enabled, setEnabled] = useState(widget.drilldown?.enabled ?? false);\n  const [targetDashboardId, setTargetDashboardId] = useState(widget.drilldown?.targetDashboardId ?? '');\n  const [navigationMode, setNavigationMode] = useState<NavigationMode>(widget.drilldown?.navigationMode ?? 'MODAL');\n  const [passGlobalFilters, setPassGlobalFilters] = useState(widget.drilldown?.passGlobalFilters ?? true);\n  const [maxDepth, setMaxDepth] = useState(widget.drilldown?.maxDepth ?? DEFAULT_MAX_DEPTH);\n  const [openIn, setOpenIn] = useState<'same' | 'new'>(widget.drilldown?.openIn ?? 'same');\n  const [parameterMappings, setParameterMappings] = useState<ParameterMapping[]>(() => {\n    const mapping = widget.drilldown?.parameterMapping as Record<string, string> | undefined;\n    if (mapping) {\n      return Object.entries(mapping).map(([key, value]) => ({ key, value }));\n    }\n    return [{ key: '', value: '' }];\n  });\n\n  const [dashboards, setDashboards] = useState<DashboardOption[]>([]);\n  const [loading, setLoading] = useState(false);\n  const [showFieldSuggestions, setShowFieldSuggestions] = useState<number | null>(null);\n\n  // Extract available field paths from widget data\n  const availableFields = useMemo(() => {\n    if (!widgetData) return [];\n\n    // Common prefixes for different widget types\n    const prefixes = ['row', 'item', 'point', 'selectedData'];\n    const fields = extractFieldPaths(widgetData);\n\n    // Generate mustache-style suggestions\n    const suggestions: string[] = [];\n    for (const field of fields) {\n      for (const prefix of prefixes) {\n        suggestions.push(`{{${prefix}.${field}}}`);\n      }\n    }\n\n    // Add common widget data fields\n    suggestions.push('{{widget.value}}', '{{widget.title}}', '{{widget.id}}');\n    suggestions.push('{{globals.vars.dateFrom}}', '{{globals.vars.dateTo}}');\n\n    return [...new Set(suggestions)];\n  }, [widgetData]);\n\n  // Notify parent of changes\n  const notifyChange = useCallback(() => {\n    const parameterMapping: Record<string, string> = {};\n    for (const { key, value } of parameterMappings) {\n      if (key.trim() && value.trim()) {\n        parameterMapping[key.trim()] = value.trim();\n      }\n    }\n    onChange?.({\n      enabled,\n      targetDashboardId,\n      navigationMode,\n      parameterMapping,\n      passGlobalFilters,\n      maxDepth,\n      openIn,\n    });\n  }, [enabled, targetDashboardId, navigationMode, parameterMappings, passGlobalFilters, maxDepth, openIn, onChange]);\n\n  // Call notifyChange when any value changes\n  useEffect(() => {\n    notifyChange();\n  }, [\n    enabled,\n    targetDashboardId,\n    navigationMode,\n    parameterMappings,\n    passGlobalFilters,\n    maxDepth,\n    openIn,\n    notifyChange,\n  ]);\n\n  // Fetch available dashboards\n  useEffect(() => {\n    async function fetchDashboards() {\n      setLoading(true);\n      try {\n        const result = await apolloClient.query<{ listDashboards: { edges: Record<string, unknown>[] } }>({\n          query: ListDashboardsDocument,\n          variables: { first: 100 },\n          fetchPolicy: 'cache-first',\n        });\n\n        const edges = result.data?.listDashboards?.edges || [];\n        setDashboards(\n          edges.map((edge: Record<string, unknown>) => {\n            const node = edge.node as Record<string, unknown>;\n            return {\n              id: node.id as string,\n              name: node.name as string,\n            };\n          })\n        );\n      } catch (err) {\n      } finally {\n        setLoading(false);\n      }\n    }\n\n    fetchDashboards();\n  }, [apolloClient]);\n\n  // Add parameter mapping row\n  const addParameterMapping = useCallback(() => {\n    setParameterMappings((prev) => [...prev, { key: '', value: '' }]);\n  }, []);\n\n  // Remove parameter mapping row\n  const removeParameterMapping = useCallback((index: number) => {\n    setParameterMappings((prev) => prev.filter((_, i) => i !== index));\n  }, []);\n\n  // Update parameter mapping\n  const updateParameterMapping = useCallback((index: number, field: 'key' | 'value', newValue: string) => {\n    setParameterMappings((prev) => prev.map((item, i) => (i === index ? { ...item, [field]: newValue } : item)));\n  }, []);\n\n  return (\n    <div className=\"space-y-4 pb-8\">\n      {/* Enable Toggle */}\n      <div className=\"flex items-center justify-between p-3 rounded-lg border border-border-default bg-bg-surface\">\n        <label className=\"text-sm font-medium text-text-primary\">\n          {t('bigconsole.widget.drilldown.enableLabel', 'Enable Drilldown')}\n        </label>\n        <button\n          type=\"button\"\n          role=\"switch\"\n          aria-checked={enabled}\n          onClick={() => setEnabled(!enabled)}\n          className={`\n              relative inline-flex h-6 w-11 items-center rounded-full transition-colors cursor-pointer border\n              ${enabled ? 'bg-action-primary-bg border-action-primary-bg' : 'bg-gray-300 border-gray-400'}\n            `}\n        >\n          <span\n            className={`\n                inline-block h-4 w-4 transform rounded-full bg-white shadow transition-transform\n                ${enabled ? 'translate-x-6' : 'translate-x-1'}\n              `}\n          />\n        </button>\n      </div>\n\n      {enabled && (\n        <>\n          {/* Target Dashboard */}\n          <div>\n            <label className=\"block text-sm font-medium text-text-primary mb-1\">\n              {t('bigconsole.widget.drilldown.targetDashboardLabel', 'Target Dashboard')}\n            </label>\n            <select\n              value={targetDashboardId}\n              onChange={(e) => setTargetDashboardId(e.target.value)}\n              disabled={loading}\n              className=\"w-full px-3 py-2 rounded-md border border-border-default bg-bg-surface text-text-primary text-sm focus:outline-none focus:ring-2 focus:ring-action-primary-bg\"\n            >\n              <option value=\"\">{t('bigconsole.widget.drilldown.selectDashboard', 'Select a dashboard...')}</option>\n              {dashboards\n                .filter((d) => d.id !== widget.dashboardId) // Exclude current dashboard\n                .map((dashboard) => (\n                  <option key={dashboard.id} value={dashboard.id}>\n                    {dashboard.name}\n                  </option>\n                ))}\n            </select>\n          </div>\n\n          {/* Navigation Mode */}\n          <div>\n            <label className=\"block text-sm font-medium text-text-primary mb-1\">\n              {t('bigconsole.widget.drilldown.navigationModeLabel', 'Navigation Mode')}\n            </label>\n            <div className=\"flex gap-2\">\n              {(['MODAL', 'NEW_TAB', 'SAME_WINDOW'] as NavigationMode[]).map((mode) => (\n                <button\n                  key={mode}\n                  type=\"button\"\n                  onClick={() => setNavigationMode(mode)}\n                  className={`\n                      flex-1 px-3 py-2 rounded-md text-sm font-medium transition-colors\n                      ${\n                        navigationMode === mode\n                          ? 'bg-action-primary-bg text-white'\n                          : 'bg-bg-sunken text-text-secondary hover:bg-bg-sunken/80'\n                      }\n                    `}\n                >\n                  {mode === 'MODAL' && t('bigconsole.widget.drilldown.mode.modal', 'Modal')}\n                  {mode === 'NEW_TAB' && t('bigconsole.widget.drilldown.mode.newTab', 'New Tab')}\n                  {mode === 'SAME_WINDOW' && t('bigconsole.widget.drilldown.mode.sameWindow', 'Same Window')}\n                </button>\n              ))}\n            </div>\n            <p className=\"text-xs text-text-tertiary mt-1\">\n              {navigationMode === 'MODAL' &&\n                t('bigconsole.widget.drilldown.modeHelp.modal', 'Opens target dashboard in a modal overlay')}\n              {navigationMode === 'NEW_TAB' &&\n                t('bigconsole.widget.drilldown.modeHelp.newTab', 'Opens target dashboard in a new browser tab')}\n              {navigationMode === 'SAME_WINDOW' &&\n                t('bigconsole.widget.drilldown.modeHelp.sameWindow', 'Navigates to target dashboard in current window')}\n            </p>\n          </div>\n\n          {/* Parameter Mappings */}\n          <div>\n            <div className=\"flex items-center justify-between mb-2\">\n              <label className=\"text-sm font-medium text-text-primary\">\n                {t('bigconsole.widget.drilldown.parameterMappingsLabel', 'Parameter Mappings')}\n              </label>\n              <button\n                type=\"button\"\n                onClick={addParameterMapping}\n                className=\"text-xs text-action-primary-text hover:underline\"\n              >\n                {t('bigconsole.widget.drilldown.addParameter', '+ Add Parameter')}\n              </button>\n            </div>\n\n            <div className=\"space-y-2\">\n              {parameterMappings.map((mapping, index) => (\n                <div key={index} className=\"relative\">\n                  <div className=\"flex gap-2 items-center\">\n                    <input\n                      type=\"text\"\n                      value={mapping.key}\n                      onChange={(e) => updateParameterMapping(index, 'key', e.target.value)}\n                      placeholder={t('bigconsole.widget.drilldown.parameterNamePlaceholder', 'Parameter name')}\n                      className=\"flex-1 px-2 py-1.5 rounded border border-border-default bg-bg-surface text-text-primary text-sm focus:outline-none focus:ring-1 focus:ring-action-primary-bg\"\n                    />\n                    <span className=\"text-text-tertiary\">=</span>\n                    <div className=\"flex-1 relative\">\n                      <input\n                        type=\"text\"\n                        value={mapping.value}\n                        onChange={(e) => updateParameterMapping(index, 'value', e.target.value)}\n                        onFocus={() => setShowFieldSuggestions(index)}\n                        onBlur={() => setTimeout(() => setShowFieldSuggestions(null), 200)}\n                        placeholder={t(\n                          'bigconsole.widget.drilldown.parameterValuePlaceholder',\n                          '{{row.field}} or static'\n                        )}\n                        className=\"w-full px-2 py-1.5 rounded border border-border-default bg-bg-surface text-text-primary text-sm focus:outline-none focus:ring-1 focus:ring-action-primary-bg\"\n                      />\n                      {/* Field suggestions dropdown */}\n                      {showFieldSuggestions === index && availableFields.length > 0 && (\n                        <div className=\"absolute z-10 top-full left-0 right-0 mt-1 max-h-40 overflow-y-auto bg-bg-surface border border-border-default rounded-md shadow-lg\">\n                          {availableFields.slice(0, 10).map((field) => (\n                            <button\n                              key={field}\n                              type=\"button\"\n                              onClick={() => {\n                                updateParameterMapping(index, 'value', field);\n                                setShowFieldSuggestions(null);\n                              }}\n                              className=\"w-full px-3 py-1.5 text-left text-xs text-text-primary hover:bg-bg-sunken font-mono\"\n                            >\n                              {field}\n                            </button>\n                          ))}\n                        </div>\n                      )}\n                    </div>\n                    {parameterMappings.length > 1 && (\n                      <button\n                        type=\"button\"\n                        onClick={() => removeParameterMapping(index)}\n                        className=\"p-1 text-text-tertiary hover:text-status-error-text\"\n                      >\n                        <svg className=\"w-4 h-4\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n                          <path strokeLinecap=\"round\" strokeLinejoin=\"round\" strokeWidth={2} d=\"M6 18L18 6M6 6l12 12\" />\n                        </svg>\n                      </button>\n                    )}\n                  </div>\n                </div>\n              ))}\n            </div>\n\n            <p className=\"text-xs text-text-tertiary mt-2\">\n              {t('bigconsole.widget.drilldown.paramHelp.usePrefix', 'Use')}{' '}\n              <code className=\"px-1 bg-bg-sunken rounded\">{'{{row.field}}'}</code>{' '}\n              {t('bigconsole.widget.drilldown.paramHelp.useSuffix', 'for dynamic values or enter static text.')}\n              <br />\n              {t('bigconsole.widget.drilldown.paramHelp.examples', 'Examples:')}{' '}\n              <code className=\"px-1 bg-bg-sunken rounded\">{'{{row.category}}'}</code>,{' '}\n              <code className=\"px-1 bg-bg-sunken rounded\">{'{{item.id}}'}</code>,{' '}\n              <code className=\"px-1 bg-bg-sunken rounded\">{'{{globals.vars.dateFrom}}'}</code>\n            </p>\n          </div>\n\n          {/* Advanced Options */}\n          <div className=\"border-t border-border-default pt-4 mt-4\">\n            <h4 className=\"text-sm font-medium text-text-primary mb-3\">\n              {t('bigconsole.widget.drilldown.advancedOptions', 'Advanced Options')}\n            </h4>\n\n            {/* Pass Global Filters */}\n            <div className=\"flex items-center justify-between p-2 rounded bg-bg-sunken mb-3\">\n              <div>\n                <label className=\"text-sm text-text-primary\">\n                  {t('bigconsole.widget.drilldown.passGlobalFiltersLabel', 'Pass Global Filters')}\n                </label>\n                <p className=\"text-xs text-text-tertiary\">\n                  {t(\n                    'bigconsole.widget.drilldown.passGlobalFiltersHelp',\n                    'Include current dashboard filters in drilldown'\n                  )}\n                </p>\n              </div>\n              <button\n                type=\"button\"\n                role=\"switch\"\n                aria-checked={passGlobalFilters}\n                onClick={() => setPassGlobalFilters(!passGlobalFilters)}\n                className={`\n                    relative inline-flex h-5 w-9 items-center rounded-full transition-colors cursor-pointer border\n                    ${passGlobalFilters ? 'bg-action-primary-bg border-action-primary-bg' : 'bg-gray-300 border-gray-400'}\n                  `}\n              >\n                <span\n                  className={`\n                      inline-block h-3 w-3 transform rounded-full bg-white shadow transition-transform\n                      ${passGlobalFilters ? 'translate-x-5' : 'translate-x-1'}\n                    `}\n                />\n              </button>\n            </div>\n\n            {/* Max Depth */}\n            <div className=\"flex items-center justify-between p-2 rounded bg-bg-sunken mb-3\">\n              <div>\n                <label className=\"text-sm text-text-primary\">\n                  {t('bigconsole.widget.drilldown.maxDepthLabel', 'Max Drilldown Depth')}\n                </label>\n                <p className=\"text-xs text-text-tertiary\">\n                  {t('bigconsole.widget.drilldown.maxDepthHelp', 'Limit nested drilldown levels')}\n                </p>\n              </div>\n              <select\n                value={maxDepth}\n                onChange={(e) => setMaxDepth(Number(e.target.value))}\n                className=\"w-16 px-2 py-1 rounded border border-border-default bg-bg-surface text-text-primary text-sm\"\n              >\n                {[1, 2, 3, 4, 5].map((n) => (\n                  <option key={n} value={n}>\n                    {n}\n                  </option>\n                ))}\n              </select>\n            </div>\n\n            {/* Open In (only for SAME_WINDOW mode) */}\n            {navigationMode === 'SAME_WINDOW' && (\n              <div className=\"flex items-center justify-between p-2 rounded bg-bg-sunken\">\n                <div>\n                  <label className=\"text-sm text-text-primary\">\n                    {t('bigconsole.widget.drilldown.openInLabel', 'Open In')}\n                  </label>\n                  <p className=\"text-xs text-text-tertiary\">\n                    {t('bigconsole.widget.drilldown.openInHelp', 'Tab behavior for navigation')}\n                  </p>\n                </div>\n                <div className=\"flex gap-1\">\n                  <button\n                    type=\"button\"\n                    onClick={() => setOpenIn('same')}\n                    className={`\n                        px-2 py-1 rounded text-xs font-medium transition-colors\n                        ${\n                          openIn === 'same'\n                            ? 'bg-action-primary-bg text-white'\n                            : 'bg-bg-surface text-text-secondary hover:bg-bg-sunken/80 border border-border-default'\n                        }\n                      `}\n                  >\n                    {t('bigconsole.widget.drilldown.openIn.sameTab', 'Same Tab')}\n                  </button>\n                  <button\n                    type=\"button\"\n                    onClick={() => setOpenIn('new')}\n                    className={`\n                        px-2 py-1 rounded text-xs font-medium transition-colors\n                        ${\n                          openIn === 'new'\n                            ? 'bg-action-primary-bg text-white'\n                            : 'bg-bg-surface text-text-secondary hover:bg-bg-sunken/80 border border-border-default'\n                        }\n                      `}\n                  >\n                    {t('bigconsole.widget.drilldown.openIn.newTab', 'New Tab')}\n                  </button>\n                </div>\n              </div>\n            )}\n          </div>\n        </>\n      )}\n\n      {/* Info when drilldown will be removed */}\n      {!enabled && widget.drilldown?.id && (\n        <div className=\"p-2 rounded bg-amber-100 text-amber-800 text-sm\">\n          {t('bigconsole.widget.drilldown.removalWarning', 'Drilldown will be removed when you save changes.')}\n        </div>\n      )}\n    </div>\n  );\n});\n\nexport default DrilldownConfigPanel;\n"],"mappings":"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"}