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

package/src/features/report-visualizer/hooks/useReports.ts

@@ -0,0 +1,135 @@
+/**
+ * useReports Hook
+ *
+ * Combines report data fetching with filtering by search, category, and tags.
+ * Uses existing useGetReportLibrary hook from data-visualizer.resource.
+ *
+ * Phase 5.1: Reports hook with filtering
+ */
+import { useMemo, useCallback } from 'react';
+import { useGetReportLibrary } from '../../../components/data-visualizer/data-visualizer.resource';
+import type { ReportLibraryItem } from '../types';
+
+/**
+ * Extract tags from a report's metaJson
+ * Tags should be stored in metaJson as: { "tags": ["tag1", "tag2", ...] }
+ */
+function extractTagsFromReport(report: ReportLibraryItem): string[] {
+  if (!report.metaJson) return [];
+
+  try {
+    const meta = JSON.parse(report.metaJson);
+    // Support both tags array and tags string (comma-separated)
+    if (Array.isArray(meta.tags)) {
+      return meta.tags;
+    }
+    if (typeof meta.tags === 'string') {
+      return meta.tags.split(',').map((t: string) => t.trim()).filter(Boolean);
+    }
+    return [];
+  } catch {
+    return [];
+  }
+}
+
+/**
+ * Get all unique tags from all reports
+ */
+function getAllUniqueTags(reports: ReportLibraryItem[]): string[] {
+  const tagSet = new Set<string>();
+  reports.forEach((report) => {
+    const tags = extractTagsFromReport(report);
+    tags.forEach((tag) => tagSet.add(tag));
+  });
+  return Array.from(tagSet).sort();
+}
+
+interface UseReportsResult {
+  reports: ReportLibraryItem[];
+  filteredReports: ReportLibraryItem[];
+  availableTags: string[];
+  loading: boolean;
+  error: Error | null;
+  refresh: () => void;
+  getReportByUuid: (uuid: string) => ReportLibraryItem | undefined;
+}
+
+interface UseReportsOptions {
+  searchQuery: string;
+  selectedCategory?: string;
+  selectedTags: string[];
+}
+
+/**
+ * Hook for managing report library with filtering
+ * @param options - Filter options for reports
+ */
+export function useReports(options: UseReportsOptions): UseReportsResult {
+  const { searchQuery, selectedCategory, selectedTags } = options;
+
+  // Use existing report library hook
+  const {
+    reportLibrary,
+    isLoadingReportLibrary: loading,
+    isError,
+    mutate: refresh,
+  } = useGetReportLibrary();
+
+  // Filter reports based on search, category, and tags
+  const filteredReports = useMemo(() => {
+    let filtered = reportLibrary ?? [];
+
+    // Filter by search query (name, code, description)
+    if (searchQuery.trim()) {
+      const query = searchQuery.toLowerCase();
+      filtered = filtered.filter((report: ReportLibraryItem) => {
+        const name = report.name?.toLowerCase() || '';
+        const code = report.code?.toLowerCase() || '';
+        const description = report.description?.toLowerCase() || '';
+        return name.includes(query) || code.includes(query) || description.includes(query);
+      });
+    }
+
+    // Filter by category
+    if (selectedCategory) {
+      filtered = filtered.filter((report: ReportLibraryItem) => {
+        return report.category?.uuid === selectedCategory;
+      });
+    }
+
+    // Filter by tags (AND logic - all selected tags must match)
+    if (selectedTags.length > 0) {
+      filtered = filtered.filter((report: ReportLibraryItem) => {
+        const reportTags = extractTagsFromReport(report);
+        return selectedTags.every((tag) => reportTags.includes(tag));
+      });
+    }
+
+    return filtered;
+  }, [reportLibrary, searchQuery, selectedCategory, selectedTags]);
+
+  // Get all unique tags from reports
+  const availableTags = useMemo(() => {
+    return getAllUniqueTags(reportLibrary ?? []);
+  }, [reportLibrary]);
+
+  // Get report by UUID helper
+  const getReportByUuid = useCallback(
+    (uuid: string): ReportLibraryItem | undefined => {
+      return reportLibrary?.find((report: ReportLibraryItem) => report.uuid === uuid);
+    },
+    [reportLibrary]
+  );
+
+  return {
+    reports: reportLibrary ?? [],
+    filteredReports,
+    availableTags,
+    loading,
+    error: isError ? (isError as Error) : null,
+    refresh: () => refresh(),
+    getReportByUuid,
+  };
+}
+
+export default useReports;

package/src/features/report-visualizer/index.ts

@@ -0,0 +1,6 @@
+/**
+ * Report Visualizer Module Exports
+ */
+
+export { default } from './ReportVisualizerPage';
+export { default as ReportVisualizerPage } from './ReportVisualizerPage';

package/src/features/report-visualizer/report-visualizer.scss

