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

package/src/components/linelist/definition/panels/column-selector-panel.scss

@@ -0,0 +1,100 @@
+.column-selector-container {
+  padding: 1rem 0;
+}
+
+.column-selector-error {
+  margin-bottom: 1rem;
+}
+
+.column-selector-table-selector {
+  padding: 1rem;
+  border: 1px solid #e0e0e0;
+  border-radius: 4px;
+  margin-bottom: 1.5rem;
+}
+
+.column-selector-section-title {
+  margin-bottom: 1rem;
+  font-size: 1rem;
+  font-weight: 600;
+}
+
+.column-selector-column-list {
+  margin-top: 1rem;
+}
+
+.column-selector-helper-text {
+  font-size: 0.875rem;
+  color: #525252;
+  margin-bottom: 0.5rem;
+}
+
+.column-selector-chips {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.5rem;
+}
+
+.column-selector-chips button {
+  margin-right: 0;
+}
+
+.column-selector-column-type {
+  font-size: 0.75rem;
+  color: #525252;
+  margin-left: 0.25rem;
+}
+
+.column-selector-empty-state {
+  text-align: center;
+  padding: 2rem;
+  color: #525252;
+  font-size: 0.875rem;
+}
+
+.column-selector-sql-templates {
+  padding: 1rem;
+  border: 1px solid #e0e0e0;
+  border-radius: 4px;
+  margin-bottom: 1.5rem;
+}
+
+.column-selector-template-label {
+  font-size: 0.875rem;
+  font-weight: 600;
+  margin-bottom: 0.5rem;
+}
+
+.column-selector-template-buttons {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.5rem;
+}
+
+.column-selector-table {
+  margin-top: 1.5rem;
+}
+
+.column-selector-order-cell {
+  width: 50px;
+  text-align: center;
+  font-weight: 600;
+}
+
+.column-selector-actions-cell {
+  width: 200px;
+}
+
+.column-selector-expanded-row {
+  background-color: #f4f4f4;
+}
+
+.column-selector-expanded-content {
+  padding: 1rem;
+}
+
+.transformationSection {
+  margin-top: 1rem;
+  padding-top: 1rem;
+  border-top: 1px solid #e0e0e0;
+}

package/src/components/linelist/definition/panels/custom-sql-column-modal.component.tsx

