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

package/src/features/report-visualizer/components/ReportWorkspace/ReportWorkspacePanel.tsx

@@ -0,0 +1,242 @@
+/**
+ * Report Workspace Panel - Right Panel
+ *
+ * Main content area for displaying report results.
+ * Integrates header, view tabs, summary, and results display with real API integration.
+ *
+ * Phase 6: Full workspace with API integration
+ */
+import React from 'react';
+import { Document } from '@carbon/react/icons';
+import { InlineLoading, DataTableSkeleton } from '@carbon/react';
+import styles from '../../report-visualizer.scss';
+
+import ReportWorkspaceHeader from './ReportWorkspaceHeader';
+import ReportSummary from './ReportSummary';
+import ReportLayer from './ReportLayer';
+import { ReportTable } from '../TableView';
+import type { ReportLibraryItem, ReportCapabilities, ReportViewType } from '../../types';
+
+interface ReportWorkspacePanelProps {
+  explorerCollapsed: boolean;
+  selectedReport?: ReportLibraryItem | null;
+  reportResults?: any;
+  runningReport?: boolean;
+  htmlContent?: string;
+  activeView?: ReportViewType;
+  onViewChange?: (view: ReportViewType) => void;
+  capabilities?: ReportCapabilities;
+  onExport?: (format: 'CSV' | 'XLSX' | 'PDF') => void;
+  onSendToDhis2?: () => void;
+  parameterValues?: Record<string, any>;
+}
+
+const ReportWorkspacePanel: React.FC<ReportWorkspacePanelProps> = ({
+  // explorerCollapsed,
+  selectedReport,
+  reportResults,
+  runningReport,
+  htmlContent,
+  activeView = 'REPORT_LAYOUT',
+  onViewChange,
+  capabilities = {
+    table: true,
+    pivot: false,
+    chart: false,
+    reportLayout: false,
+    export: true,
+    sendToDhis2: false,
+  },
+  onExport,
+  onSendToDhis2,
+  parameterValues,
+}) => {
+  // Debug logging
+  React.useEffect(() => {
+    console.log('ReportWorkspacePanel props:', {
+      hasSelectedReport: !!selectedReport,
+      hasReportResults: !!reportResults,
+      hasHtmlContent: !!htmlContent,
+      runningReport,
+      activeView,
+      reportResultsDataLength: reportResults?.data?.length,
+      reportResultsColumnsLength: reportResults?.columns?.length,
+    });
+  }, [selectedReport, reportResults, htmlContent, runningReport, activeView]);
+
+  // Handle view change
+  const handleViewChange = (view: ReportViewType) => {
+    if (onViewChange) {
+      onViewChange(view);
+    }
+  };
+
+  // Handle export
+  const handleExport = (format: 'CSV' | 'XLSX' | 'PDF') => {
+    if (onExport) {
+      onExport(format);
+    }
+  };
+
+  // Handle DHIS2 send
+  const handleSendToDhis2 = () => {
+    if (onSendToDhis2) {
+      onSendToDhis2();
+    }
+  };
+
+  // Handle refresh
+  const handleRefresh = () => {
+    console.log('Refreshing report');
+    // TODO: Re-run the report via parent callback
+  };
+
+  return (
+    <main className={styles.workspacePanel}>
+      {/* Panel Header - Integrated header with view tabs and actions */}
+      <div className={styles.panelHeader}>
+        {selectedReport ? (
+          <ReportWorkspaceHeader
+            reportName={selectedReport.name}
+            reportDescription={selectedReport.description}
+            capabilities={capabilities}
+            activeView={activeView}
+            onViewChange={handleViewChange}
+            onExport={handleExport}
+            onSendToDhis2={capabilities.sendToDhis2 ? handleSendToDhis2 : undefined}
+            loading={runningReport}
+            hasResults={!runningReport && (reportResults || htmlContent)}
+          />
+        ) : (
+          <h3 className={styles.panelTitle}>Report Workspace</h3>
+        )}
+      </div>
+
+      {/* Panel Content */}
+      <div className={styles.panelContent}>
+        {runningReport && (
+          <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', height: '100%' }}>
+            <InlineLoading style={{ width: 'auto' }} description="Running report..." />
+          </div>
+        )}
+
+        {!runningReport && !selectedReport && (
+          <div className={styles.emptyState}>
+            <Document size={48} />
+            <p>Select a report to begin</p>
+            <p style={{ fontSize: '0.75rem', marginTop: '0.5rem' }}>
+              Search and select a report from the explorer panel
+            </p>
+          </div>
+        )}
+
+        {!runningReport && selectedReport && !reportResults && !htmlContent && (
+          <div className={styles.emptyState}>
+            <DataTableSkeleton size="lg" />
+            <p style={{ marginTop: '1rem' }}>Click "Run report" to generate results</p>
+          </div>
+        )}
+
+        {/* Report Results - Display based on active view */}
+        {!runningReport && selectedReport && (reportResults || htmlContent) && (
+          <div style={{ display: 'flex', flexDirection: 'column', gap: '1rem' }}>
+            {/* Report Summary */}
+            {reportResults?.rowCount !== undefined && reportResults?.generatedTime && (
+              <ReportSummary
+                rowCount={reportResults.rowCount}
+                generatedTime={new Date(reportResults.generatedTime)}
+                parameters={parameterValues}
+              />
+            )}
+
+            {/* View Content */}
+            {activeView === 'TABLE' && reportResults?.data && reportResults.data.length > 0 && (
+              <>
+                {/* Debug info - remove in production */}
+                {process.env.NODE_ENV === 'development' && (
+                  <div style={{ padding: '0.5rem', backgroundColor: '#f0f0f0', fontSize: '0.75rem', marginBottom: '0.5rem' }}>
+                    Debug: Rows={reportResults.data.length}, Columns={reportResults.columns?.length || 0}
+                  </div>
+                )}
+                <ReportTable
+                  data={reportResults.data}
+                  columns={reportResults.columns || []}
+                  onRefresh={handleRefresh}
+                  title={selectedReport.name}
+                />
+              </>
+            )}
+
+            {/* Show when no data available */}
+            {activeView === 'TABLE' && reportResults && (!reportResults.data || reportResults.data.length === 0) && (
+              <div style={{ padding: '2rem', textAlign: 'center', backgroundColor: '#f5f5f5', borderRadius: '4px' }}>
+                <p>No tabular data available for this report</p>
+                {process.env.NODE_ENV === 'development' && (
+                  <details style={{ marginTop: '1rem', textAlign: 'left' }}>
+                    <summary>Debug Info</summary>
+                    <pre style={{ fontSize: '0.75rem', overflow: 'auto', maxHeight: '200px' }}>
+                      {JSON.stringify(reportResults, null, 2)}
+                    </pre>
+                  </details>
+                )}
+              </div>
+            )}
+
+            {activeView === 'PIVOT' && reportResults?.data && (
+              <div style={{ width: '100%' }}>
+                {/* Pivot table will be implemented with react-pivottable */}
+                <div style={{ padding: '1rem', backgroundColor: '#f0f0f0', borderRadius: '4px', textAlign: 'center' }}>
+                  <p style={{ margin: 0 }}>Pivot View</p>
+                  <p style={{ fontSize: '0.875rem', color: '#666', marginTop: '0.5rem' }}>
+                    Pivot table view will be implemented with react-pivottable integration
+                  </p>
+                </div>
+                {/* Fallback to table view for now */}
+                <ReportTable
+                  data={reportResults.data}
+                  columns={reportResults.columns || []}
+                  onRefresh={handleRefresh}
+                  title={selectedReport.name}
+                />
+              </div>
+            )}
+
+            {activeView === 'CHART' && reportResults?.data && (
+              <div style={{ width: '100%' }}>
+                {/* Chart will be implemented with react-plotly.js */}
+                <div style={{ padding: '1rem', backgroundColor: '#f0f0f0', borderRadius: '4px', textAlign: 'center' }}>
+                  <p style={{ margin: 0 }}>Chart View</p>
+                  <p style={{ fontSize: '0.875rem', color: '#666', marginTop: '0.5rem' }}>
+                    Chart view will be implemented with react-plotly.js integration
+                  </p>
+                </div>
+                {/* Fallback to table view for now */}
+                <ReportTable
+                  data={reportResults.data}
+                  columns={reportResults.columns || []}
+                  onRefresh={handleRefresh}
+                  title={selectedReport.name}
+                />
+              </div>
+            )}
+
+            {activeView === 'REPORT_LAYOUT' && htmlContent && (
+              <ReportLayer htmlContent={htmlContent} reportName={selectedReport.name} />
+            )}
+
+            {activeView === 'REPORT_LAYOUT' && !htmlContent && reportResults?.data && (
+              <ReportTable
+                data={reportResults.data}
+                columns={reportResults.columns || []}
+                onRefresh={handleRefresh}
+                title={selectedReport.name}
+              />
+            )}
+          </div>
+        )}
+      </div>
+    </main>
+  );
+};
+
+export default ReportWorkspacePanel;

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

