@epcare/esm-report-builder 0.1.1-pre.13

package/src/components/shared/json-preview-panel/JsonPreviewPanel.tsx

@@ -0,0 +1,104 @@
+import React, { useMemo, useState } from 'react';
+import { Button, CopyButton, IconButton } from '@carbon/react';
+import { Download, Maximize, Minimize, Renew } from '@carbon/icons-react';
+import AceEditor from 'react-ace';
+
+import 'ace-builds/src-noconflict/mode-json';
+import 'ace-builds/src-noconflict/theme-github';
+
+import styles from './JsonPreviewPanel.scss';
+
+type Props = {
+  /** Draft JSON shown in the editor (controlled) */
+  jsonString: string;
+
+  /** Called when user edits the JSON */
+  onChangeJson?: (value: string) => void;
+
+  /** Refresh Template Structure from JSON draft */
+  onRefreshTemplate?: () => void;
+
+  fileName?: string;
+
+  /** Defaults to true to preserve current behaviour */
+  readOnly?: boolean;
+};
+
+export default function JsonPreviewPanel({
+                                           jsonString,
+                                           onChangeJson,
+                                           onRefreshTemplate,
+                                           fileName = 'report-template.json',
+                                           readOnly = true,
+                                         }: Props) {
+  const [isMaximized, setIsMaximized] = useState(false);
+
+  const downloadable = useMemo(() => new Blob([jsonString], { type: 'application/json' }), [jsonString]);
+  const downloadUrl = useMemo(() => window.URL.createObjectURL(downloadable), [downloadable]);
+
+  const canEdit = !readOnly && typeof onChangeJson === 'function';
+  const canRefreshTemplate = typeof onRefreshTemplate === 'function';
+
+  return (
+    <div className={isMaximized ? styles.maximized : ''}>
+      <div className={styles.headerRow}>
+        <h3 className={styles.title}>JSON Preview</h3>
+
+        <div className={styles.tools}>
+          {/* ✅ Refresh Template (JSON -> Template Structure) */}
+          {canRefreshTemplate ? (
+            <Button
+              size="sm"
+              kind="ghost"
+              renderIcon={Renew}
+              onClick={onRefreshTemplate}
+              className={styles.refreshBtn}
+            />
+          ) : null}
+
+          <CopyButton
+            align="top"
+            className="cds--btn--sm"
+            iconDescription="Copy JSON"
+            kind="ghost"
+            onClick={() => navigator.clipboard.writeText(jsonString)}
+          />
+
+          <a download={fileName} href={downloadUrl}>
+            <IconButton kind="ghost" label="Download JSON" size="sm">
+              <Download />
+            </IconButton>
+          </a>
+
+          <IconButton
+            kind="ghost"
+            label={isMaximized ? 'Minimize' : 'Maximize'}
+            size="sm"
+            onClick={() => setIsMaximized((v) => !v)}
+          >
+            {isMaximized ? <Minimize /> : <Maximize />}
+          </IconButton>
+        </div>
+      </div>
+
+      <div className={styles.editorContainer}>
+        <AceEditor
+          mode="json"
+          theme="github"
+          value={jsonString}
+          readOnly={!canEdit}
+          onChange={(value) => onChangeJson?.(value)}
+          width="100%"
+          height={isMaximized ? '70vh' : '320px'}
+          fontSize={12}
+          setOptions={{
+            useWorker: false,
+            showPrintMargin: false,
+            tabSize: 2,
+            wrap: true,
+          }}
+        />
+      </div>
+    </div>
+  );
+}

package/src/components/shared/mapping-preview-panel/mapping-preview-panel.component.tsx

