@epcare/esm-report-builder 0.1.1-pre.39 → 0.1.1-pre.40

package/src/components/linelist/builder/column-debug-panel.component.tsx

@@ -0,0 +1,197 @@
+/**
+ * Column Debug Panel Component
+ *
+ * Displays detailed column information for debugging
+ * Shows ID, position, data definition config, source info, etc.
+ */
+
+import React from 'react';
+import { Button, Tag, CodeSnippet, Accordion, AccordionItem } from '@carbon/react';
+import { Settings, Information } from '@carbon/react/icons';
+import type { LinelistColumnDraft } from '../../../types/linelist-types';
+import styles from './column-debug-panel.scss';
+
+type Props = {
+  column: LinelistColumnDraft;
+  onClose: () => void;
+};
+
+export default function ColumnDebugPanel({ column, onClose }: Props) {
+  return (
+    <div className={styles.debugPanel}>
+      <div className={styles.header}>
+        <div className={styles.headerTitle}>
+          <Settings size={16} className={styles.icon} />
+          <span>Column Debug Info</span>
+        </div>
+        <Button kind="ghost" size="sm" onClick={onClose}>
+          Close
+        </Button>
+      </div>
+
+      <Accordion className={styles.accordion}>
+        {/* Basic Info */}
+        <AccordionItem title="Basic Information" open={true}>
+          <div className={styles.section}>
+            <DebugRow label="Column ID" value={column.id} type="uuid" />
+            <DebugRow label="Name" value={column.name} />
+            <DebugRow label="Description" value={column.description} />
+            <DebugRow label="Position (sortOrder)" value={column.sortOrder?.toString()} type="number" />
+            <DebugRow label="Data Type" value={column.dataDefinitionType} type="tag" />
+          </div>
+        </AccordionItem>
+
+        {/* Source Info */}
+        <AccordionItem title="Source Information" open={true}>
+          <div className={styles.section}>
+            {column.source ? (
+              <>
+                <DebugRow label="Data Source UUID" value={column.source.dataSourceUuid} type="uuid" />
+                <DebugRow label="Data Source Name" value={column.source.dataSourceUuid} />
+                <DebugRow label="Table" value={column.source.table} type="code" />
+                <DebugRow label="Field" value={column.source.field} type="code" />
+                <DebugRow label="Field Type" value={column.source.fieldType} type="tag" />
+                {column.source.conceptUuid && (
+                  <DebugRow label="Concept UUID" value={column.source.conceptUuid} type="uuid" />
+                )}
+                {column.source.attributeTypeUuid && (
+                  <DebugRow label="Attribute Type UUID" value={column.source.attributeTypeUuid} type="uuid" />
+                )}
+                {column.source.identifierTypeUuid && (
+                  <DebugRow label="Identifier Type UUID" value={column.source.identifierTypeUuid} type="uuid" />
+                )}
+              </>
+            ) : (
+              <div className={styles.warning}>
+                <Information size={16} />
+                <span>No source information available</span>
+              </div>
+            )}
+          </div>
+        </AccordionItem>
+
+        {/* Data Definition Config */}
+        <AccordionItem title="Data Definition Config" open={false}>
+          <div className={styles.section}>
+            {column.dataDefinitionConfig ? (
+              <pre className={styles.code}>{JSON.stringify(column.dataDefinitionConfig, null, 2)}</pre>
+            ) : (
+              <div className={styles.warning}>
+                <Information size={16} />
+                <span>No data definition config available</span>
+              </div>
+            )}
+          </div>
+        </AccordionItem>
+
+        {/* Repeat Resolution */}
+        <AccordionItem title="Repeat Resolution" open={false}>
+          <div className={styles.section}>
+            {column.repeatResolution ? (
+              <>
+                <DebugRow label="Strategy" value={column.repeatResolution.strategy} />
+                <DebugRow label="Order By" value={column.repeatResolution.orderBy} />
+                <DebugRow label="Restrict to Period" value={column.repeatResolution.restrictToPeriod?.toString()} type="boolean" />
+                <DebugRow label="Ignore Voided" value={column.repeatResolution.ignoreVoided?.toString()} type="boolean" />
+              </>
+            ) : (
+              <div className={styles.info}>
+                <Information size={16} />
+                <span>No repeat resolution configured</span>
+              </div>
+            )}
+          </div>
+        </AccordionItem>
+
+        {/* Display Settings */}
+        <AccordionItem title="Display Settings" open={false}>
+          <div className={styles.section}>
+            {column.display ? (
+              <>
+                <DebugRow label="Width" value={column.display.width?.toString()} type="number" />
+                <DebugRow label="Align" value={column.display.align} />
+                <DebugRow label="Sortable" value={column.display.sortable?.toString()} type="boolean" />
+                <DebugRow label="Filterable" value={column.display.filterable?.toString()} type="boolean" />
+                <DebugRow label="Format" value={column.display.format} />
+              </>
+            ) : (
+              <div className={styles.info}>
+                <Information size={16} />
+                <span>No display settings configured</span>
+              </div>
+            )}
+          </div>
+        </AccordionItem>
+
+        {/* Addition Info */}
+        <AccordionItem title="Addition Info" open={false}>
+          <div className={styles.section}>
+            {column.additionInfo ? (
+              <>
+                <DebugRow label="Added Via" value={column.additionInfo.addedVia} />
+                <DebugRow label="Added At" value={column.additionInfo.addedAt} />
+                <DebugRow label="Order Added" value={column.additionInfo.orderAdded?.toString()} type="number" />
+              </>
+            ) : (
+              <div className={styles.info}>
+                <Information size={16} />
+                <span>No addition info available</span>
+              </div>
+            )}
+          </div>
+        </AccordionItem>
+
+        {/* Raw JSON */}
+        <AccordionItem title="Raw Column JSON" open={false}>
+          <div className={styles.section}>
+            <CodeSnippet type="multi" feedback="Copied!">
+              {JSON.stringify(column, null, 2)}
+            </CodeSnippet>
+          </div>
+        </AccordionItem>
+      </Accordion>
+    </div>
+  );
+}
+
+function DebugRow({ label, value, type = 'text' }: { label: string; value: any; type?: string }) {
+  if (value === undefined || value === null || value === '') {
+    return (
+      <div className={styles.row}>
+        <span className={styles.label}>{label}:</span>
+        <span className={styles.valueEmpty}>(not set)</span>
+      </div>
+    );
+  }
+
+  let displayValue = value;
+
+  switch (type) {
+    case 'uuid':
+    case 'code':
+      displayValue = <code className={styles.codeInline}>{value}</code>;
+      break;
+    case 'tag':
+      displayValue = <Tag size="sm" type="cool-gray">{value}</Tag>;
+      break;
+    case 'boolean':
+      displayValue = (
+        <Tag size="sm" type={value === 'true' ? 'green' : 'red'}>
+          {value === 'true' ? 'Yes' : 'No'}
+        </Tag>
+      );
+      break;
+    case 'number':
+      displayValue = <Tag size="sm" type="blue">{value}</Tag>;
+      break;
+    default:
+      displayValue = value;
+  }
+
+  return (
+    <div className={styles.row}>
+      <span className={styles.label}>{label}:</span>
+      <span className={styles.value}>{displayValue}</span>
+    </div>
+  );
+}