@@ -0,0 +1,593 @@
+/**
+ * Report Visualizer Styles
+ *
+ * Two-panel layout for report explorer and workspace.
+ * Adapted from linelist-builder-workspace.scss patterns.
+ */
+
+.page {
+  width: 100%;
+  height: 100vh;
+  display: flex;
+  flex-direction: column;
+  background-color: #f5f5f5;
+}
+
+.panels {
+  display: flex;
+  flex: 1;
+  overflow: hidden;
+  position: relative;
+}
+
+/* Resize Handle - adapted from linelist-builder-workspace.scss */
+.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;
+  }
+}
+
+/* Common Panel Styles - adapted from linelist-builder-workspace.scss */
+.explorerPanel,
+.workspacePanel {
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  transition: width 0.2s ease;
+  flex-shrink: 0;
+}
+
+/* Left Panel - Explorer */
+.explorerPanel {
+  min-width: 48px;
+  width: 350px;
+  max-width: 700px;
+  border-right: 1px solid #e0e0e0;
+  background-color: #ffffff;
+
+  &.collapsed {
+    width: 48px;
+  }
+}
+
+/* Right Panel - Workspace */
+.workspacePanel {
+  flex: 1;
+  min-width: 720px;
+  background-color: #ffffff;
+}
+
+/* Panel Header - adapted from linelist-builder-workspace.scss */
+.panelHeader {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 1rem;
+  background-color: #ffffff;
+  border-bottom: 1px solid #e0e0e0;
+  min-height: 56px;
+}
+
+.panelTitle {
+  margin: 0;
+  font-size: 1rem;
+  font-weight: 600;
+  color: #161616;
+}
+
+/* Panel Content */
+.panelContent {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  overflow-y: auto; /* Enable scrolling for report content */
+  padding: 1rem;
+  background-color: #fafafa;
+  min-height: 0; /* Required for flex child to scroll properly */
+}
+
+/* Filter Section - compact spacing */
+.filterSection {
+  flex-shrink: 0;
+}
+
+/* Parameter Section - compact */
+.parameterSection {
+  flex-shrink: 0;
+}
+
+/* Reports List Wrapper - takes remaining space */
+.reportsListWrapper {
+  flex: 1;
+  overflow-y: auto;
+  min-height: 0; /* Required for flex child to scroll */
+}
+
+/* Empty State */
+.emptyState {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  height: 100%;
+  color: #999;
+  text-align: center;
+  padding: 2rem;
+
+  svg {
+    margin-bottom: 1rem;
+    opacity: 0.5;
+  }
+
+  p {
+    font-size: 0.875rem;
+    color: #666;
+    max-width: 400px;
+  }
+}
+
+/* Responsive - adapted from linelist-builder-workspace.scss */
+@media (max-width: 1439px) {
+  .panels {
+    flex-wrap: wrap;
+  }
+
+  .explorerPanel {
+    width: 100% !important;
+    max-width: none;
+  }
+
+  .workspacePanel {
+    width: 100%;
+    min-width: unset;
+  }
+}
+
+@media (max-width: 1023px) {
+  .panelHeader {
+    padding: 0.75rem;
+  }
+
+  .panelContent {
+    padding: 0.75rem;
+  }
+}
+
+/* Report Layer - Theme-aware HTML content rendering */
+.reportLayer {
+  width: 100%;
+  /* Remove height constraint to let parent scroll */
+  overflow: visible;
+}
+
+.reportLayerContent {
+  /* Ensure content takes full width */
+  width: 100%;
+  /* Remove min-height to prevent unnecessary expansion */
+  padding: 1rem;
+
+  /* Typography - matches Carbon theme */
+  font-family: 'IBM Plex Sans', 'Helvetica Neue', Arial, sans-serif !important;
+  font-size: 0.875rem !important;
+  line-height: 1.5;
+  color: #161616 !important;
+
+  /* Headings - consistent with Carbon */
+  h1, h2, h3, h4, h5, h6 {
+    font-weight: 600 !important;
+    margin-top: 1.5rem;
+    margin-bottom: 0.75rem;
+    color: #161616 !important;
+    font-family: 'IBM Plex Sans', 'Helvetica Neue', Arial, sans-serif !important;
+  }
+
+  h1 { font-size: 2rem !important; }
+  h2 { font-size: 1.75rem !important; }
+  h3 { font-size: 1.5rem !important; }
+  h4 { font-size: 1.25rem !important; }
+  h5 { font-size: 1.125rem !important; }
+  h6 { font-size: 1rem !important; }
+
+  /* First heading shouldn't have top margin */
+  h1:first-child,
+  h2:first-child,
+  h3:first-child,
+  h4:first-child,
+  h5:first-child,
+  h6:first-child {
+    margin-top: 0 !important;
+  }
+
+  /* Paragraphs */
+  p {
+    margin-bottom: 1rem;
+    color: #161616 !important;
+  }
+
+  /* Links - Carbon blue */
+  a {
+    color: #0f62fe !important;
+    text-decoration: none;
+    transition: color 0.15s ease;
+
+    &:hover {
+      color: #0353e9 !important;
+      text-decoration: underline;
+    }
+
+    &:active {
+      color: #0f62fe !important;
+    }
+  }
+
+  /* Tables - Carbon table styles */
+  table {
+    width: 100% !important;
+    border-collapse: collapse !important;
+    margin: 1rem 0;
+    background-color: #ffffff !important;
+    border: 1px solid #e0e0e0 !important;
+  }
+
+  thead {
+    background-color: var(--brand-03) !important;
+    border-bottom: 2px solid var(--brand-03) !important;
+    border: 2px solid var(--brand-03) !important;
+  }
+
+  th {
+    padding: 6px 8px !important;
+    text-align: center !important;
+    font-weight: 600 !important;
+    font-size: 0.75rem !important;
+    color: var(--cds-text-04, #ffffff) !important;
+    border: 1px solid rgba(255, 255, 255, 0.3) !important;
+    background-color: var(--brand-03) !important;
+    font-family: 'IBM Plex Sans', 'Helvetica Neue', Arial, sans-serif !important;
+  }
+
+  td {
+    padding: 6px 8px !important;
+    border-bottom: 1px solid #e0e0e0 !important;
+    border-right: 1px solid #e0e0e0 !important;
+    border-left: none !important;
+    color: #525252 !important;
+    background-color: #ffffff !important;
+    font-family: 'IBM Plex Sans', 'Helvetica Neue', Arial, sans-serif !important;
+    font-size: 0.75rem !important;
+
+    &:last-child {
+      border-right: none !important;
+    }
+  }
+
+  tbody tr {
+    transition: background-color 0.15s ease;
+
+    &:hover {
+      background-color: #e5e5e5 !important;
+
+      td {
+        background-color: transparent !important;
+      }
+    }
+  }
+
+  /* Zebra striping */
+  tbody tr:nth-child(even) {
+    td {
+      background-color: #f4f4f4 !important;
+    }
+
+    &:hover {
+      td {
+        background-color: #e5e5e5 !important;
+      }
+    }
+  }
+
+  /* Handle backend classes like sectionRow, groupRow, labelRow */
+  tr:global(.sectionRow) td {
+    font-weight: 700 !important;
+    font-size: 0.75rem !important;
+    text-transform: uppercase !important;
+    letter-spacing: 0.32px !important;
+    border-top: 2px solid var(--cds-border-strong, #8a8a8a) !important;
+    border-bottom: 1px solid var(--cds-border-strong, #8a8a8a) !important;
+    padding: 6px 8px !important;
+  }
+
+  tr:global(.groupRow) td {
+    font-weight: 600 !important;
+    font-size: 0.75rem !important;
+    border-top: 1px solid var(--cds-border-subtle, #e0e0e0) !important;
+    border-bottom: 1px solid var(--cds-border-subtle, #e0e0e0) !important;
+    padding: 6px 8px !important;
+  }
+
+  tr:global(.labelRow) td {
+    font-weight: 600 !important;
+  }
+
+  /* Value cells - right-align numeric values */
+  td:global(.val) {
+    text-align: right !important;
+    font-family: 'IBM Plex Mono', monospace !important;
+  }
+
+  /* Label cells - for indicator names */
+  td:global(.label) {
+    text-align: left !important;
+    font-weight: 500 !important;
+  }
+
+  /* Don't apply zebra striping to section/group/label rows */
+  tr:global(.sectionRow):nth-child(even) td,
+  tr:global(.groupRow):nth-child(even) td,
+  tr:global(.labelRow):nth-child(even) td {
+    background-color: unset !important;
+  }
+
+  /* Lists */
+  ul, ol {
+    margin: 0.5rem 0 1rem 1.5rem;
+  }
+
+  li {
+    margin-bottom: 0.5rem;
+  }
+
+  /* Code blocks */
+  code {
+    font-family: 'IBM Plex Mono', 'Courier New', monospace;
+    background-color: #f4f4f4;
+    padding: 0.125rem 0.25rem;
+    border-radius: 3px;
+    font-size: 0.875em;
+    color: #da1e28;
+  }
+
+  pre {
+    background-color: #262626;
+    color: #f4f4f4;
+    padding: 1rem;
+    border-radius: 4px;
+    overflow-x: auto;
+    margin: 1rem 0;
+
+    code {
+      background-color: transparent;
+      color: inherit;
+      padding: 0;
+    }
+  }
+
+  /* Blockquotes */
+  blockquote {
+    border-left: 4px solid #0f62fe;
+    padding-left: 1rem;
+    margin: 1rem 0;
+    color: #525252;
+    font-style: italic;
+  }
+
+  /* Horizontal rule */
+  hr {
+    border: none;
+    border-top: 1px solid #e0e0e0;
+    margin: 1.5rem 0;
+  }
+
+  /* Strong and emphasis */
+  strong, b {
+    font-weight: 600;
+  }
+
+  em, i {
+    font-style: italic;
+  }
+
+  /* Labels and badges */
+  .label,
+  .badge {
+    display: inline-block;
+    padding: 0.25rem 0.5rem;
+    font-size: 0.75rem;
+    font-weight: 600;
+    border-radius: 3px;
+    background-color: #393939;
+    color: #ffffff;
+  }
+
+  /* Warnings and alerts */
+  .warning,
+  .alert {
+    padding: 0.75rem 1rem;
+    margin: 1rem 0;
+    border-radius: 4px;
+    background-color: #fff1c9;
+    border-left: 4px solid #f1c21b;
+    color: #525252;
+  }
+
+  .error,
+  .danger {
+    padding: 0.75rem 1rem;
+    margin: 1rem 0;
+    border-radius: 4px;
+    background-color: #ffd7d9;
+    border-left: 4px solid #da1e28;
+    color: #525252;
+  }
+
+  .success,
+  .info {
+    padding: 0.75rem 1rem;
+    margin: 1rem 0;
+    border-radius: 4px;
+    background-color: #defbe6;
+    border-left: 4px solid #24a148;
+    color: #525252;
+  }
+
+  /* Cards and containers */
+  .card,
+  .container {
+    border: 1px solid #e0e0e0;
+    border-radius: 4px;
+    padding: 1rem;
+    margin: 1rem 0;
+    background-color: #ffffff;
+  }
+
+  /* Section headers/dividers */
+  .section-header {
+    font-size: 1.25rem;
+    font-weight: 600;
+    margin: 1.5rem 0 1rem 0;
+    padding-bottom: 0.5rem;
+    border-bottom: 1px solid #e0e0e0;
+  }
+
+  /* Data cells - numeric alignment */
+  td.numeric,
+  th.numeric,
+  td[data-type="numeric"],
+  th[data-type="numeric"] {
+    text-align: right;
+  }
+
+  /* Center alignment */
+  td.center,
+  th.center,
+  td[data-align="center"],
+  th[data-align="center"] {
+    text-align: center;
+  }
+}
+
+/* Dark theme support */
+[data-theme="dark"] .reportLayerContent {
+  color: #f4f4f4 !important;
+  background-color: #161616 !important;
+
+  h1, h2, h3, h4, h5, h6 {
+    color: #f4f4f4 !important;
+  }
+
+  p {
+    color: #f4f4f4 !important;
+  }
+
+  table {
+    background-color: #262626 !important;
+    border-color: #393939 !important;
+  }
+
+  thead {
+    background-color: var(--brand-03) !important;
+    border: 2px solid var(--brand-03) !important;
+  }
+
+  th {
+    color: var(--cds-text-04, #ffffff) !important;
+    border: 1px solid rgba(255, 255, 255, 0.3) !important;
+    background-color: var(--brand-03) !important;
+  }
+
+  td {
+    border-bottom-color: #393939 !important;
+    border-right-color: #393939 !important;
+    color: #c6c6c6 !important;
+    background-color: #262626 !important;
+  }
+
+  tbody tr:nth-child(even) {
+    td {
+      background-color: #303030 !important;
+    }
+
+    &:hover {
+      td {
+        background-color: #393939 !important;
+      }
+    }
+  }
+
+  tbody tr:hover {
+    td {
+      background-color: #393939 !important;
+    }
+  }
+
+  a {
+    color: #4589ff !important;
+
+    &:hover {
+      color: #78a9ff !important;
+    }
+  }
+
+  code {
+    background-color: #393939 !important;
+    color: #ff8389 !important;
+  }
+
+  blockquote {
+    border-left-color: #4589ff !important;
+    color: #c6c6c6 !important;
+  }
+
+  hr {
+    border-top-color: #393939 !important;
+  }
+
+  .card,
+  .container {
+    background-color: #262626 !important;
+    border-color: #393939 !important;
+  }
+
+  .section-header {
+    border-bottom-color: #393939 !important;
+  }
+
+  tr:global(.sectionRow) td {
+    border-top: 2px solid var(--cds-border-strong, #6f6f6f) !important;
+    border-bottom: 1px solid var(--cds-border-strong, #6f6f6f) !important;
+  }
+
+  tr:global(.groupRow) td {
+    border-top: 1px solid var(--cds-border-subtle, #393939) !important;
+    border-bottom: 1px solid var(--cds-border-subtle, #393939) !important;
+  }
+
+  tr:global(.labelRow) td {
+    /* No special styling needed for dark theme */
+  }
+}