@@ -0,0 +1,82 @@
+import React from 'react';
+import { Tile, Toggle } from '@carbon/react';
+import { useTranslation } from 'react-i18next';
+
+import styles from './mapping-preview-panel.scss';
+
+type Props = {
+  title?: string;
+
+  // Controlled toggle state
+  zerosMode: boolean;
+  onToggleZerosMode: (value: boolean) => void;
+
+  // Row label (selected indicator)
+  rowLabel?: string;
+
+  // Column headers (disaggregation preview)
+  headers?: string[];
+
+  // Sample values (same length as headers)
+  sampleValues?: number[];
+
+  // Optional: allow parent to pass className for sizing
+  className?: string;
+};
+
+export default function MappingPreviewPanel({
+  title,
+  zerosMode,
+  onToggleZerosMode,
+  rowLabel,
+  headers = ['Age <5 | Male', 'Age <5 | Female', '5-14 | Male', '5-14 | Female'],
+  sampleValues = [120, 80, 75, 60],
+  className,
+}: Props) {
+  const { t } = useTranslation();
+
+  const safeValues = headers.map((_, i) => sampleValues[i] ?? 0);
+
+  return (
+    <Tile className={`${styles.tile} ${className ?? ''}`}>
+      <div className={styles.tileHeaderRow}>
+        <h3 className={styles.tileTitle}>{title ?? t('mappingPreview', 'Mapping Preview')}</h3>
+
+        <div className={styles.previewControls}>
+          <Toggle
+            id="zerosMode"
+            labelText=""
+            hideLabel
+            labelA={t('sampleValues', 'Sample Values')}
+            labelB={t('zerosMode', 'Zeros Mode')}
+            toggled={zerosMode}
+            onToggle={onToggleZerosMode}
+            size="sm"
+          />
+        </div>
+      </div>
+
+      <div className={styles.previewTableWrap}>
+        <table className={styles.previewTable}>
+          <thead>
+            <tr>
+              <th />
+              {headers.map((h) => (
+                <th key={h}>{h}</th>
+              ))}
+            </tr>
+          </thead>
+
+          <tbody>
+            <tr>
+              <td className={styles.previewRowLabel}>{rowLabel ?? 'EP01A. Malaria Cases'}</td>
+              {safeValues.map((v, i) => (
+                <td key={i}>{zerosMode ? 0 : v}</td>
+              ))}
+            </tr>
+          </tbody>
+        </table>
+      </div>
+    </Tile>
+  );
+}

package/src/components/shared/mapping-preview-panel/mapping-preview-panel.scss