package/src/components/linelist/builder/column-debug-panel.scss

@@ -0,0 +1,141 @@
+.debugPanel {
+  position: fixed;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  width: 90%;
+  max-width: 600px;
+  max-height: 80vh;
+  background-color: #f4f4f4;
+  border: 2px solid #0f62fe;
+  border-radius: 8px;
+  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
+  z-index: 9999;
+  display: flex;
+  flex-direction: column;
+
+  .header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 1rem;
+    background-color: #0f62fe;
+    color: white;
+    border-radius: 6px 6px 0 0;
+
+    .headerTitle {
+      display: flex;
+      align-items: center;
+      gap: 0.5rem;
+      font-weight: 600;
+    }
+
+    .icon {
+      // Icon styling
+    }
+  }
+
+  .accordion {
+    flex: 1;
+    overflow-y: auto;
+    padding: 1rem;
+
+    // Scrollbar styling
+    &::-webkit-scrollbar {
+      width: 8px;
+    }
+
+    &::-webkit-scrollbar-track {
+      background: #e0e0e0;
+      border-radius: 4px;
+    }
+
+    &::-webkit-scrollbar-thumb {
+      background: #8a8a8a;
+      border-radius: 4px;
+
+      &:hover {
+        background: #6f6f6f;
+      }
+    }
+  }
+
+  .section {
+    padding: 0.75rem 0;
+  }
+
+  .row {
+    display: flex;
+    align-items: flex-start;
+    gap: 0.75rem;
+    padding: 0.375rem 0;
+    border-bottom: 1px solid #e0e0e0;
+
+    &:last-child {
+      border-bottom: none;
+    }
+
+    .label {
+      font-weight: 500;
+      color: #525252;
+      min-width: 150px;
+      font-size: 0.875rem;
+    }
+
+    .value {
+      color: #161616;
+      font-size: 0.875rem;
+      word-break: break-all;
+    }
+
+    .valueEmpty {
+      color: #a8a8a8;
+      font-style: italic;
+      font-size: 0.875rem;
+    }
+  }
+
+  .codeInline {
+    background-color: #e0e0e0;
+    padding: 0.125rem 0.375rem;
+    border-radius: 3px;
+    font-family: 'SF Mono', 'Monaco', 'Inconsolata', monospace;
+    font-size: 0.8rem;
+    color: #0f62fe;
+  }
+
+  .code {
+    background-color: #1a1a1a;
+    color: #f4f4f4;
+    padding: 1rem;
+    border-radius: 4px;
+    overflow-x: auto;
+    font-family: 'SF Mono', 'Monaco', 'Inconsolata', monospace;
+    font-size: 0.8rem;
+    line-height: 1.5;
+    max-height: 300px;
+    overflow-y: auto;
+  }
+
+  .warning {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    padding: 0.75rem;
+    background-color: #fff8e1;
+    border-left: 3px solid #f1c21b;
+    border-radius: 4px;
+    color: #525252;
+  }
+
+  .info {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    padding: 0.75rem;
+    background-color: #e5f1ff;
+    border-left: 3px solid #0f62fe;
+    border-radius: 4px;
+    color: #525252;
+  }
+}