@@ -0,0 +1,248 @@
+/**
+ * Custom SQL Column Modal
+ *
+ * Lets users add a custom column backed by a SQL expression.
+ * The SQL runs per-row and can reference the patient/client ID via
+ * the :patient_id or :patient_id bind parameter.
+ */
+
+import React, { useState, useEffect } from 'react';
+import {
+  Modal,
+  Stack,
+  TextInput,
+  TextArea,
+  InlineNotification,
+  Button,
+  Toggle,
+  CodeSnippet,
+} from '@carbon/react';
+
+export type CustomSqlColumnConfig = {
+  name: string;
+  description?: string;
+  sql: string;
+  repeatResolution?: boolean;
+};
+
+type Props = {
+  open: boolean;
+  onClose: () => void;
+  onSave: (config: CustomSqlColumnConfig) => void;
+  /** Existing column names, used to prevent duplicates */
+  existingColumnNames?: string[];
+  /** The patient/client ID column alias used by the base cohort SQL */
+  idColumnAlias?: 'patient_id' | 'patient_id';
+  /** Name of the current primary datasource (for display) */
+  primaryDatasourceName?: string;
+};
+
+const EXAMPLES = [
+  {
+    label: 'Last visit date',
+    sql: 'SELECT MAX(encounter_datetime) FROM encounter WHERE patient_id = :patient_id',
+  },
+  {
+    label: 'Latest CD4 count',
+    sql: "SELECT value_numeric FROM obs WHERE patient_id = :patient_id AND concept_id = 5497 ORDER BY obs_datetime DESC LIMIT 1",
+  },
+  {
+    label: 'Current ART regimen',
+    sql: "SELECT value_text FROM obs WHERE patient_id = :patient_id AND concept_id = 1085 ORDER BY obs_datetime DESC LIMIT 1",
+  },
+];
+
+const CustomSqlColumnModal: React.FC<Props> = ({
+  open,
+  onClose,
+  onSave,
+  existingColumnNames = [],
+  idColumnAlias = 'patient_id',
+  primaryDatasourceName = '',
+}) => {
+  const [name, setName] = useState('');
+  const [description, setDescription] = useState('');
+  const [sql, setSql] = useState('');
+  const [useRepeatResolution, setUseRepeatResolution] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+
+  // Reset state when modal opens
+  useEffect(() => {
+    if (open) {
+      setName('');
+      setDescription('');
+      setSql('');
+      setUseRepeatResolution(false);
+      setError(null);
+    }
+  }, [open]);
+
+  const handleSave = () => {
+    // Validate name
+    if (!name.trim()) {
+      setError('Column name is required');
+      return;
+    }
+
+    // Check for duplicate name
+    if (existingColumnNames.some((n) => n.toLowerCase() === name.trim().toLowerCase())) {
+      setError('A column with this name already exists');
+      return;
+    }
+
+    // Validate SQL
+    if (!sql.trim()) {
+      setError('SQL expression is required');
+      return;
+    }
+
+    // Warn (but allow) if SQL doesn't reference the patient/client ID
+    const paramPattern = /:(patient_id|patient_id|clientId|patientId)\b/i;
+    if (!paramPattern.test(sql)) {
+      setError(
+        `SQL should reference :${idColumnAlias} to return a value per patient. ` +
+          'Add it to your WHERE clause.'
+      );
+      return;
+    }
+
+    onSave({
+      name: name.trim(),
+      description: description.trim() || undefined,
+      sql: sql.trim(),
+      repeatResolution: useRepeatResolution,
+    });
+    onClose();
+  };
+
+  return (
+    <Modal
+      open={open}
+      onRequestClose={onClose}
+      onRequestSubmit={handleSave}
+      modalHeading="Add Custom SQL Column"
+      modalLabel="Custom Column"
+      primaryButtonText="Add Column"
+      secondaryButtonText="Cancel"
+      size="lg"
+      preventCloseOnClickOutside
+    >
+      <Stack gap={5}>
+        <p>
+          Write a SQL expression that returns a single value for each patient. Use{' '}
+          <code>:{idColumnAlias}</code> as a bind parameter — it will be replaced with the
+          patient/client ID for each row in the report.
+        </p>
+
+        {/* Datasource Info */}
+        {primaryDatasourceName && (
+          <InlineNotification
+            kind="info"
+            title="About Data Sources"
+            subtitle={`This column will be associated with your primary datasource: "${primaryDatasourceName}". To use a different datasource, go to the Data Sources panel and set it as primary first.`}
+            lowContrast
+          />
+        )}
+        {!primaryDatasourceName && (
+          <InlineNotification
+            kind="warning"
+            title="No Primary Data Source"
+            subtitle="Custom SQL columns need a primary datasource. Please select a datasource in the Data Sources panel before adding custom columns."
+            lowContrast
+          />
+        )}
+
+        {error && (
+          <InlineNotification
+            kind="error"
+            title="Validation Error"
+            subtitle={error}
+            hideCloseButton
+          />
+        )}
+
+        <TextInput
+          id="custom-column-name"
+          labelText="Column Name *"
+          placeholder="e.g., Last Visit Date"
+          value={name}
+          onChange={(e) => {
+            setName((e.target as HTMLInputElement).value);
+            setError(null);
+          }}
+        />
+
+        <TextInput
+          id="custom-column-description"
+          labelText="Description (optional)"
+          placeholder="What this column represents"
+          value={description}
+          onChange={(e) => setDescription((e.target as HTMLInputElement).value)}
+        />
+
+        <TextArea
+          id="custom-column-sql"
+          labelText="SQL Expression *"
+          placeholder={`SELECT ... FROM ... WHERE patient_id = :${idColumnAlias}`}
+          value={sql}
+          onChange={(e) => {
+            setSql((e.target as HTMLTextAreaElement).value);
+            setError(null);
+          }}
+          rows={6}
+          helperText={`The :${idColumnAlias} parameter is replaced with each patient's ID. The query must return a single value.`}
+        />
+
+        <Toggle
+          id="custom-column-repeat"
+          labelText="May return multiple values (configure repeat resolution)"
+          labelA="No"
+          labelB="Yes"
+          toggled={useRepeatResolution}
+          onToggle={setUseRepeatResolution}
+        />
+
+        {useRepeatResolution && (
+          <InlineNotification
+            kind="info"
+            title="Repeat Resolution"
+            subtitle="The most recent value (LATEST strategy) will be used by default. You can adjust this later in the column settings."
+            hideCloseButton
+            lowContrast
+          />
+        )}
+
+        {/* Examples */}
+        <div>
+          <p style={{ fontWeight: 600, marginBottom: '0.5rem' }}>Examples (click to use):</p>
+          <Stack gap={2}>
+            {EXAMPLES.map((ex) => (
+              <Button
+                key={ex.label}
+                kind="ghost"
+                size="sm"
+                onClick={() => {
+                  setSql(ex.sql);
+                  if (!name) setName(ex.label);
+                  setError(null);
+                }}
+                style={{ justifyContent: 'flex-start', textAlign: 'left' }}
+              >
+                {ex.label}
+              </Button>
+            ))}
+          </Stack>
+        </div>
+
+        {sql && (
+          <div>
+            <p style={{ fontWeight: 600, marginBottom: '0.25rem' }}>Your SQL:</p>
+            <CodeSnippet type="multi">{sql}</CodeSnippet>
+          </div>
+        )}
+      </Stack>
+    </Modal>
+  );
+};
+
+export default CustomSqlColumnModal;

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