@@ -0,0 +1,55 @@
+.tile {
+  padding: 1rem;
+  border-radius: 0.5rem;
+  display: flex;
+  flex-direction: column;
+  min-height: 0;
+}
+
+.tileHeaderRow {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 0.75rem;
+  margin-bottom: 0.75rem;
+}
+
+.tileTitle {
+  margin: 0;
+  font-weight: 600;
+}
+
+.previewControls {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+}
+
+.previewTableWrap {
+  border: 1px solid var(--cds-border-subtle, #e0e0e0);
+  border-radius: 0.375rem;
+  overflow: hidden;
+}
+
+.previewTable {
+  width: 100%;
+  border-collapse: collapse;
+}
+
+.previewTable thead th {
+  background: var(--cds-layer-02, #f4f4f4);
+  font-weight: 600;
+  text-align: left;
+  padding: 0.75rem;
+  border-bottom: 1px solid var(--cds-border-subtle, #e0e0e0);
+}
+
+.previewTable tbody td {
+  padding: 0.75rem;
+  border-bottom: 1px solid var(--cds-border-subtle, #e0e0e0);
+}
+
+.previewRowLabel {
+  font-weight: 600;
+  white-space: nowrap;
+}

package/src/components/shared/preview/query-results-preview.component.tsx

@@ -0,0 +1,204 @@
+import React from 'react';
+import {
+    Button,
+    InlineLoading,
+    InlineNotification,
+    DataTable,
+    Table,
+    TableBody,
+    TableCell,
+    TableContainer,
+    TableHead,
+    TableHeader,
+    TableRow,
+    CodeSnippet,
+    Accordion,
+    AccordionItem,
+    Tag,
+} from '@carbon/react';
+import { Play } from '@carbon/icons-react';
+
+import { previewSql, type SqlPreviewResponse } from '../../../resources/preview/sql-preview.api';
+
+type Props = {
+    title?: string;
+
+    sql: string;
+    params?: Record<string, any>;
+    maxRows?: number;
+
+    /**
+     * If false, user cannot run preview (e.g. missing dates)
+     */
+    canRun?: boolean;
+
+    /**
+     * Auto-run when inputs change (default false)
+     */
+    autoRun?: boolean;
+};
+
+export default function QueryResultsPreview({
+                                                title = 'Results preview',
+                                                sql,
+                                                params,
+                                                maxRows = 200,
+                                                canRun = true,
+                                                autoRun = false,
+                                            }: Props) {
+    const [loading, setLoading] = React.useState(false);
+    const [err, setErr] = React.useState<string | null>(null);
+    const [data, setData] = React.useState<SqlPreviewResponse | null>(null);
+
+    const run = React.useCallback(async () => {
+        if (!canRun) return;
+        if (!sql?.trim()) return;
+
+        const ac = new AbortController();
+        setLoading(true);
+        setErr(null);
+
+        try {
+            const resp = await previewSql({ sql, params, maxRows }, ac.signal);
+            setData(resp);
+        } catch (e: any) {
+            setErr(e?.message ?? 'Failed to preview query');
+            setData(null);
+        } finally {
+            setLoading(false);
+        }
+
+        return () => ac.abort();
+    }, [sql, params, maxRows, canRun]);
+
+    // optional autorun
+    React.useEffect(() => {
+        if (!autoRun) return;
+        if (!canRun) return;
+        if (!sql?.trim()) return;
+        run();
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [autoRun, canRun, sql, JSON.stringify(params ?? {}), maxRows]);
+
+    const columns = data?.columns ?? [];
+    const rows = data?.rows ?? [];
+
+    const headers = React.useMemo(() => columns.map((c) => ({ key: c, header: c })), [columns]);
+
+    const tableRows = React.useMemo(() => {
+        return rows.map((r, idx) => {
+            const obj: any = { id: String(idx) };
+            columns.forEach((c, i) => {
+                obj[c] = r[i];
+            });
+            return obj;
+        });
+    }, [rows, columns]);
+
+    const hasSql = Boolean(sql?.trim());
+    const canClickRun = Boolean(canRun && hasSql && !loading);
+
+    return (
+        <div
+            style={{
+                display: 'grid',
+                gap: '0.75rem',
+                padding: '1rem',
+                borderRadius: '0.5rem',
+                background: 'var(--cds-layer, #ffffff)',
+                border: '1px solid var(--cds-border-subtle, #e0e0e0)',
+            }}
+        >
+            {/* Header */}
+            <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', gap: '1rem' }}>
+                <div style={{ display: 'grid', gap: '0.25rem' }}>
+                    <div style={{ fontWeight: 600 }}>{title}</div>
+                    <div style={{ fontSize: '0.875rem', opacity: 0.75 }}>
+                        {canRun ? 'Ready to preview results.' : 'Select required parameters to enable preview.'}
+                    </div>
+                </div>
+
+                <Button kind="secondary" size="sm" renderIcon={Play} disabled={!canClickRun} onClick={() => run()}>
+                    Run preview
+                </Button>
+            </div>
+
+            {/* SQL (collapsible) */}
+            <Accordion align="start">
+                <AccordionItem title="SQL (click to expand)">
+                    <CodeSnippet type="multi" wrapText>
+                        {hasSql ? sql : '-- No SQL to preview yet'}
+                    </CodeSnippet>
+                </AccordionItem>
+            </Accordion>
+
+            {/* Status row */}
+            <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: '1rem' }}>
+                <div>
+                    {loading ? <InlineLoading description="Running preview…" /> : null}
+                    {!loading && err ? (
+                        <InlineNotification kind="error" lowContrast title="Preview error" subtitle={err} />
+                    ) : null}
+                </div>
+
+                {data && !loading && !err ? (
+                    <div style={{ display: 'flex', gap: '0.5rem', alignItems: 'center', flexWrap: 'wrap' }}>
+                        <Tag type="cool-gray" size="sm">
+                            Rows: {data.rowCount}
+                        </Tag>
+                        {data.truncated ? (
+                            <Tag type="red" size="sm">
+                                Truncated to {maxRows}
+                            </Tag>
+                        ) : (
+                            <Tag type="green" size="sm">
+                                Not truncated
+                            </Tag>
+                        )}
+                    </div>
+                ) : null}
+            </div>
+
+            {/* Results table */}
+            {data && !loading && !err ? (
+                <div
+                    style={{
+                        border: '1px solid var(--cds-border-subtle, #e0e0e0)',
+                        borderRadius: '0.25rem',
+                        overflow: 'hidden',
+                        background: 'var(--cds-layer, #ffffff)',
+                    }}
+                >
+                    <div style={{ maxHeight: '320px', overflow: 'auto' }}>
+                        <DataTable rows={tableRows} headers={headers} size="sm">
+                            {({ rows, headers, getHeaderProps, getRowProps }) => (
+                                <TableContainer>
+                                    <Table size="sm" useZebraStyles>
+                                        <TableHead>
+                                            <TableRow>
+                                                {headers.map((h) => (
+                                                    <TableHeader key={h.key} {...getHeaderProps({ header: h })}>
+                                                        {h.header}
+                                                    </TableHeader>
+                                                ))}
+                                            </TableRow>
+                                        </TableHead>
+                                        <TableBody>
+                                            {rows.map((row) => (
+                                                <TableRow key={row.id} {...getRowProps({ row })}>
+                                                    {row.cells.map((cell) => (
+                                                        <TableCell key={cell.id}>{String(cell.value ?? '')}</TableCell>
+                                                    ))}
+                                                </TableRow>
+                                            ))}
+                                        </TableBody>
+                                    </Table>
+                                </TableContainer>
+                            )}
+                        </DataTable>
+                    </div>
+                </div>
+            ) : null}
+        </div>
+    );
+}