@@ -0,0 +1,5 @@
+export { default as ReportWorkspacePanel } from './ReportWorkspacePanel';
+export { default as ReportWorkspaceHeader } from './ReportWorkspaceHeader';
+export { default as ReportViewTabs } from './ReportViewTabs';
+export { default as ReportSummary } from './ReportSummary';
+export type { ReportViewType } from '../../types';

package/src/features/report-visualizer/components/TableView/ColumnVisibilityMenu.tsx

@@ -0,0 +1,206 @@
+/**
+ * Column Visibility Menu Component
+ *
+ * Button and menu for toggling column visibility in the report table.
+ * Shows all columns with checkboxes for visibility control.
+ *
+ * Phase 7.2: Column visibility menu
+ */
+import React, { useState, useRef, useEffect } from 'react';
+import { Button, Checkbox, Layer } from '@carbon/react';
+import { View } from '@carbon/react/icons';
+
+interface ColumnVisibilityMenuProps {
+  columns: string[];
+  hiddenColumns: Set<string>;
+  onToggleColumn: (columnName: string) => void;
+  onShowAll?: () => void;
+  onHideAll?: () => void;
+  disabled?: boolean;
+}
+
+const ColumnVisibilityMenu: React.FC<ColumnVisibilityMenuProps> = ({
+  columns,
+  hiddenColumns,
+  onToggleColumn,
+  onShowAll,
+  onHideAll,
+  disabled,
+}) => {
+  const [isOpen, setIsOpen] = useState(false);
+  const menuRef = useRef<HTMLDivElement>(null);
+  const buttonRef = useRef<HTMLButtonElement>(null);
+
+  const visibleCount = columns.length - hiddenColumns.size;
+
+  // Close menu when clicking outside
+  useEffect(() => {
+    const handleClickOutside = (event: MouseEvent) => {
+      if (
+        menuRef.current &&
+        !menuRef.current.contains(event.target as Node) &&
+        buttonRef.current &&
+        !buttonRef.current.contains(event.target as Node)
+      ) {
+        setIsOpen(false);
+      }
+    };
+
+    if (isOpen) {
+      document.addEventListener('mousedown', handleClickOutside);
+    }
+
+    return () => {
+      document.removeEventListener('mousedown', handleClickOutside);
+    };
+  }, [isOpen]);
+
+  const handleToggle = (columnName: string, event?: React.MouseEvent) => {
+    if (event) {
+      event.stopPropagation();
+    }
+    onToggleColumn(columnName);
+  };
+
+  const handleShowAll = (event: React.MouseEvent) => {
+    event.stopPropagation();
+    if (onShowAll) {
+      onShowAll();
+    }
+    setIsOpen(false);
+  };
+
+  const handleHideAll = (event: React.MouseEvent) => {
+    event.stopPropagation();
+    if (onHideAll) {
+      onHideAll();
+    }
+    setIsOpen(false);
+  };
+
+  return (
+    <div style={{ position: 'relative', display: 'inline-block' }}>
+      <Button
+        ref={buttonRef}
+        kind="ghost"
+        size="sm"
+        renderIcon={View}
+        hasIconOnly
+        iconDescription="Column visibility"
+        onClick={() => setIsOpen(!isOpen)}
+        disabled={disabled}
+      >
+        Columns
+      </Button>
+      {visibleCount > 0 && (
+        <span
+          style={{
+            position: 'absolute',
+            top: '-4px',
+            right: '-4px',
+            backgroundColor: '#0f62fe',
+            color: 'white',
+            fontSize: '10px',
+            minWidth: '16px',
+            height: '16px',
+            borderRadius: '8px',
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+            padding: '0 4px',
+          }}
+        >
+          {visibleCount}
+        </span>
+      )}
+
+      {isOpen && (
+        <Layer>
+          <div
+            ref={menuRef}
+            style={{
+              position: 'absolute',
+              top: '100%',
+              right: 0,
+              marginTop: '4px',
+              backgroundColor: 'white',
+              border: '1px solid #e0e0e0',
+              borderRadius: '4px',
+              boxShadow: '0 2px 8px rgba(0,0,0,0.15)',
+              minWidth: '250px',
+              maxHeight: '400px',
+              overflowY: 'auto',
+              zIndex: 9999,
+            }}
+            onClick={(e) => e.stopPropagation()}
+          >
+            <div style={{ padding: '0.5rem' }}>
+              <div style={{ fontWeight: 'bold', marginBottom: '0.5rem', fontSize: '0.875rem' }}>
+                Column Visibility ({visibleCount} of {columns.length} shown)
+              </div>
+
+              {columns.length > 1 && (
+                <div style={{ marginBottom: '0.5rem', borderBottom: '1px solid #e0e0e0', paddingBottom: '0.5rem' }}>
+                  {onShowAll && (
+                    <Button
+                      kind="ghost"
+                      size="sm"
+                      onClick={handleShowAll}
+                      style={{ width: '100%', justifyContent: 'flex-start', marginBottom: '0.25rem' }}
+                    >
+                      Show all
+                    </Button>
+                  )}
+                  {onHideAll && (
+                    <Button
+                      kind="ghost"
+                      size="sm"
+                      onClick={handleHideAll}
+                      style={{ width: '100%', justifyContent: 'flex-start' }}
+                    >
+                      Hide all
+                    </Button>
+                  )}
+                </div>
+              )}
+
+              <div style={{ maxHeight: '300px', overflowY: 'auto' }}>
+                {columns.map((columnName) => (
+                  <div
+                    key={columnName}
+                    style={{
+                      padding: '0.5rem',
+                      display: 'flex',
+                      alignItems: 'center',
+                      gap: '0.5rem',
+                      cursor: 'pointer',
+                      borderRadius: '4px',
+                      transition: 'background-color 0.1s',
+                    }}
+                    onMouseEnter={(e) => {
+                      e.currentTarget.style.backgroundColor = '#f3f3f3';
+                    }}
+                    onMouseLeave={(e) => {
+                      e.currentTarget.style.backgroundColor = 'transparent';
+                    }}
+                    onClick={(e) => handleToggle(columnName, e)}
+                  >
+                    <Checkbox
+                      id={`col-${columnName}`}
+                      checked={!hiddenColumns.has(columnName)}
+                      onChange={() => handleToggle(columnName)}
+                      labelText={columnName}
+                      style={{ margin: 0 }}
+                    />
+                  </div>
+                ))}
+              </div>
+            </div>
+          </div>
+        </Layer>
+      )}
+    </div>
+  );
+};
+
+export default ColumnVisibilityMenu;