@the-syllabus/analysis-renderers 0.2.0 → 0.4.0

package/src/sub-renderers/SubRenderers.tsx

@@ -21,6 +21,8 @@
  *   dialectical_pair      — Two-panel tension visualization for thesis/antithesis contrasts
  *   rich_description_list — Stacked items with colored borders for paragraph-length descriptions
  *   phase_timeline        — Connected timeline with prominent phase nodes for temporal data
+ *   annotated_prose       — Enhanced prose with paragraph markers, pull-quotes, and rhetorical highlighting
+ *   dependency_matrix     — Adjacency matrix / heatmap for directed chapter dependencies
  *   distribution_summary  — Visual bar chart with dominant highlight, counts, and optional narrative
  */
 
@@ -57,6 +59,8 @@ const SUB_RENDERER_MAP: Record<string, React.FC<SubRendererProps>> = {
   dialectical_pair: DialecticalPair,
   rich_description_list: RichDescriptionList,
   phase_timeline: PhaseTimeline,
+  dependency_matrix: DependencyMatrix,
+  annotated_prose: AnnotatedProse,
   distribution_summary: DistributionSummary,
 };
 
@@ -3333,6 +3337,361 @@ function PhaseTimeline({ data, config }: SubRendererProps) {
  *   _activeFilter?: string | null            -- highlights active bar
  *   _groups?: Group[]                        -- live groups (overrides distribution field)
  */
+
+// ── annotated_prose ───────────────────────────────────────────
+// Enhanced prose rendering with paragraph detection, pull-quote extraction,
+// and subtle numbered markers. Upgrades prose_block for longer analytical text.
+//
+// Config:
+//   pull_quote_min_length — minimum sentence length to be considered a pull-quote (default 80)
+//   show_paragraph_numbers — show subtle paragraph numbers (default true)
+//   highlight_markers — rhetorical markers to highlight (default: common analytical terms)
+
+const DEFAULT_MARKERS = [
+  'crucial', 'fundamentally', 'the key claim', 'central to', 'decisive',
+  'turning point', 'paradox', 'contradiction', 'however', 'nevertheless',
+  'most importantly', 'significantly', 'critically', 'the core',
+];
+
+function AnnotatedProse({ data, config }: SubRendererProps) {
+  const { tokens } = useDesignTokens();
+
+  const text = typeof data === 'string'
+    ? data
+    : typeof data === 'object' && data !== null
+      ? (data as Record<string, unknown>)._prose_output as string
+        || (data as Record<string, unknown>).text as string
+        || (data as Record<string, unknown>).content as string
+        || (data as Record<string, unknown>).prose as string
+        || ''
+      : '';
+
+  if (!text) return null;
+
+  const pullQuoteMinLen = (config.pull_quote_min_length as number) || 80;
+  const showParaNums = config.show_paragraph_numbers !== false;
+  const markers = (config.highlight_markers as string[]) || DEFAULT_MARKERS;
+
+  // Split into paragraphs
+  const paragraphs = text.split(/\n\n+/).map(p => p.trim()).filter(Boolean);
+
+  // Find the best pull-quote: longest sentence across all paragraphs that contains a marker
+  let bestQuote = '';
+  let bestQuoteParaIdx = -1;
+  for (let pi = 0; pi < paragraphs.length; pi++) {
+    const sentences = paragraphs[pi].split(/(?<=[.!?])\s+/);
+    for (const sent of sentences) {
+      if (sent.length >= pullQuoteMinLen && sent.length > bestQuote.length) {
+        const lower = sent.toLowerCase();
+        if (markers.some(m => lower.includes(m))) {
+          bestQuote = sent;
+          bestQuoteParaIdx = pi;
+        }
+      }
+    }
+  }
+  // Fallback: just pick longest sentence if no marker match
+  if (!bestQuote) {
+    for (let pi = 0; pi < paragraphs.length; pi++) {
+      const sentences = paragraphs[pi].split(/(?<=[.!?])\s+/);
+      for (const sent of sentences) {
+        if (sent.length >= pullQuoteMinLen && sent.length > bestQuote.length) {
+          bestQuote = sent;
+          bestQuoteParaIdx = pi;
+        }
+      }
+    }
+  }
+
+  const accentColor = tokens.primitives.series_palette[0] || '#6366f1';
+
+  // Highlight markers in text
+  const highlightText = (text: string): React.ReactNode[] => {
+    if (markers.length === 0) return [text];
+    const pattern = new RegExp(`(${markers.map(m => m.replace(/[.*+?^${}()|[\]\\]/g, '\\$&')).join('|')})`, 'gi');
+    const parts = text.split(pattern);
+    return parts.map((part, i) => {
+      if (pattern.test(part)) {
+        return React.createElement('span', {
+          key: i,
+          style: {
+            fontWeight: 600,
+            color: accentColor,
+          },
+        }, part);
+      }
+      return part;
+    });
+  };
+
+  return (
+    <div style={{
+      fontFamily: 'var(--font-serif, Georgia, serif)',
+      lineHeight: 1.75,
+      color: 'var(--dt-ink-primary, #1a1a2e)',
+    }}>
+      {paragraphs.map((para, idx) => {
+        const isQuotePara = idx === bestQuoteParaIdx;
+
+        return React.createElement(React.Fragment, { key: idx },
+          // Pull-quote callout (inserted after the paragraph it was extracted from)
+          showParaNums ? React.createElement('div', {
+            style: {
+              display: 'flex',
+              gap: '12px',
+              marginBottom: idx === paragraphs.length - 1 ? 0 : '1.1em',
+            },
+          },
+            // Paragraph number
+            React.createElement('span', {
+              style: {
+                fontSize: '0.7rem',
+                fontFamily: 'var(--font-mono, monospace)',
+                color: 'var(--dt-ink-tertiary, #9ca3af)',
+                minWidth: '18px',
+                textAlign: 'right',
+                paddingTop: '3px',
+                userSelect: 'none',
+              },
+            }, `${idx + 1}`),
+            // Paragraph text
+            React.createElement('p', {
+              style: {
+                margin: 0,
+                fontSize: '0.92rem',
+              },
+            }, ...highlightText(para)),
+          ) : React.createElement('p', {
+            style: {
+              margin: 0,
+              marginBottom: idx === paragraphs.length - 1 ? 0 : '1.1em',
+              fontSize: '0.92rem',
+            },
+          }, ...highlightText(para)),
+
+          // Pull-quote callout after the source paragraph
+          isQuotePara && bestQuote ? React.createElement('blockquote', {
+            key: `quote-${idx}`,
+            style: {
+              margin: '1em 0 1.2em 0',
+              padding: '12px 16px',
+              borderLeft: `3px solid ${accentColor}`,
+              background: 'var(--dt-surface-card, #f8f6f3)',
+              borderRadius: '0 var(--radius-sm, 4px) var(--radius-sm, 4px) 0',
+              fontStyle: 'italic',
+              fontSize: '0.88rem',
+              lineHeight: 1.65,
+              color: 'var(--dt-ink-secondary, #374151)',
+            },
+          }, `"${bestQuote}"`) : null,
+        );
+      })}
+    </div>
+  );
+}
+
+// ── dependency_matrix ─────────────────────────────────────────
+// Adjacency matrix / heatmap for directed relationships.
+// Data: array of {source, target, type} objects.
+// Config:
+//   source_field — field name for row source (default "chapter")
+//   target_field — field name for column target (default "depends_on")
+//   type_field   — field name for relationship type (default "dependency_type")
+//   abbreviate_labels — shorten labels (default true)
+
+function DependencyMatrix({ data, config }: SubRendererProps) {
+  const [hoveredCell, setHoveredCell] = React.useState<{ row: number; col: number } | null>(null);
+  const { tokens } = useDesignTokens();
+
+  if (!data || !Array.isArray(data) || data.length === 0) return null;
+
+  const sourceField = (config.source_field as string) || 'chapter';
+  const targetField = (config.target_field as string) || 'depends_on';
+  const typeField = (config.type_field as string) || 'dependency_type';
+  const abbreviate = config.abbreviate_labels !== false;
+
+  const palette = tokens.primitives.series_palette;
+
+  // Extract unique labels (preserving order of first appearance)
+  const labelSet = new Set<string>();
+  for (const item of data) {
+    const obj = item as Record<string, unknown>;
+    const src = String(obj[sourceField] || '');
+    const tgt = String(obj[targetField] || '');
+    if (src) labelSet.add(src);
+    if (tgt) labelSet.add(tgt);
+  }
+  const labels = Array.from(labelSet);
+
+  // Extract unique types for legend
+  const typeSet = new Set<string>();
+  for (const item of data) {
+    const obj = item as Record<string, unknown>;
+    const t = String(obj[typeField] || '');
+    if (t) typeSet.add(t);
+  }
+  const types = Array.from(typeSet);
+  const typeColorMap: Record<string, string> = {};
+  types.forEach((t, i) => { typeColorMap[t] = palette[i % palette.length]; });
+
+  // Build adjacency map: [rowIdx][colIdx] = type
+  const adjacency: Record<string, Record<string, string>> = {};
+  for (const item of data) {
+    const obj = item as Record<string, unknown>;
+    const src = String(obj[sourceField] || '');
+    const tgt = String(obj[targetField] || '');
+    const typ = String(obj[typeField] || '');
+    if (src && tgt) {
+      if (!adjacency[src]) adjacency[src] = {};
+      adjacency[src][tgt] = typ;
+    }
+  }
+
+  // Abbreviation helper
+  const abbrev = (label: string): string => {
+    if (!abbreviate) return label;
+    // "Chapter 1" → "Ch1", "Appendix 1" → "App1", or first 4 chars
+    return label
+      .replace(/^Chapter\s*/i, 'Ch')
+      .replace(/^Appendix\s*/i, 'App')
+      .replace(/^Part\s*/i, 'P')
+      .slice(0, 6);
+  };
+
+  const cellSize = 32;
+  const labelWidth = 80;
+  const hovered = hoveredCell ? {
+    src: labels[hoveredCell.row],
+    tgt: labels[hoveredCell.col],
+    type: adjacency[labels[hoveredCell.row]]?.[labels[hoveredCell.col]],
+  } : null;
+
+  return (
+    <div style={{ overflowX: 'auto' }}>
+      {/* Tooltip */}
+      {hovered?.type && (
+        <div style={{
+          padding: '6px 10px',
+          marginBottom: '8px',
+          fontSize: '0.82rem',
+          background: 'var(--dt-surface-card, #f8f6f3)',
+          border: '1px solid var(--color-border, #e2e5e9)',
+          borderRadius: 'var(--radius-sm, 4px)',
+          color: 'var(--dt-ink-primary, #1a1a2e)',
+        }}>
+          <strong>{hovered.src}</strong> → <strong>{hovered.tgt}</strong>: {hovered.type.replace(/_/g, ' ')}
+        </div>
+      )}
+
+      <table style={{
+        borderCollapse: 'collapse',
+        fontSize: '0.75rem',
+        fontFamily: 'var(--font-mono, monospace)',
+      }}>
+        {/* Column headers */}
+        <thead>
+          <tr>
+            <th style={{ width: labelWidth, minWidth: labelWidth }} />
+            {labels.map((label, ci) => (
+              <th key={ci} style={{
+                width: cellSize,
+                minWidth: cellSize,
+                textAlign: 'center',
+                padding: '2px',
+                fontWeight: 500,
+                color: 'var(--dt-ink-secondary, #6b7280)',
+                writingMode: labels.length > 6 ? 'vertical-rl' : undefined,
+                transform: labels.length > 6 ? 'rotate(180deg)' : undefined,
+                height: labels.length > 6 ? 60 : undefined,
+              }}>
+                {abbrev(label)}
+              </th>
+            ))}
+          </tr>
+        </thead>
+        <tbody>
+          {labels.map((rowLabel, ri) => (
+            <tr key={ri}>
+              <td style={{
+                padding: '2px 6px',
+                textAlign: 'right',
+                fontWeight: 500,
+                color: 'var(--dt-ink-secondary, #6b7280)',
+                whiteSpace: 'nowrap',
+              }}>
+                {abbrev(rowLabel)}
+              </td>
+              {labels.map((colLabel, ci) => {
+                const cellType = adjacency[rowLabel]?.[colLabel];
+                const isDiagonal = ri === ci;
+                const isHovered = hoveredCell?.row === ri && hoveredCell?.col === ci;
+
+                return (
+                  <td
+                    key={ci}
+                    onMouseEnter={() => setHoveredCell({ row: ri, col: ci })}
+                    onMouseLeave={() => setHoveredCell(null)}
+                    style={{
+                      width: cellSize,
+                      height: cellSize,
+                      textAlign: 'center',
+                      border: '1px solid var(--color-border-light, #eef0f2)',
+                      background: isDiagonal
+                        ? 'var(--dt-surface-bg, #f0ede6)'
+                        : cellType
+                          ? typeColorMap[cellType]
+                          : 'transparent',
+                      opacity: cellType ? (isHovered ? 1 : 0.75) : 1,
+                      cursor: cellType ? 'pointer' : 'default',
+                      transition: 'opacity 0.15s',
+                      borderRadius: isHovered ? '2px' : undefined,
+                      boxShadow: isHovered && cellType ? '0 0 0 2px var(--dt-ink-primary, #1a1a2e)' : undefined,
+                    }}
+                  >
+                    {cellType && (
+                      <span style={{
+                        display: 'inline-block',
+                        width: 10,
+                        height: 10,
+                        borderRadius: 2,
+                        background: '#fff',
+                        opacity: 0.6,
+                      }} />
+                    )}
+                  </td>
+                );
+              })}
+            </tr>
+          ))}
+        </tbody>
+      </table>
+
+      {/* Legend */}
+      <div style={{
+        display: 'flex',
+        gap: '12px',
+        marginTop: '10px',
+        flexWrap: 'wrap',
+        fontSize: '0.78rem',
+        color: 'var(--dt-ink-secondary, #6b7280)',
+      }}>
+        {types.map((type, i) => (
+          <span key={type} style={{ display: 'flex', alignItems: 'center', gap: '4px' }}>
+            <span style={{
+              display: 'inline-block',
+              width: 12,
+              height: 12,
+              borderRadius: 2,
+              background: typeColorMap[type],
+            }} />
+            {type.replace(/_/g, ' ')}
+          </span>
+        ))}
+      </div>
+    </div>
+  );
+}
+
 export function DistributionSummary({ data, config }: SubRendererProps) {
   const { getCategoryColor, getLabel } = useDesignTokens();
   const [narrativeExpanded, setNarrativeExpanded] = useState(false);