package/src/components/linelist/builder/encounter-diagnosis-column-modal.component.tsx

@@ -29,6 +29,8 @@ type Props = {
   onAddColumn: (column: LinelistColumnDraft) => void;
   /** Existing columns to check for duplicates */
   existingColumns?: LinelistColumnDraft[];
+  /** Column to edit (if provided, modal is in edit mode) */
+  editingColumn?: LinelistColumnDraft | null;
 };
 
 type StrategyOption = 'ALL_VALUES' | 'LATEST' | 'FIRST_WITHIN_PERIOD' | 'LAST_WITHIN_PERIOD';
@@ -52,6 +54,7 @@ const EncounterDiagnosisColumnModal: React.FC<Props> = ({
   onClose,
   onAddColumn,
   existingColumns = [],
+  editingColumn = null,
 }) => {
   const [conceptSelectorKey, setConceptSelectorKey] = useState(0);
   const [selectedConcept, setSelectedConcept] = useState<ConceptSummary | undefined>();
@@ -61,15 +64,6 @@ const EncounterDiagnosisColumnModal: React.FC<Props> = ({
   const [confirmedOnly, setConfirmedOnly] = useState(true);
   const [returnDisplay, setReturnDisplay] = useState(true);
 
-  /**
-   * Reset form state when modal opens/closes
-   */
-  useEffect(() => {
-    if (open) {
-      setConceptSelectorKey((k) => k + 1);
-    }
-  }, [open]);
-
   /**
    * Reset form state
    */
@@ -82,6 +76,33 @@ const EncounterDiagnosisColumnModal: React.FC<Props> = ({
     setReturnDisplay(true);
   }, []);
 
+  /**
+   * Reset form state when modal opens/closes
+   * Also populate form when editing existing column
+   */
+  useEffect(() => {
+    if (open) {
+      setConceptSelectorKey((k) => k + 1);
+      if (editingColumn) {
+        // Populate form with existing column data
+        const config = editingColumn.dataDefinitionConfig || {};
+        setSelectedConcept(editingColumn.source?.conceptUuid ? {
+          uuid: editingColumn.source.conceptUuid,
+          display: config.conceptName || editingColumn.name,
+          datatype: { name: editingColumn.source?.fieldType || 'TEXT' },
+        } as ConceptSummary : undefined);
+        setColumnName(editingColumn.name || '');
+        setStrategy(config.strategy || 'LAST_WITHIN_PERIOD');
+        setRank(config.rank || 'ANY');
+        setConfirmedOnly(config.confirmedOnly !== false);
+        setReturnDisplay(config.returnDisplay !== false);
+      } else {
+        // Reset for new column creation
+        resetForm();
+      }
+    }
+  }, [open, editingColumn, resetForm]);
+
   /**
    * Handle modal close
    */
@@ -108,9 +129,9 @@ const EncounterDiagnosisColumnModal: React.FC<Props> = ({
     // Allow empty concept selection to capture ALL diagnoses
     const finalColumnName = columnName?.trim() || (selectedConcept?.display || 'Diagnoses');
 
-    // Check for duplicate column names
+    // Check for duplicate column names (exclude current column when editing)
     const duplicateName = existingColumns.some(col =>
-      col.name.toLowerCase() === finalColumnName.toLowerCase()
+      col.id !== editingColumn?.id && col.name.toLowerCase() === finalColumnName.toLowerCase()
     );
     if (duplicateName) {
       // TODO: Show error notification
@@ -120,13 +141,13 @@ const EncounterDiagnosisColumnModal: React.FC<Props> = ({
     const now = new Date().toISOString();
 
     const newColumn: LinelistColumnDraft = {
-      id: `col-${now}-${selectedConcept?.uuid || 'all-diagnoses'}`,
+      id: editingColumn?.id || `col-${now}-${selectedConcept?.uuid || 'all-diagnoses'}`,
       name: finalColumnName,
-      description: selectedConcept ? `Diagnosis: ${selectedConcept.display}` : 'All encounter diagnoses',
+      description: editingColumn?.description || (selectedConcept ? `Diagnosis: ${selectedConcept.display}` : 'All encounter diagnoses'),
       source: {
         dataSourceUuid: 'encounter_diagnoses',
         dataSourceName: 'Encounter Diagnoses',
-        table: 'encounter_diagnosis',
+        table: 'encounter_diagnoses',
         field: selectedConcept?.uuid || '*',
         fieldType: 'TEXT',
         conceptUuid: selectedConcept?.uuid,
@@ -141,18 +162,18 @@ const EncounterDiagnosisColumnModal: React.FC<Props> = ({
         returnDisplay,
       },
       additionInfo: {
-        addedVia: 'VISUAL_SELECTOR',
-        addedAt: now,
-        orderAdded: existingColumns.length,
+        addedVia: editingColumn?.additionInfo?.addedVia || 'VISUAL_SELECTOR',
+        addedAt: editingColumn?.additionInfo?.addedAt || now,
+        orderAdded: editingColumn?.additionInfo?.orderAdded || existingColumns.length,
       },
-      display: {
+      display: editingColumn?.display || {
         width: 150,
         align: 'left',
         sortable: true,
         filterable: true,
         format: 'coded',
       },
-      sortOrder: existingColumns.length,
+      sortOrder: editingColumn?.sortOrder ?? existingColumns.length,
       repeatResolution: {
         strategy: strategy === 'ALL_VALUES' ? 'NONE' : 'LATEST',
         orderBy: 'encounter_date',
@@ -163,7 +184,7 @@ const EncounterDiagnosisColumnModal: React.FC<Props> = ({
 
     onAddColumn(newColumn);
     handleClose();
-  }, [selectedConcept, columnName, strategy, rank, confirmedOnly, returnDisplay, existingColumns, onAddColumn, handleClose]);
+  }, [selectedConcept, columnName, strategy, rank, confirmedOnly, returnDisplay, existingColumns, onAddColumn, handleClose, editingColumn]);
 
   /**
    * Check if form is valid
@@ -174,11 +195,11 @@ const EncounterDiagnosisColumnModal: React.FC<Props> = ({
     <Modal
       open={open}
       onRequestClose={handleClose}
-      modalHeading="Add Diagnosis Column"
+      modalHeading={editingColumn ? "Edit Diagnosis Column" : "Add Diagnosis Column"}
       modalLabel="Data Catalogue"
       size="md"
       preventCloseOnClickOutside
-      primaryButtonText="Add Column"
+      primaryButtonText={editingColumn ? "Save Changes" : "Add Column"}
       primaryButtonDisabled={!isFormValid}
       onRequestSubmit={handleSubmit}
       secondaryButtonText="Cancel"

package/src/components/linelist/builder/linelist-builder-workspace.component.tsx

@@ -47,7 +47,7 @@ import type {
 import type { EtlStructure } from '../../../types/etl/etl-types';
 import {
   draftToConfig,
-  isLinelistDraftReadyToCompile,
+  // isLinelistDraftReadyToCompile,
   // isLinelistDraftReadyToPublish,
   createEmptyDraft,
   // isLinelistDraftValid,
@@ -82,13 +82,10 @@ type Props = {};
  * This function populates the draft with all builder details from the saved report
  */
 function reportToDraft(report: LinelistReportDto): LinelistReportDraft {
-  console.log('🔴 reportToDraft called with:', report);
-
   let config: LinelistReportDefinitionConfig | null = null;
 
   try {
     config = report.configJson ? JSON.parse(report.configJson) : null;
-    console.log('Parsed config:', config);
   } catch (e) {
     console.error('Failed to parse report config:', e);
   }
@@ -357,7 +354,6 @@ function reportToDraft(report: LinelistReportDto): LinelistReportDraft {
   let indicatorRules: PopulationDefinition['indicatorRules'] = undefined;
 
   const configIndicatorRules = builderState?.indicatorRules || (config as any).indicatorRules;
-  console.log('🔴 configIndicatorRules:', configIndicatorRules);
   if (Array.isArray(configIndicatorRules) && configIndicatorRules.length > 0) {
     indicatorRules = configIndicatorRules.map((rule: any, idx: number) => ({
       id: rule.id || `rule-${idx}`,
@@ -367,18 +363,15 @@ function reportToDraft(report: LinelistReportDto): LinelistReportDraft {
       logicalOperator: rule.logicalOperator || 'AND',
       negate: rule.negate || false,
     }));
-    console.log('🔴 Loaded indicatorRules from config:', indicatorRules);
   }
 
   // Fall back to metaJson for buildMethod and indicator rules if not in config
   if (report.metaJson && (!indicatorRules || buildMethod === 'SQL_BUILDER')) {
     try {
       const meta = JSON.parse(report.metaJson);
-      console.log('🔴 Parsed metaJson:', meta);
       // Try to get buildMethod from metaJson as fallback
       if (meta.buildMethod && (meta.buildMethod === 'INDICATOR_BASED' || meta.buildMethod === 'VISUAL_FILTER' || meta.buildMethod === 'SQL_BUILDER')) {
         buildMethod = meta.buildMethod;
-        console.log('🔴 Using buildMethod from metaJson:', buildMethod);
       }
       // Also try to get indicator rules from metaJson as fallback
       if (!indicatorRules && Array.isArray(meta.indicatorRules) && meta.indicatorRules.length > 0) {
@@ -390,7 +383,6 @@ function reportToDraft(report: LinelistReportDto): LinelistReportDraft {
           logicalOperator: rule.logicalOperator || 'AND',
           negate: rule.negate || false,
         }));
-        console.log('🔴 Loaded indicatorRules from metaJson:', indicatorRules);
       }
     } catch (e) {
       console.warn('Failed to parse metaJson:', e);
@@ -437,9 +429,6 @@ function reportToDraft(report: LinelistReportDto): LinelistReportDraft {
       },
     ],
   };
-  console.log('🔴 Final population state:', population);
-  console.log('🔴 population.indicatorRules:', population.indicatorRules);
-  console.log('🔴 population.buildMethod:', population.buildMethod);
 
   // === CREATE THE DRAFT ===
   // Build population sources from primary datasource
@@ -503,7 +492,6 @@ function reportToDraft(report: LinelistReportDto): LinelistReportDraft {
     },
   };
 
-  console.log('🟢 Returning draft with builder details:', draft);
   return draft;
 }
 
@@ -581,12 +569,10 @@ const LinelistBuilderWorkspace: React.FC<Props> = () => {
       import('../../../resources/linelist/linelist-reports.api')
         .then(({ getLinelistReport }) => getLinelistReport(reportId))
         .then((report: LinelistReportDto) => {
-          console.error('🔴 LOADED REPORT:', report?.name, report);
           setInitialReport(report);
           setMode('edit');
           // Convert report to draft
           const draft = reportToDraft(report);
-          console.error('🟢 CONVERTED TO DRAFT:', draft);
           setDraft(draft);
         })
         .catch((err) => {
@@ -1229,14 +1215,6 @@ function getDefaultOperator(fieldType: FilterFieldType): FilterOperator {
   }
 }
 
-  // Debug: Check what's preventing readiness
-  const validationErrors = validateLinelistDraft(draft);
-  if (Object.keys(validationErrors).length > 0) {
-    console.log('⚠️ Draft validation errors:', validationErrors);
-  }
-  const isReady = isLinelistDraftReadyToCompile(draft);
-  console.log('🔴 Compile button state:', { compiling, hasReportUuid: !!initialReport?.uuid, isReady });
-
   if (loading) {
     return (
       <div className={styles.workspace}>