arc-humans-interface-db/src/arcRender_retool_inline.js

/**
 * ARC Puzzle Renderer for Retool - INLINE VERSION
 *
 * USAGE IN RETOOL HTML COMPONENT:
 * Paste this entire code block wrapped in {{ ... }} in your HTML component
 *
 * Example for database query:
 * {{
 *   (function() {
 *     // ... paste this entire file content here ...
 *   })()
 * }}
 */

(function() {
  // =============================================
  // GET DATA FROM RETOOL QUERY
  // =============================================

  // ADJUST THESE LINES based on your Retool setup:
  const selectedPuzzle = problem_select.value; // Your selector name

  // Handle empty selection
  if (!selectedPuzzle) {
    return '<div style="color: orange; padding: 20px; font-family: Arial;">No puzzle data available. Please select a problem.</div>';
  }

  // Use the selected row directly
  const row = selectedPuzzle;

  // Parse JSON if it's stored as text, otherwise use as-is
  let puzzleData;
  try {
    puzzleData = typeof row.json === 'string'
      ? JSON.parse(row.json)
      : row.json;
  } catch (e) {
    return '<div style="color: red; padding: 20px; font-family: Arial;">Error parsing JSON: ' + e.message + '</div>';
  }

  // =============================================
  // ARC RENDERER CODE
  // =============================================

  // Color mapping for ARC puzzles (0-9)
  const ARC_COLORS = {
    0: '#000000', // black
    1: '#0074D9', // blue
    2: '#FF4136', // red
    3: '#2ECC40', // green
    4: '#FFDC00', // yellow
    5: '#AAAAAA', // grey
    6: '#F012BE', // magenta
    7: '#FF851B', // orange
    8: '#7FDBFF', // light blue
    9: '#85144b'  // dark red
  };

  /**
   * Renders a single grid as HTML
   */
  function renderGrid(grid, label) {
    if (!grid || grid.length === 0) {
      return '<div style="color: red;">Invalid grid data</div>';
    }

    const rows = grid.length;
    const cols = grid[0].length;
    const cellSize = 20; // Fixed 20px per cell

    let html = '<div style="display: inline-block; margin: 10px;">';

    // Add dimension label
    if (label) {
      html += `<div style="text-align: center; margin-bottom: 5px; font-size: 12px; color: #333;">${label}</div>`;
    }

    // Grid container with black border
    html += `<div style="display: inline-block; border: 1px solid #000000;">`;

    // Render each row
    for (let r = 0; r < rows; r++) {
      html += '<div style="display: flex; line-height: 0;">';

      // Render each cell in the row
      for (let c = 0; c < cols; c++) {
        const cellValue = grid[r][c];
        const color = ARC_COLORS[cellValue] || '#FFFFFF';

        html += `<div style="width: ${cellSize}px; height: ${cellSize}px; background-color: ${color}; outline: 0.5px solid rgba(200, 200, 200, 0.3); outline-offset: -0.5px;"></div>`;
      }

      html += '</div>'; // Close row
    }

    html += '</div>'; // Close grid container
    html += '</div>'; // Close inline-block wrapper

    return html;
  }

  /**
   * Renders a training or test pair (input and output side-by-side)
   */
  function renderPair(inputGrid, outputGrid, exampleIndex) {
    let html = '';

    // Add spacing between examples (except for the first one)
    if (exampleIndex > 0) {
      html += '<div style="height: 40px;"></div>';
    }

    html += '<div style="display: flex; align-items: flex-start; justify-content: flex-start;">';

    // Render input grid
    const inputRows = inputGrid.length;
    const inputCols = inputGrid[0].length;
    html += renderGrid(inputGrid, `${inputCols}×${inputRows}`);

    // Add spacing between input and output (2 cells worth = 40px)
    html += '<div style="width: 40px;"></div>';

    // Render output grid if provided
    if (outputGrid) {
      const outputRows = outputGrid.length;
      const outputCols = outputGrid[0].length;
      html += renderGrid(outputGrid, `${outputCols}×${outputRows}`);
    }

    html += '</div>'; // Close pair container

    return html;
  }

  /**
   * Main rendering function
   */
  function renderArcPuzzle(data) {
    // Validate data structure
    if (!data || !data.train || !data.test) {
      return '<div style="color: red;">Error: JSON must contain "train" and "test" properties</div>';
    }

    let html = '<div style="font-family: Arial, sans-serif;">';

    // === TRAINING SECTION ===
    html += '<div style="margin-bottom: 60px;">';
    html += '<h3 style="margin: 0 0 20px 0; color: #333;">Training Examples</h3>';

    data.train.forEach((example, index) => {
      html += renderPair(example.input, example.output, index);
    });

    html += '</div>'; // Close training section

    // === TEST SECTION ===
    html += '<div>';
    html += '<h3 style="margin: 0 0 20px 0; color: #333;">Test</h3>';

    data.test.forEach((example, index) => {
      // Render both test input and output
      html += renderPair(example.input, example.output, index);
    });

    html += '</div>'; // Close test section

    html += '</div>'; // Close main container

    return html;
  }

  // =============================================
  // RENDER AND RETURN
  // =============================================

  return renderArcPuzzle(puzzleData);

})()