+
diff --git a/frontend/src/routes/datasets/+page.svelte b/frontend/src/routes/datasets/+page.svelte
index 96ce291..0c7df63 100644
--- a/frontend/src/routes/datasets/+page.svelte
+++ b/frontend/src/routes/datasets/+page.svelte
@@ -10,7 +10,11 @@
* @UX_STATE: Loading -> Shows skeleton loader
* @UX_STATE: Loaded -> Shows dataset grid with mapping progress
* @UX_STATE: Error -> Shows error banner with retry button
+ * @UX_STATE: Selecting -> Checkboxes checked, floating action panel appears
+ * @UX_STATE: BulkAction-Modal -> Map Columns or Generate Docs modal open
* @UX_FEEDBACK: Clicking task status opens Task Drawer
+ * @UX_FEEDBACK: Mapped % column shows progress bar + percentage text
+ * @UX_FEEDBACK: Floating panel slides up from bottom when items selected
* @UX_RECOVERY: Refresh button reloads dataset list
*/
@@ -19,12 +23,45 @@
import { t } from '$lib/i18n';
import { openDrawerForTask } from '$lib/stores/taskDrawer.js';
import { api } from '$lib/api.js';
+ import { debounce } from '$lib/utils/debounce.js';
// State
let selectedEnv = null;
let datasets = [];
let isLoading = true;
let error = null;
+
+ // Pagination state
+ let currentPage = 1;
+ let pageSize = 10;
+ let totalPages = 1;
+ let total = 0;
+
+ // Selection state
+ let selectedIds = new Set();
+ let isAllSelected = false;
+ let isAllVisibleSelected = false;
+
+ // Search state
+ let searchQuery = '';
+
+ // Bulk action modal state
+ let showMapColumnsModal = false;
+ let showGenerateDocsModal = false;
+ let mapSourceType = 'postgresql';
+ let mapConnectionId = null;
+ let mapFileData = null;
+ let llmProvider = '';
+ let llmOptions = {};
+
+ // Environment options - will be loaded from API
+ let environments = [];
+
+ // Debounced search function
+ const debouncedSearch = debounce((query) => {
+ searchQuery = query;
+ loadDatasets();
+ }, 300);
// Load environments and datasets on mount
onMount(async () => {
@@ -59,7 +96,21 @@
isLoading = true;
error = null;
try {
- const response = await api.getDatasets(selectedEnv);
+ const response = await api.getDatasets(selectedEnv, {
+ search: searchQuery || undefined,
+ page: currentPage,
+ page_size: pageSize
+ });
+
+ // Preserve selected IDs across pagination
+ const newSelectedIds = new Set();
+ response.datasets.forEach(d => {
+ if (selectedIds.has(d.id)) {
+ newSelectedIds.add(d.id);
+ }
+ });
+ selectedIds = newSelectedIds;
+
datasets = response.datasets.map(d => ({
id: d.id,
table_name: d.table_name,
@@ -75,6 +126,13 @@
} : null,
actions: ['map_columns'] // All datasets have map columns option
}));
+
+ // Update pagination state
+ total = response.total;
+ totalPages = response.total_pages;
+
+ // Update selection state
+ updateSelectionState();
} catch (err) {
error = err.message || 'Failed to load datasets';
console.error('[DatasetHub][Coherence:Failed]', err);
@@ -86,15 +144,155 @@
// Handle environment change
function handleEnvChange(event) {
selectedEnv = event.target.value;
+ currentPage = 1;
+ selectedIds.clear();
loadDatasets();
}
+ // Handle search input
+ function handleSearch(event) {
+ debouncedSearch(event.target.value);
+ }
+
+ // Handle page change
+ function handlePageChange(page) {
+ currentPage = page;
+ loadDatasets();
+ }
+
+ // Handle page size change
+ function handlePageSizeChange(event) {
+ pageSize = parseInt(event.target.value);
+ currentPage = 1;
+ loadDatasets();
+ }
+
+ // Update selection state based on current selection
+ function updateSelectionState() {
+ const visibleCount = datasets.length;
+ const totalCount = total;
+
+ isAllSelected = selectedIds.size === totalCount && totalCount > 0;
+ isAllVisibleSelected = selectedIds.size === visibleCount && visibleCount > 0;
+ }
+
+ // Handle checkbox change for individual dataset
+ function handleCheckboxChange(dataset, event) {
+ if (event.target.checked) {
+ selectedIds.add(dataset.id);
+ } else {
+ selectedIds.delete(dataset.id);
+ }
+ selectedIds = selectedIds; // Trigger reactivity
+ updateSelectionState();
+ }
+
+ // Handle select all
+ async function handleSelectAll() {
+ if (isAllSelected) {
+ selectedIds.clear();
+ } else {
+ // Get all dataset IDs from API (including non-visible ones)
+ try {
+ const response = await api.getDatasetIds(selectedEnv, {
+ search: searchQuery || undefined
+ });
+ response.dataset_ids.forEach(id => selectedIds.add(id));
+ } catch (err) {
+ console.error('[DatasetHub][Coherence:Failed] Failed to fetch all dataset IDs:', err);
+ // Fallback to selecting visible datasets if API fails
+ datasets.forEach(d => selectedIds.add(d.id));
+ }
+ }
+ selectedIds = selectedIds; // Trigger reactivity
+ updateSelectionState();
+ }
+
+ // Handle select visible
+ function handleSelectVisible() {
+ if (isAllVisibleSelected) {
+ datasets.forEach(d => selectedIds.delete(d.id));
+ } else {
+ datasets.forEach(d => selectedIds.add(d.id));
+ }
+ selectedIds = selectedIds; // Trigger reactivity
+ updateSelectionState();
+ }
+
// Handle action click
function handleAction(dataset, action) {
console.log(`[DatasetHub][Action] ${action} on dataset ${dataset.table_name}`);
+
if (action === 'map_columns') {
- // Navigate to mapping interface
- goto(`/mapper?dataset_id=${dataset.id}`);
+ // Show map columns modal
+ showMapColumnsModal = true;
+ mapSourceType = 'postgresql';
+ mapConnectionId = null;
+ mapFileData = null;
+ } else if (action === 'generate_docs') {
+ // Show generate docs modal
+ showGenerateDocsModal = true;
+ llmProvider = '';
+ llmOptions = {};
+ }
+ }
+
+ // Handle bulk map columns
+ async function handleBulkMapColumns() {
+ if (selectedIds.size === 0) return;
+
+ try {
+ const response = await api.postApi('/datasets/map-columns', {
+ env_id: selectedEnv,
+ dataset_ids: Array.from(selectedIds),
+ source_type: mapSourceType,
+ connection_id: mapConnectionId || undefined,
+ file_data: mapFileData || undefined
+ });
+ console.log('[DatasetHub][Action] Bulk map columns task created:', response.task_id);
+
+ // Close modal and open task drawer
+ showMapColumnsModal = false;
+ selectedIds.clear();
+ updateSelectionState();
+
+ if (response.task_id) {
+ openDrawerForTask(response.task_id);
+ }
+ } catch (err) {
+ console.error('[DatasetHub][Coherence:Failed]', err);
+ alert('Failed to create mapping task');
+ }
+ }
+
+ // Handle bulk generate docs
+ async function handleBulkGenerateDocs() {
+ if (selectedIds.size === 0) return;
+ if (!llmProvider) {
+ alert('Please select an LLM provider');
+ return;
+ }
+
+ try {
+ const response = await api.postApi('/datasets/generate-docs', {
+ env_id: selectedEnv,
+ dataset_ids: Array.from(selectedIds),
+ llm_provider: llmProvider,
+ options: llmOptions
+ });
+ console.log('[DatasetHub][Action] Bulk generate docs task created:', response.task_id);
+
+ // Close modal and open task drawer
+ showGenerateDocsModal = false;
+ selectedIds.clear();
+ updateSelectionState();
+
+ if (response.task_id) {
+ openDrawerForTask(response.task_id);
+ }
+ } catch (err) {
+ console.error('[DatasetHub][Coherence:Failed]', err);
+ alert('Failed to create documentation generation task');
}
}
@@ -111,7 +309,7 @@
if (!status) return '';
switch (status.toLowerCase()) {
case 'running':
- return '
';
+ return '
';
case 'success':
return '
';
case 'error':
@@ -162,6 +360,10 @@
@apply px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors;
}
+ .search-input {
+ @apply px-4 py-2 border border-gray-300 rounded-lg bg-white focus:outline-none focus:ring-2 focus:ring-blue-500;
+ }
+
.error-banner {
@apply bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded mb-4 flex items-center justify-between;
}
@@ -170,6 +372,14 @@
@apply px-4 py-2 bg-red-600 text-white rounded hover:bg-red-700 transition-colors;
}
+ .toolbar {
+ @apply flex items-center justify-between mb-4 gap-4;
+ }
+
+ .selection-buttons {
+ @apply flex items-center gap-2;
+ }
+
.dataset-grid {
@apply bg-white border border-gray-200 rounded-lg overflow-hidden;
}
@@ -186,6 +396,10 @@
@apply border-b-0;
}
+ .col-checkbox {
+ @apply col-span-1;
+ }
+
.col-table-name {
@apply col-span-3 font-medium text-gray-900;
}
@@ -203,7 +417,7 @@
}
.col-actions {
- @apply col-span-2;
+ @apply col-span-1;
}
.mapping-progress {
@@ -233,6 +447,58 @@
.skeleton {
@apply animate-pulse bg-gray-200 rounded;
}
+
+ .floating-panel {
+ @apply fixed bottom-0 left-0 right-0 bg-white border-t border-gray-200 shadow-lg p-4 transition-transform transform translate-y-full;
+ }
+
+ .floating-panel.visible {
+ @apply transform translate-y-0;
+ }
+
+ .modal-overlay {
+ @apply fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50;
+ }
+
+ .modal {
+ @apply bg-white rounded-lg shadow-xl max-w-2xl w-full mx-4 max-h-[80vh] overflow-y-auto;
+ }
+
+ .modal-header {
+ @apply px-6 py-4 border-b border-gray-200 flex items-center justify-between relative;
+ }
+
+ .close-modal-btn {
+ @apply absolute top-4 right-4 p-2 text-gray-400 hover:text-gray-600 hover:bg-gray-100 rounded-full transition-all;
+ }
+
+ .modal-body {
+ @apply px-6 py-4;
+ }
+
+ .modal-footer {
+ @apply px-6 py-4 border-t border-gray-200 flex justify-end gap-3;
+ }
+
+ .pagination {
+ @apply flex items-center justify-between px-4 py-3 bg-gray-50 border-t border-gray-200;
+ }
+
+ .pagination-info {
+ @apply text-sm text-gray-600;
+ }
+
+ .pagination-controls {
+ @apply flex items-center gap-2;
+ }
+
+ .page-btn {
+ @apply px-3 py-1 border border-gray-300 rounded hover:bg-gray-100 disabled:opacity-50 disabled:cursor-not-allowed;
+ }
+
+ .page-btn.active {
+ @apply bg-blue-600 text-white border-blue-600;
+ }
@@ -265,6 +531,7 @@
{#if isLoading}
{#each Array(5) as _}
+
@@ -290,10 +558,45 @@
{$t.datasets?.empty || 'No datasets found'}
{:else}
+
+
+
+
+
+ {#if totalPages > 1}
+
+ {/if}
+
+
+ {#if selectedIds.size > 0}
+
+
+
+
+ ✓ {selectedIds.size} selected
+
+
+
+
+
+
+
+
+
+ {/if}
+ {/if}
+
+
+ {#if showMapColumnsModal}
+
showMapColumnsModal = false}>
+
+
+
+
+
+
+
+
+ {#if mapSourceType === 'postgresql'}
+
+
+
+
+ {:else}
+
+
+
+
+ {/if}
+
+
+
+ {#each Array.from(selectedIds) as id}
+ {#each datasets as d}
+ {#if d.id === id}
+
{d.table_name}
+ {/if}
+ {/each}
+ {/each}
+
+
+
+
+
+
+
+ {/if}
+
+
+ {#if showGenerateDocsModal}
+
showGenerateDocsModal = false}>
+
+
+
+
+
+
+
+
+
+
+
+ {#each Array.from(selectedIds) as id}
+ {#each datasets as d}
+ {#if d.id === id}
+
{d.table_name}
+ {/if}
+ {/each}
+ {/each}
+
+
+
+
+
+
+
{/if}
diff --git a/frontend/src/routes/datasets/[id]/+page.svelte b/frontend/src/routes/datasets/[id]/+page.svelte
new file mode 100644
index 0000000..539d680
--- /dev/null
+++ b/frontend/src/routes/datasets/[id]/+page.svelte
@@ -0,0 +1,418 @@
+
+
+
+
+
+
+
+
+
+
+ {#if error}
+
+ {error}
+
+
+ {/if}
+
+
+ {#if isLoading}
+
+
+
+ {#each Array(5) as _}
+
+ {/each}
+
+
+
+
+ {#each Array(4) as _}
+
+ {/each}
+
+
+
+ {:else if dataset}
+
+
+
+
{$t.datasets?.info || 'Dataset Information'}
+
+ {$t.datasets?.table_name || 'Table Name'}
+ {dataset.table_name}
+
+
+ {$t.datasets?.schema || 'Schema'}
+ {dataset.schema || '-'}
+
+
+ {$t.datasets?.database || 'Database'}
+ {dataset.database}
+
+
+ {$t.datasets?.columns_count || 'Columns'}
+ {dataset.column_count}
+
+
+ {$t.datasets?.linked_dashboards || 'Linked Dashboards'}
+ {dataset.linked_dashboard_count}
+
+ {#if dataset.is_sqllab_view}
+
+ {$t.datasets?.type || 'Type'}
+ SQL Lab View
+
+ {/if}
+ {#if dataset.created_on}
+
+ {$t.datasets?.created || 'Created'}
+ {new Date(dataset.created_on).toLocaleDateString()}
+
+ {/if}
+ {#if dataset.changed_on}
+
+ {$t.datasets?.updated || 'Updated'}
+ {new Date(dataset.changed_on).toLocaleDateString()}
+
+ {/if}
+
+
+
+ {#if dataset.linked_dashboards && dataset.linked_dashboards.length > 0}
+
+
{$t.datasets?.linked_dashboards || 'Linked Dashboards'} ({dataset.linked_dashboard_count})
+
+ {#each dataset.linked_dashboards as dashboard}
+
navigateToDashboard(dashboard.id)}
+ role="button"
+ tabindex="0"
+ >
+
+
+
+
+
{dashboard.title}
+
ID: {dashboard.id}{#if dashboard.slug} • {dashboard.slug}{/if}
+
+
+
+ {/each}
+
+
+ {/if}
+
+
+
+
{$t.datasets?.columns || 'Columns'} ({dataset.column_count})
+ {#if dataset.columns && dataset.columns.length > 0}
+
+ {#each dataset.columns as column}
+
+
+ {column.name}
+ {#if column.type}
+ {column.type}
+ {/if}
+
+
+ {#if column.is_dttm}
+ 📅 Date/Time
+ {/if}
+ {#if !column.is_active}
+ (Inactive)
+ {/if}
+
+ {column.description ? '✓ Mapped' : 'Unmapped'}
+
+
+ {#if column.description}
+
{column.description}
+ {/if}
+
+ {/each}
+
+ {:else}
+
+ {$t.datasets?.no_columns || 'No columns found'}
+
+ {/if}
+
+
+
+ {#if dataset.sql}
+
+
{$t.datasets?.sql_query || 'SQL Query'}
+
{dataset.sql}
+
+ {/if}
+
+ {:else}
+
+
+
{$t.datasets?.not_found || 'Dataset not found'}
+
+ {/if}
+
+
+
\ No newline at end of file
diff --git a/frontend/src/routes/settings/+page.svelte b/frontend/src/routes/settings/+page.svelte
index 15ff4e5..bf0ad07 100644
--- a/frontend/src/routes/settings/+page.svelte
+++ b/frontend/src/routes/settings/+page.svelte
@@ -68,6 +68,24 @@
addToast($t.settings?.save_failed || 'Failed to save settings', 'error');
}
}
+
+ // Placeholder functions for environment actions
+ function handleTestEnv(id) {
+ console.log(`[SettingsPage][Action] Test environment ${id}`);
+ addToast('Environment test started', 'info');
+ }
+
+ function editEnv(env) {
+ console.log(`[SettingsPage][Action] Edit environment ${env.id}`);
+ // TODO: Open edit modal
+ }
+
+ function handleDeleteEnv(id) {
+ if (confirm('Are you sure you want to delete this environment?')) {
+ console.log(`[SettingsPage][Action] Delete environment ${id}`);
+ // TODO: Call API to delete
+ }
+ }