236 lines
8.6 KiB
Svelte
236 lines
8.6 KiB
Svelte
<!-- #region MapperTool [C:3] [TYPE Component] [SEMANTICS mapper, dataset, column, mapping, sqllab] -->
|
|
<!-- @BRIEF Component component: components/tools/MapperTool.svelte -->
|
|
<!-- @LAYER UI -->
|
|
<!--
|
|
@SEMANTICS: mapper, tool, dataset, sqllab, excel
|
|
@PURPOSE: UI component for mapping dataset column verbose names using Superset SQL Lab or Excel files.
|
|
@LAYER UI
|
|
@RELATION USES -> [EXT:path:frontend/src/services/toolsService.js]
|
|
-->
|
|
<script>
|
|
// [SECTION: IMPORTS]
|
|
import { onMount } from 'svelte';
|
|
import { runTask } from '../../services/toolsService.js';
|
|
import { api } from '../../lib/api';
|
|
import { selectedTask } from '../../lib/stores.js';
|
|
import { addToast } from '../../lib/toasts.js';
|
|
import { t } from '../../lib/i18n';
|
|
import { Button, Card, Select, Input } from '../../lib/ui';
|
|
import DocPreview from '../llm/DocPreview.svelte';
|
|
// [/SECTION]
|
|
|
|
let envs = [];
|
|
let selectedEnv = '';
|
|
let datasetId = '';
|
|
let source = 'sqllab';
|
|
let databaseId = '';
|
|
let sqlQuery = '';
|
|
let excelPath = '';
|
|
let isRunning = false;
|
|
let isGeneratingDocs = false;
|
|
let generatedDoc = null;
|
|
|
|
// #region fetchData:Function [TYPE Function]
|
|
// @PURPOSE: Fetches environments.
|
|
// @PRE: None.
|
|
// @POST: envs array is populated.
|
|
async function fetchData() {
|
|
try {
|
|
envs = await api.fetchApi('/environments');
|
|
} catch (e) {
|
|
addToast($t.mapper.errors.fetch_failed, 'error');
|
|
}
|
|
}
|
|
// #endregion fetchData:Function
|
|
|
|
// #region handleRunMapper:Function [TYPE Function]
|
|
// @PURPOSE: Triggers the MapperPlugin task via new sqllab/excel sources.
|
|
// @PRE: selectedEnv and datasetId are set; source-specific fields are valid.
|
|
// @POST: Mapper task is started and selectedTask is updated.
|
|
async function handleRunMapper() {
|
|
if (!selectedEnv || !datasetId) {
|
|
addToast($t.mapper.errors.required_fields, 'warning');
|
|
return;
|
|
}
|
|
|
|
if (source === 'sqllab' && !databaseId) {
|
|
addToast($t.mapper.errors.sqllab_required, 'warning');
|
|
return;
|
|
}
|
|
|
|
if (source === 'excel' && !excelPath) {
|
|
addToast($t.mapper.errors.excel_required, 'warning');
|
|
return;
|
|
}
|
|
|
|
isRunning = true;
|
|
try {
|
|
const env = envs.find(e => e.id === selectedEnv);
|
|
const task = await runTask('dataset-mapper', {
|
|
env: env.name,
|
|
dataset_id: parseInt(datasetId),
|
|
source,
|
|
database_id: databaseId ? parseInt(databaseId) : undefined,
|
|
sql_query: sqlQuery || undefined,
|
|
excel_path: excelPath
|
|
});
|
|
|
|
selectedTask.set(task);
|
|
addToast($t.mapper.success.started, 'success');
|
|
} catch (e) {
|
|
addToast(e.message, 'error');
|
|
} finally {
|
|
isRunning = false;
|
|
}
|
|
}
|
|
// #endregion handleRunMapper:Function
|
|
|
|
// #region handleGenerateDocs:Function [TYPE Function]
|
|
// @PURPOSE: Triggers the LLM Documentation task.
|
|
// @PRE: selectedEnv and datasetId are set.
|
|
// @POST: Documentation task is started.
|
|
async function handleGenerateDocs() {
|
|
if (!selectedEnv || !datasetId) {
|
|
addToast($t.mapper.errors.required_fields, 'warning');
|
|
return;
|
|
}
|
|
|
|
isGeneratingDocs = true;
|
|
try {
|
|
// Fetch active provider first
|
|
const providers = await api.fetchApi('/llm/providers');
|
|
const activeProvider = providers.find(p => p.is_active);
|
|
|
|
if (!activeProvider) {
|
|
addToast($t.mapper?.errors?.no_active_llm_provider, 'error');
|
|
return;
|
|
}
|
|
|
|
const task = await runTask('llm_documentation', {
|
|
dataset_id: datasetId,
|
|
environment_id: selectedEnv,
|
|
provider_id: activeProvider.id
|
|
});
|
|
|
|
selectedTask.set(task);
|
|
addToast($t.mapper?.success?.docs_started, 'success');
|
|
} catch (e) {
|
|
addToast(e.message || $t.mapper?.errors?.docs_start_failed, 'error');
|
|
} finally {
|
|
isGeneratingDocs = false;
|
|
}
|
|
}
|
|
// #endregion handleGenerateDocs:Function
|
|
|
|
async function handleApplyDoc(doc) {
|
|
try {
|
|
await api.put(`/mappings/datasets/${datasetId}/metadata`, doc);
|
|
generatedDoc = null;
|
|
addToast($t.mapper?.success?.docs_applied, 'success');
|
|
} catch (err) {
|
|
addToast(err.message || $t.mapper?.errors?.docs_apply_failed, 'error');
|
|
}
|
|
}
|
|
|
|
onMount(fetchData);
|
|
</script>
|
|
|
|
<!-- [SECTION: TEMPLATE] -->
|
|
<div class="space-y-6">
|
|
<Card title={$t.mapper.title}>
|
|
<div class="space-y-4">
|
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
|
|
<div>
|
|
<Select
|
|
label={$t.mapper.environment}
|
|
bind:value={selectedEnv}
|
|
options={[
|
|
{ value: '', label: $t.mapper.select_env },
|
|
...envs.map(e => ({ value: e.id, label: e.name }))
|
|
]}
|
|
/>
|
|
</div>
|
|
<div>
|
|
<Input
|
|
label={$t.mapper.dataset_id}
|
|
type="number"
|
|
bind:value={datasetId}
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
<fieldset>
|
|
<legend class="block text-sm font-medium text-gray-700 mb-2">{$t.mapper.source}</legend>
|
|
<div class="flex space-x-4">
|
|
<label class="inline-flex items-center">
|
|
<input type="radio" bind:group={source} value="sqllab" class="focus-visible:ring-primary-ring h-4 w-4 text-primary border-gray-300" />
|
|
<span class="ml-2 text-sm text-gray-700">{$t.mapper.source_sqllab}</span>
|
|
</label>
|
|
<label class="inline-flex items-center">
|
|
<input type="radio" bind:group={source} value="excel" class="focus-visible:ring-primary-ring h-4 w-4 text-primary border-gray-300" />
|
|
<span class="ml-2 text-sm text-gray-700">{$t.mapper.source_excel}</span>
|
|
</label>
|
|
</div>
|
|
</fieldset>
|
|
|
|
{#if source === 'sqllab'}
|
|
<div class="space-y-4 p-4 bg-gray-50 rounded-md border border-gray-100">
|
|
<div>
|
|
<Input
|
|
label={$t.mapper.database_id}
|
|
type="number"
|
|
bind:value={databaseId}
|
|
placeholder={$t.mapper.database_id_placeholder}
|
|
/>
|
|
</div>
|
|
<div>
|
|
<Input
|
|
label={$t.mapper.sql_query_label}
|
|
type="text"
|
|
bind:value={sqlQuery}
|
|
placeholder={$t.mapper.sql_query_placeholder}
|
|
/>
|
|
</div>
|
|
</div>
|
|
{:else}
|
|
<div class="p-4 bg-gray-50 rounded-md border border-gray-100">
|
|
<Input
|
|
label={$t.mapper.excel_path}
|
|
type="text"
|
|
bind:value={excelPath}
|
|
placeholder={$t.mapper?.excel_placeholder}
|
|
/>
|
|
</div>
|
|
{/if}
|
|
|
|
<div class="flex justify-end pt-2 space-x-3">
|
|
<Button
|
|
variant="secondary"
|
|
onclick={handleGenerateDocs}
|
|
disabled={isGeneratingDocs || isRunning}
|
|
>
|
|
{#if isGeneratingDocs}
|
|
<span class="animate-spin mr-1">↻</span> {$t.mapper?.generating}
|
|
{:else}
|
|
<span class="mr-1">✨</span> {$t.datasets?.generate_docs}
|
|
{/if}
|
|
</Button>
|
|
<Button
|
|
variant="primary"
|
|
onclick={handleRunMapper}
|
|
disabled={isRunning}
|
|
>
|
|
{isRunning ? $t.mapper.starting : $t.mapper.run}
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
</Card>
|
|
|
|
<DocPreview
|
|
documentation={generatedDoc}
|
|
onCancel={() => generatedDoc = null}
|
|
onSave={handleApplyDoc}
|
|
/>
|
|
</div>
|
|
<!-- [/SECTION] -->
|
|
<!-- #endregion MapperTool --> |