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

package/src/components/linelist/definition/linelist-definition-editor.scss

@@ -0,0 +1,461 @@
+/**
+ * Linelist Builder Workspace Styles
+ *
+ * Three-panel layout for linelist report builder
+ * Based on design spec: 280px catalogue | 400px config | remaining preview
+ */
+
+.workspace {
+  width: 100%;
+  height: 100vh;
+  display: flex;
+  flex-direction: column;
+  background-color: #f5f5f5;
+}
+
+.loading {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 100vh;
+  font-size: 1.25rem;
+  color: #666;
+}
+
+/* Header */
+.header {
+  display: grid;
+  grid-template-columns: auto 1fr auto;
+  align-items: center;
+  padding: 0.75rem 2rem;
+  background-color: #ffffff;
+  border-bottom: 1px solid #e0e0e0;
+  min-height: 56px;
+  gap: 1.5rem;
+  overflow: hidden;
+}
+
+.headerLeft {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  min-width: 40px;
+}
+
+.headerCenter {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  min-width: 0;
+  overflow: hidden;
+}
+
+.headerRight {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+  flex-shrink: 0;
+}
+
+.breadcrumb {
+  color: #666;
+  font-size: 0.875rem;
+  display: flex;
+  align-items: center;
+  gap: 0.25rem;
+}
+
+.breadcrumbCurrent {
+  color: #333;
+  font-weight: 500;
+}
+
+.nameInput {
+  min-width: 120px;
+  max-width: 200px;
+  flex: 1;
+  min-width: 0;
+}
+
+.notification {
+  padding: 0 1.5rem;
+}
+
+/* Three-Panel Layout */
+.panels {
+  display: flex;
+  flex: 1;
+  overflow: hidden;
+  position: relative;
+}
+
+/* Common Panel Styles */
+.leftPanel,
+.middlePanel,
+.rightPanel {
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  transition: width 0.2s ease;
+  flex-shrink: 0;
+}
+
+/* Resize Handles */
+.resizeHandle {
+  position: relative;
+  width: 4px;
+  background-color: transparent;
+  cursor: col-resize;
+  z-index: 10;
+  transition: background-color 0.15s ease;
+  flex-shrink: 0;
+
+  &::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background-color: transparent;
+    transition: background-color 0.15s ease;
+  }
+
+  &:hover::before,
+  &:active::before {
+    background-color: #00665A;
+    opacity: 0.3;
+  }
+
+  &:active {
+    background-color: #00665A;
+  }
+}
+
+.resizeHandleLeftMiddle {
+  // Handle between left and middle panel
+}
+
+.resizeHandleMiddleRight {
+  // Handle between middle and right panel
+}
+
+.panelHeader {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 1rem;
+  background-color: #ffffff;
+  border-bottom: 1px solid #e0e0e0;
+}
+
+.panelTitle {
+  margin: 0;
+  font-size: 1rem;
+  font-weight: 600;
+  color: #333;
+}
+
+.panelContent {
+  flex: 1;
+  overflow-y: auto;
+  padding: 1rem;
+  background-color: #fafafa;
+}
+
+/* Left Panel - Data Catalogue */
+.leftPanel {
+  min-width: 48px;
+  width: 400px;
+  max-width: 700px;
+  border-right: 1px solid #e0e0e0;
+}
+
+.columnSourcesSection {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+}
+
+/* Card Styles */
+.populationCard,
+.columnSourcesCard {
+  background-color: #ffffff;
+  border: 1px solid #e0e0e0;
+  border-radius: 8px;
+  overflow: hidden;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
+}
+
+.populationCard {
+  border-left: 4px solid #00665A;
+}
+
+.columnSourcesCard {
+  border-left: 4px solid #0f62fe;
+}
+
+.columnSourcesHeader {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0.75rem 1rem;
+  background: linear-gradient(to bottom, #fafafa, #f5f5f5);
+  border-bottom: 1px solid #e0e0e0;
+}
+
+.columnSourcesTitle {
+  margin: 0;
+  font-size: 0.925rem;
+  font-weight: 600;
+  color: #161616;
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+}
+
+.columnSourcesIcon {
+  font-size: 1rem;
+}
+
+.columnSourcesSubtitle {
+  font-size: 0.75rem;
+  color: #6f6f6f;
+  font-weight: 400;
+}
+
+.catalogueControls {
+  margin-bottom: 1rem;
+}
+
+.fieldAccordion {
+  [class*='Accordion__container'] {
+    background-color: transparent;
+  }
+}
+
+.fieldList {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+}
+
+.fieldItem {
+  padding: 0.75rem;
+  background-color: #ffffff;
+  border: 1px solid #e0e0e0;
+  border-radius: 4px;
+}
+
+.fieldInfo {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  margin-bottom: 0.5rem;
+  flex-wrap: wrap;
+}
+
+.fieldName {
+  font-weight: 500;
+  color: #333;
+}
+
+.fieldActions {
+  display: flex;
+  gap: 0.25rem;
+}
+
+/* Middle Panel - Query Configuration */
+.middlePanel {
+  min-width: 48px;
+  width: 635px;
+  max-width: 700px;
+  border-right: 1px solid #e0e0e0;
+}
+
+.configSection {
+  margin-bottom: 0.5rem;
+}
+
+.sectionHeader {
+  width: 100%;
+  justify-content: flex-start;
+  text-align: left;
+}
+
+.sectionContent {
+  padding: 1rem 0;
+}
+
+.datasetInfo {
+  padding: 0.75rem;
+  background-color: #f0f0f0;
+  border-radius: 4px;
+  margin-bottom: 0.75rem;
+
+  div {
+    margin-bottom: 0.25rem;
+    font-size: 0.875rem;
+    color: #666;
+  }
+}
+
+/* Right Panel - Preview */
+.rightPanel {
+  flex: 1;
+  min-width: 560px;
+}
+
+.emptyPreview {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  height: 100%;
+  color: #999;
+  text-align: center;
+
+  svg {
+    margin-bottom: 1rem;
+    opacity: 0.5;
+  }
+}
+
+.previewResults {
+  width: 100%;
+}
+
+.previewStatus {
+  display: flex;
+  gap: 1.5rem;
+  padding: 0.75rem;
+  background-color: #f0f0f0;
+  border-radius: 4px;
+  margin-bottom: 1rem;
+  font-size: 0.875rem;
+  color: #666;
+}
+
+.htmlPreview {
+  width: 100%;
+  overflow: auto;
+  max-height: calc(100vh - 300px);
+
+  // Style the embedded HTML table
+  table {
+    border-collapse: collapse;
+    width: 100%;
+    font-size: 12px;
+
+    th,
+    td {
+      border: 1px solid var(--cds-border-subtle, #e0e0e0);
+      padding: 8px;
+      text-align: left;
+    }
+
+    th {
+      font-weight: 600;
+      position: sticky;
+      top: 0;
+      background-color: var(--cds-layer-01, #fff);
+      color: var(--cds-text-05, #161616);
+    }
+
+    // Section row - top level section header (e.g., "HTS Register")
+    .sectionRow {
+      background-color: var(--cds-interactive-01, #0f62fe);
+      color: var(--cds-text-04, #ffffff);
+      font-weight: 600;
+      font-size: 14px;
+      text-transform: uppercase;
+      letter-spacing: 0.32px;
+      border-top: 1px solid var(--cds-interactive-01, #0f62fe);
+      border-bottom: 1px solid var(--cds-interactive-01, #0f62fe);
+      position: sticky;
+      top: 0;
+      z-index: 5;
+
+      td {
+        border-color: var(--cds-interactive-01, #0f62fe);
+        padding: 12px 8px;
+      }
+
+      &:hover {
+        background-color: var(--cds-interactive-01-hover, #0353e9);
+      }
+    }
+
+    // Group row - indicator group header (e.g., "HT01 Total No. of individuals at Health Facility")
+    .groupRow {
+      background-color: var(--cds-layer-02, #f4f4f4);
+      font-weight: 600;
+      font-size: 13px;
+      border-top: 1px solid var(--cds-border-strong, #8a8a8a);
+      border-bottom: 1px solid var(--cds-border-strong, #8a8a8a);
+      color: var(--cds-text-05, #161616);
+      position: sticky;
+      top: 38px;
+      z-index: 4;
+
+      td {
+        border-color: var(--cds-border-strong, #8a8a8a);
+        padding: 10px 8px;
+      }
+
+      &:hover {
+        background-color: var(--cds-layer-03, #e0e0e0);
+      }
+
+      .indent {
+        display: inline-block;
+      }
+    }
+
+    tbody tr:nth-child(even) {
+      background-color: var(--cds-field-01, #f4f4f4);
+    }
+
+    tbody tr:hover {
+      background-color: var(--cds-field-02, #e0e0e0);
+    }
+
+    // Don't apply zebra striping to section/group rows
+    tbody tr.sectionRow:nth-child(even),
+    tbody tr.groupRow:nth-child(even) {
+      background-color: unset;
+    }
+  }
+}
+
+/* Responsive */
+@media (max-width: 1439px) {
+  .panels {
+    flex-wrap: wrap;
+  }
+
+  .leftPanel,
+  .middlePanel {
+    width: 100% !important;
+  }
+
+  .rightPanel {
+    width: 100%;
+  }
+}
+
+@media (max-width: 1023px) {
+  .header {
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 1rem;
+  }
+
+  .headerLeft {
+    flex-wrap: wrap;
+  }
+
+  .breadcrumb {
+    display: none;
+  }
+}

package/src/components/linelist/definition/linelist-definition.types.ts

@@ -0,0 +1,108 @@
+/**
+ * Indicator-based Population Configuration Types
+ *
+ * Allows using indicator definitions (which have prebuilt query logic)
+ * for linelist population configuration instead of raw SQL.
+ */
+
+import type { IndicatorCondition } from '../../indicators/types/indicator-types';
+import type { DataThemeConfig } from '../../indicators/types/data-theme-config.types';
+
+/**
+ * Population configuration mode
+ */
+export type PopulationConfigMode = 'SQL' | 'INDICATOR' | 'HYBRID';
+
+/**
+ * Indicator-based population configuration
+ * Stores the indicator and its condition values
+ */
+export type IndicatorPopulationConfig = {
+  /**
+   * Unique identifier for this population rule
+   */
+  id: string;
+
+  /**
+   * The indicator to use for population definition
+   */
+  indicatorUuid: string;
+
+  /**
+   * Display name for this population rule
+   */
+  name: string;
+
+  /**
+   * Snapshot of indicator details (for display without fetching)
+   */
+  indicator?: {
+    uuid: string;
+    name: string;
+    description?: string;
+    code?: string;
+  };
+
+  /**
+   * Indicator condition values (matches indicator's theme conditions)
+   * These are the values selected by the user
+   */
+  conditions: IndicatorCondition[];
+
+  /**
+   * Optional: Custom SQL overrides/extensions
+   * For hybrid mode where you want indicator logic + custom SQL
+   */
+  customSql?: string;
+
+  /**
+   * Logical operator when combining with other population rules
+   */
+  logicalOperator?: 'AND' | 'OR';
+
+  /**
+   * Whether to negate this population rule (exclude matching patients)
+   */
+  negate?: boolean;
+};
+
+/**
+ * Population configuration that can use SQL, Indicators, or both
+ */
+export type PopulationConfiguration = {
+  /**
+   * Current mode
+   */
+  mode: PopulationConfigMode;
+
+  /**
+   * Raw SQL (for SQL mode or as fallback)
+   */
+  sql?: string;
+
+  /**
+   * Indicator-based population rules
+   * Multiple indicators can be combined with AND/OR logic
+   */
+  indicatorRules?: IndicatorPopulationConfig[];
+
+  /**
+   * Snapshot of theme config used for indicator conditions
+   */
+  themeConfig?: DataThemeConfig;
+};
+
+/**
+ * Converts indicator population config to linelist cohort SQL
+ */
+export interface IndicatorToSqlConverter {
+  /**
+   * Convert a single indicator rule to SQL
+   */
+  convertIndicatorRule(rule: IndicatorPopulationConfig, themeConfig: DataThemeConfig): string;
+
+  /**
+   * Combine multiple indicator rules into a single SQL query
+   */
+  combineRules(rules: IndicatorPopulationConfig[], themeConfig: DataThemeConfig): string;
+}