@openmrs/esm-report-builder 0.1.1-pre.101

package/src/components/report/design/panels/IndicatorPropertiesPanel.tsx

@@ -0,0 +1,389 @@
+import React from 'react';
+import {
+  Tabs,
+  Tab,
+  TabList,
+  TabPanels,
+  TabPanel,
+  TextInput,
+  Dropdown,
+  Button,
+  Tile,
+  ComboBox,
+  InlineLoading,
+  InlineNotification,
+  Tag,
+} from '@carbon/react';
+import { useTranslation } from 'react-i18next';
+
+import styles from './IndicatorPropertiesPanel.scss';
+
+type DropdownItem = { id: string; text: string };
+
+export type SelectedNode = {
+  id: string;
+  label?: string;
+  code?: string;
+
+  // Optional “domain” fields you can persist on your indicator node
+  conditionConceptUuid?: string;
+  conditionConceptLabel?: string;
+};
+
+export type ConceptSummary = {
+  uuid: string;
+  display: string;
+
+  // Optional fields if you request v=full (or v=custom)
+  conceptClass?: { display?: string };
+  datatype?: { display?: string };
+  mappings?: Array<{
+    display?: string;
+    conceptReferenceTerm?: { display?: string };
+    conceptMapType?: { display?: string };
+  }>;
+};
+
+type Props = {
+  selected?: SelectedNode | null;
+
+  onChangeSelectedLabel: (value: string) => void;
+  onChangeSelectedCode: (value: string) => void;
+
+  // NEW: concept selection (persist onto selected node in your tree)
+  onChangeSelectedConditionConcept?: (payload: { uuid: string; label: string } | null) => void;
+
+  mappingCategoryOptions: DropdownItem[];
+  mappingAttrOptions: DropdownItem[];
+
+  selectedCoc?: DropdownItem | null;
+  selectedAoc?: DropdownItem | null;
+  onChangeCoc?: (item: DropdownItem) => void;
+  onChangeAoc?: (item: DropdownItem) => void;
+
+  onRemoveOverride?: () => void;
+
+  /**
+   * ✅ API hooks (pass from container)
+   * - searchConcepts: queries OpenMRS concept endpoint (q=..., v=custom/full)
+   * - previewIndicator: optional “test run” endpoint for the selected indicator node
+   */
+  searchConcepts?: (query: string) => Promise<ConceptSummary[]>;
+  previewIndicator?: (nodeId: string) => Promise<{ rows: number; sample?: any[] }>;
+};
+
+function useDebouncedValue<T>(value: T, delayMs: number) {
+  const [debounced, setDebounced] = React.useState(value);
+  React.useEffect(() => {
+    const t = window.setTimeout(() => setDebounced(value), delayMs);
+    return () => window.clearTimeout(t);
+  }, [value, delayMs]);
+  return debounced;
+}
+
+export default function IndicatorPropertiesPanel({
+                                                   selected,
+                                                   onChangeSelectedLabel,
+                                                   onChangeSelectedCode,
+                                                   onChangeSelectedConditionConcept,
+                                                   mappingCategoryOptions,
+                                                   mappingAttrOptions,
+                                                   selectedCoc,
+                                                   selectedAoc,
+                                                   onChangeCoc,
+                                                   onChangeAoc,
+                                                   onRemoveOverride,
+                                                   searchConcepts,
+                                                   previewIndicator,
+                                                 }: Props) {
+  const { t } = useTranslation();
+
+  // ----------------------------
+  // Concept search (API-backed)
+  // ----------------------------
+  const [conceptQuery, setConceptQuery] = React.useState('');
+  const debouncedQuery = useDebouncedValue(conceptQuery, 300);
+
+  const [conceptItems, setConceptItems] = React.useState<ConceptSummary[]>([]);
+  const [conceptLoading, setConceptLoading] = React.useState(false);
+  const [conceptError, setConceptError] = React.useState<string | null>(null);
+
+  const selectedConceptUuid = selected?.conditionConceptUuid ?? '';
+  const selectedConceptLabel = selected?.conditionConceptLabel ?? '';
+
+  // track selected concept object if it exists in list
+  const selectedConceptItem = React.useMemo(() => {
+    if (!selectedConceptUuid) return null;
+    return (
+        conceptItems.find((c) => c.uuid === selectedConceptUuid) ?? {
+          uuid: selectedConceptUuid,
+          display: selectedConceptLabel || selectedConceptUuid,
+        }
+    );
+  }, [conceptItems, selectedConceptUuid, selectedConceptLabel]);
+
+  React.useEffect(() => {
+    let cancelled = false;
+
+    async function run() {
+      if (!searchConcepts) return; // API not wired yet
+      const q = (debouncedQuery ?? '').trim();
+      if (!q || q.length < 2) {
+        setConceptItems([]);
+        setConceptError(null);
+        return;
+      }
+
+      try {
+        setConceptLoading(true);
+        setConceptError(null);
+        const results = await searchConcepts(q);
+        if (!cancelled) setConceptItems(results ?? []);
+      } catch (e: any) {
+        if (!cancelled) setConceptError(e?.message ?? 'Failed to search concepts');
+      } finally {
+        if (!cancelled) setConceptLoading(false);
+      }
+    }
+
+    run();
+    return () => {
+      cancelled = true;
+    };
+  }, [debouncedQuery, searchConcepts]);
+
+  // ----------------------------
+  // Preview / Test (API-backed)
+  // ----------------------------
+  const [previewLoading, setPreviewLoading] = React.useState(false);
+  const [previewError, setPreviewError] = React.useState<string | null>(null);
+  const [previewInfo, setPreviewInfo] = React.useState<{ rows: number; sample?: any[] } | null>(null);
+
+  const runPreview = async () => {
+    if (!previewIndicator || !selected?.id) return;
+    try {
+      setPreviewLoading(true);
+      setPreviewError(null);
+      const res = await previewIndicator(selected.id);
+      setPreviewInfo(res);
+    } catch (e: any) {
+      setPreviewError(e?.message ?? 'Failed to preview indicator');
+      setPreviewInfo(null);
+    } finally {
+      setPreviewLoading(false);
+    }
+  };
+
+  const isEmpty = !selected;
+
+  return (
+      <Tile className={styles.tile}>
+        <div className={styles.tileHeader}>
+          <h3 className={styles.tileTitle}>{t('indicatorProperties', 'Indicator Properties')}</h3>
+          {isEmpty ? (
+              <div className={styles.tileHint}>{t('selectNodeHint', 'Select an indicator/row to edit properties')}</div>
+          ) : null}
+        </div>
+
+        <Tabs>
+          <TabList aria-label={t('propertiesTabs', 'Properties tabs')}>
+            <Tab>{t('details', 'Details')}</Tab>
+            <Tab>{t('disaggregation', 'Disaggregation')}</Tab>
+            <Tab>{t('mapping', 'Mapping')}</Tab>
+            <Tab>{t('api', 'API')}</Tab>
+          </TabList>
+
+          <TabPanels>
+            {/* ---------------- Details ---------------- */}
+            <TabPanel>
+              <div className={styles.formGrid}>
+                <TextInput
+                    id="nodeLabel"
+                    labelText={t('label', 'Label')}
+                    value={selected?.label ?? ''}
+                    onChange={(e) => onChangeSelectedLabel(e.target.value)}
+                    placeholder={t('selectNode', 'Select a node to edit')}
+                    disabled={isEmpty}
+                />
+
+                <TextInput
+                    id="nodeCode"
+                    labelText={t('codeOptional', 'Code (optional for grouping nodes)')}
+                    value={selected?.code ?? ''}
+                    onChange={(e) => onChangeSelectedCode(e.target.value)}
+                    disabled={isEmpty}
+                />
+              </div>
+
+              <div className={styles.note}>
+                {t(
+                    'noteGroups',
+                    'Note: Nodes with children act as groups. Leaf nodes act as indicators and will appear as rows in the output tables.',
+                )}
+              </div>
+            </TabPanel>
+
+            {/* ---------------- Disaggregation ---------------- */}
+            <TabPanel>
+              <div className={styles.placeholder}>
+                {t('disaggPlaceholder', 'Disaggregation settings will go here.')}
+              </div>
+            </TabPanel>
+
+            {/* ---------------- Mapping ---------------- */}
+            <TabPanel>
+              <div className={styles.formGrid}>
+                <TextInput
+                    id="indicatorCode"
+                    labelText={t('code', 'Code')}
+                    value={selected?.code ?? ''}
+                    onChange={(e) => onChangeSelectedCode(e.target.value)}
+                    disabled={isEmpty}
+                />
+
+                <TextInput
+                    id="dataElementId"
+                    labelText={t('dataElementId', 'Data Element ID')}
+                    value={selected?.code ? `${selected.code}_Cases` : ''}
+                    readOnly
+                />
+
+                <Dropdown
+                    id="coc"
+                    label=""
+                    titleText={t('categoryOptionCombo', 'Category Option Combo')}
+                    items={mappingCategoryOptions}
+                    itemToString={(item) => (item ? item.text : '')}
+                    selectedItem={selectedCoc ?? null}
+                    onChange={(e) => onChangeCoc?.(e.selectedItem as DropdownItem)}
+                />
+
+                <Dropdown
+                    id="aoc"
+                    label=""
+                    titleText={t('attributeOptionCombo', 'Attribute Option Combo')}
+                    items={mappingAttrOptions}
+                    itemToString={(item) => (item ? item.text : '')}
+                    selectedItem={selectedAoc ?? null}
+                    onChange={(e) => onChangeAoc?.(e.selectedItem as DropdownItem)}
+                />
+              </div>
+
+              <div className={styles.mappingActions}>
+                <Button size="sm" kind="secondary" onClick={() => onRemoveOverride?.()}>
+                  {t('removeOverride', 'Remove Override')}
+                </Button>
+              </div>
+            </TabPanel>
+
+            {/* ---------------- API ---------------- */}
+            <TabPanel>
+              {!searchConcepts ? (
+                  <InlineNotification
+                      kind="info"
+                      lowContrast
+                      title={t('apiNotWired', 'API not wired yet')}
+                      subtitle={t(
+                          'apiNotWiredHint',
+                          'Pass searchConcepts() from your container using OpenMRS REST (ws/rest/v1/concept?q=...).',
+                      )}
+                  />
+              ) : null}
+
+              <div className={styles.apiBlock}>
+                <ComboBox
+                    id="conceptSearch"
+                    titleText={t('conditionConcept', 'Condition concept')}
+                    placeholder={t('searchConcept', 'Search concept...')}
+                    items={conceptItems}
+                    itemToString={(item) => (item ? item.display : '')}
+                    selectedItem={selectedConceptItem as any}
+                    onInputChange={(text) => setConceptQuery(text ?? '')}
+                    onChange={(e) => {
+                      const item = e.selectedItem as ConceptSummary | null;
+                      if (!onChangeSelectedConditionConcept) return;
+                      if (!item) onChangeSelectedConditionConcept(null);
+                      else onChangeSelectedConditionConcept({ uuid: item.uuid, label: item.display });
+                    }}
+                    disabled={isEmpty}
+                />
+
+                {conceptLoading ? (
+                    <div style={{ marginTop: '0.75rem' }}>
+                      <InlineLoading description={t('searching', 'Searching...')} />
+                    </div>
+                ) : null}
+
+                {conceptError ? (
+                    <div style={{ marginTop: '0.75rem' }}>
+                      <InlineNotification kind="error" lowContrast title={t('error', 'Error')} subtitle={conceptError} />
+                    </div>
+                ) : null}
+
+                {selectedConceptItem ? (
+                    <div className={styles.conceptSummary}>
+                      <div style={{ display: 'flex', gap: '0.5rem', flexWrap: 'wrap', alignItems: 'center' }}>
+                        <strong>{selectedConceptItem.display}</strong>
+                        <Tag size="sm" type="gray">
+                          {selectedConceptItem.uuid}
+                        </Tag>
+                        {selectedConceptItem.conceptClass?.display ? (
+                            <Tag size="sm" type="blue">
+                              {selectedConceptItem.conceptClass.display}
+                            </Tag>
+                        ) : null}
+                        {selectedConceptItem.datatype?.display ? (
+                            <Tag size="sm" type="teal">
+                              {selectedConceptItem.datatype.display}
+                            </Tag>
+                        ) : null}
+                      </div>
+
+                      {selectedConceptItem.mappings?.length ? (
+                          <div style={{ marginTop: '0.5rem', fontSize: '0.875rem', opacity: 0.85 }}>
+                            {t('mappings', 'Mappings')}: {selectedConceptItem.mappings.slice(0, 3).map((m) => m.display).filter(Boolean).join(' • ')}
+                            {selectedConceptItem.mappings.length > 3 ? ' …' : ''}
+                          </div>
+                      ) : null}
+                    </div>
+                ) : null}
+              </div>
+
+              <div className={styles.apiActions}>
+                <Button
+                    size="sm"
+                    kind="primary"
+                    onClick={runPreview}
+                    disabled={!previewIndicator || !selected?.id}
+                >
+                  {t('preview', 'Preview')}
+                </Button>
+
+                {previewLoading ? <InlineLoading description={t('running', 'Running...')} /> : null}
+              </div>
+
+              {previewError ? (
+                  <div style={{ marginTop: '0.75rem' }}>
+                    <InlineNotification kind="error" lowContrast title={t('previewFailed', 'Preview failed')} subtitle={previewError} />
+                  </div>
+              ) : null}
+
+              {previewInfo ? (
+                  <div className={styles.previewSummary}>
+                    <div style={{ fontWeight: 600 }}>{t('previewResult', 'Preview result')}</div>
+                    <div style={{ marginTop: '0.25rem' }}>
+                      {t('rows', 'Rows')}: <strong>{previewInfo.rows}</strong>
+                    </div>
+                    {previewInfo.sample?.length ? (
+                        <pre style={{ marginTop: '0.5rem', overflow: 'auto' }}>
+                    {JSON.stringify(previewInfo.sample.slice(0, 5), null, 2)}
+                  </pre>
+                    ) : null}
+                  </div>
+              ) : null}
+            </TabPanel>
+          </TabPanels>
+        </Tabs>
+      </Tile>
+  );
+}

package/src/components/report/design/panels/JsonPreviewPanel.scss

@@ -0,0 +1,32 @@
+@use '@carbon/layout';
+
+.headerRow {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: layout.$spacing-03;
+}
+
+.title {
+  margin: 0;
+}
+
+.tools {
+  display: flex;
+  gap: layout.$spacing-02;
+  align-items: center;
+}
+
+.editorContainer {
+  padding: layout.$spacing-03;
+
+  :global(.ace_editor) {
+    border: 1px solid var(--cds-border-subtle, #e0e0e0);
+    border-radius: 4px;
+  }
+}
+
+.maximized {
+  position: relative;
+  z-index: 5;
+}

package/src/components/report/design/panels/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/report/design/panels/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/report/design/panels/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;
+}