@@ -0,0 +1,300 @@
+/**
+ * Encounter Diagnosis Column Modal Component
+ *
+ * Allows users to create encounter diagnosis-based columns using concept search
+ * Uses the same pattern as base indicator creation (Search + FilterableMultiSelect)
+ */
+
+import React, { useState, useCallback, useEffect } from 'react';
+import {
+  Modal,
+  TextInput,
+  Select,
+  SelectItem,
+  Toggle,
+  Stack,
+  FormGroup,
+} from '@carbon/react';
+import ConceptSelector from '../../../shared/concept-selector.component';
+import type { ConceptSummary } from '../../../../resources/concepts/concept-types';
+import type { LinelistColumnDraft } from '../../../../types/linelist-types';
+import styles from './encounter-diagnosis-column-modal.scss';
+
+type Props = {
+  /** Whether the modal is open */
+  open: boolean;
+  /** Callback when modal is closed */
+  onClose: () => void;
+  /** Callback when a new column is created */
+  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';
+type RankOption = 'PRIMARY' | 'SECONDARY' | 'ANY';
+
+const STRATEGY_OPTIONS: Array<{ value: StrategyOption; label: string; description: string }> = [
+  { value: 'ALL_VALUES', label: 'All Values', description: 'Return all diagnoses as comma-separated list' },
+  { value: 'LATEST', label: 'Latest', description: 'Most recent diagnosis' },
+  { value: 'FIRST_WITHIN_PERIOD', label: 'First in Period', description: 'First diagnosis within reporting period' },
+  { value: 'LAST_WITHIN_PERIOD', label: 'Last in Period', description: 'Last diagnosis within reporting period' },
+];
+
+const RANK_OPTIONS: Array<{ value: RankOption; label: string; description: string }> = [
+  { value: 'PRIMARY', label: 'Primary Only', description: 'Only primary diagnoses' },
+  { value: 'SECONDARY', label: 'Secondary Only', description: 'Only secondary diagnoses' },
+  { value: 'ANY', label: 'Any', description: 'Both primary and secondary diagnoses' },
+];
+
+const EncounterDiagnosisColumnModal: React.FC<Props> = ({
+  open,
+  onClose,
+  onAddColumn,
+  existingColumns = [],
+  editingColumn = null,
+}) => {
+  const [conceptSelectorKey, setConceptSelectorKey] = useState(0);
+  const [selectedConcept, setSelectedConcept] = useState<ConceptSummary | undefined>();
+  const [columnName, setColumnName] = useState('');
+  const [strategy, setStrategy] = useState<StrategyOption>('LAST_WITHIN_PERIOD');
+  const [rank, setRank] = useState<RankOption>('ANY');
+  const [confirmedOnly, setConfirmedOnly] = useState(true);
+  const [returnDisplay, setReturnDisplay] = useState(true);
+
+  /**
+   * Reset form state
+   */
+  const resetForm = useCallback(() => {
+    setSelectedConcept(undefined);
+    setColumnName('');
+    setStrategy('LAST_WITHIN_PERIOD');
+    setRank('ANY');
+    setConfirmedOnly(true);
+    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
+   */
+  const handleClose = useCallback(() => {
+    resetForm();
+    onClose();
+  }, [resetForm, onClose]);
+
+  /**
+   * Handle concept selection
+   */
+  const handleConceptSelect = useCallback((concept: ConceptSummary) => {
+    setSelectedConcept(concept);
+    // Auto-generate column name from concept name if not set
+    if (!columnName) {
+      setColumnName(concept.display);
+    }
+  }, [columnName]);
+
+  /**
+   * Handle form submission
+   */
+  const handleSubmit = useCallback(() => {
+    // Allow empty concept selection to capture ALL diagnoses
+    const finalColumnName = columnName?.trim() || (selectedConcept?.display || 'Diagnoses');
+
+    // Check for duplicate column names (exclude current column when editing)
+    const duplicateName = existingColumns.some(col =>
+      col.id !== editingColumn?.id && col.name.toLowerCase() === finalColumnName.toLowerCase()
+    );
+    if (duplicateName) {
+      // TODO: Show error notification
+      return;
+    }
+
+    const now = new Date().toISOString();
+
+    const newColumn: LinelistColumnDraft = {
+      id: editingColumn?.id || `col-${now}-${selectedConcept?.uuid || 'all-diagnoses'}`,
+      name: finalColumnName,
+      description: editingColumn?.description || (selectedConcept ? `Diagnosis: ${selectedConcept.display}` : 'All encounter diagnoses'),
+      source: {
+        dataSourceUuid: 'encounter_diagnoses',
+        dataSourceName: 'Encounter Diagnoses',
+        table: 'encounter_diagnoses',
+        field: selectedConcept?.uuid || '*',
+        fieldType: 'TEXT',
+        conceptUuid: selectedConcept?.uuid,
+      },
+      dataDefinitionType: 'ENCOUNTER_DIAGNOSIS',
+      dataDefinitionConfig: {
+        conceptUuid: selectedConcept?.uuid,
+        conceptName: selectedConcept?.display,
+        rank,
+        confirmedOnly,
+        strategy,
+        returnDisplay,
+      },
+      additionInfo: {
+        addedVia: editingColumn?.additionInfo?.addedVia || 'VISUAL_SELECTOR',
+        addedAt: editingColumn?.additionInfo?.addedAt || now,
+        orderAdded: editingColumn?.additionInfo?.orderAdded || existingColumns.length,
+      },
+      display: editingColumn?.display || {
+        width: 150,
+        align: 'left',
+        sortable: true,
+        filterable: true,
+        format: 'coded',
+      },
+      sortOrder: editingColumn?.sortOrder ?? existingColumns.length,
+      repeatResolution: {
+        strategy: strategy === 'ALL_VALUES' ? 'NONE' : 'LATEST',
+        orderBy: 'encounter_date',
+        restrictToPeriod: true,
+        ignoreVoided: true,
+      },
+    };
+
+    onAddColumn(newColumn);
+    handleClose();
+  }, [selectedConcept, columnName, strategy, rank, confirmedOnly, returnDisplay, existingColumns, onAddColumn, handleClose, editingColumn]);
+
+  /**
+   * Check if form is valid
+   */
+  const isFormValid = columnName?.trim();
+
+  return (
+    <Modal
+      open={open}
+      onRequestClose={handleClose}
+      modalHeading={editingColumn ? "Edit Diagnosis Column" : "Add Diagnosis Column"}
+      modalLabel="Data Catalogue"
+      size="md"
+      preventCloseOnClickOutside
+      primaryButtonText={editingColumn ? "Save Changes" : "Add Column"}
+      primaryButtonDisabled={!isFormValid}
+      onRequestSubmit={handleSubmit}
+      secondaryButtonText="Cancel"
+      onSecondarySubmit={handleClose}
+    >
+      <div className={styles.content}>
+        <Stack gap={6}>
+          {/* Concept Selector - Optional for filtering by specific diagnosis */}
+          <div className={styles.conceptSection}>
+            <div className={styles.conceptSectionHeader}>
+              <p className={styles.helperText}>
+                Leave empty to capture ALL encounter diagnoses, or search for a specific diagnosis condition (e.g., "Malaria", "HIV", "TB").
+              </p>
+            </div>
+            <ConceptSelector
+              key={conceptSelectorKey}
+              openKey={conceptSelectorKey}
+              selectedConcept={selectedConcept}
+              onSelect={handleConceptSelect}
+              onClear={() => setSelectedConcept(undefined)}
+              label="Search for Diagnosis Concept"
+              placeholder="Type to search for diagnosis concepts..."
+              showAdvanced={false}
+            />
+          </div>
+
+          {/* Column Configuration */}
+          <FormGroup legendText="Column Configuration">
+            <Stack gap={4}>
+              {/* Column Name */}
+              <TextInput
+                id="diagnosis-column-name"
+                labelText="Column Name *"
+                placeholder="Enter display name for this column"
+                value={columnName}
+                onChange={(e) => setColumnName(e.target.value)}
+              />
+
+              {/* Rank */}
+              <Select
+                id="diagnosis-rank"
+                labelText="Diagnosis Rank"
+                value={rank}
+                onChange={(e) => setRank(e.target.value as RankOption)}
+              >
+                {RANK_OPTIONS.map(opt => (
+                  <SelectItem
+                    key={opt.value}
+                    value={opt.value}
+                    text={opt.label}
+                    title={opt.description}
+                  />
+                ))}
+              </Select>
+
+              {/* Strategy */}
+              <Select
+                id="diagnosis-strategy"
+                labelText="Strategy for Multiple Diagnoses"
+                value={strategy}
+                onChange={(e) => setStrategy(e.target.value as StrategyOption)}
+              >
+                {STRATEGY_OPTIONS.map(opt => (
+                  <SelectItem
+                    key={opt.value}
+                    value={opt.value}
+                    text={opt.label}
+                    title={opt.description}
+                  />
+                ))}
+              </Select>
+
+              {/* Confirmed Only Toggle */}
+              <Toggle
+                id="diagnosis-confirmed-only"
+                labelText="Only include confirmed diagnoses"
+                toggled={confirmedOnly}
+                onToggle={(checked) => setConfirmedOnly(checked)}
+                size="sm"
+              />
+
+              {/* Return Display Toggle */}
+              <Toggle
+                id="diagnosis-return-display"
+                labelText="Return concept display name instead of UUID"
+                toggled={returnDisplay}
+                onToggle={(checked) => setReturnDisplay(checked)}
+                size="sm"
+              />
+            </Stack>
+          </FormGroup>
+        </Stack>
+      </div>
+    </Modal>
+  );
+};
+
+export default EncounterDiagnosisColumnModal;

package/src/components/linelist/definition/panels/encounter-diagnosis-column-modal.scss

@@ -0,0 +1,21 @@
+/**
+ * Encounter Diagnosis Column Modal Component Styles
+ */
+
+.content {
+  padding: 1rem 0;
+}
+
+.conceptSection {
+  margin-bottom: 1rem;
+}
+
+.conceptSectionHeader {
+  margin-bottom: 1rem;
+}
+
+.helperText {
+  font-size: 0.75rem;
+  color: #6f6f6f;
+  margin: 0.25rem 0 0 0;
+}