import React, { useState } from 'react';
import { ChromePicker } from 'react-color';

function DepthMapVisualizer(props) {
  const { depthMap } = props;

  const [colors, setColors] = useState([
    { r: 0, g: 0, b: 255 },
    { r: 0, g: 255, b: 0 },
    { r: 255, g: 255, b: 0 },
    { r: 255, g: 0, b: 0 }
  ]);

  const [displayColorPicker, setDisplayColorPicker] = useState(false);
  const [currentColor, setCurrentColor] = useState({ r: 0, g: 0, b: 255 });

  const getColor = (depth) => {
    if (depth < 0.25) {
      return `rgb(0, ${Math.floor(depth * 1020)}, 255)`;
    } else if (depth < 0.5) {
      return `rgb(0, 255, ${Math.floor(1020 - depth * 1020)})`;
    } else if (depth < 0.75) {
      return `rgb(${Math.floor(depth * 1020) - 255}, 255, 0)`;
    } else {
      return `rgb(255, ${Math.floor(1020 - depth * 1020)}, 0)`;
    }
  };

  const normalizeDepthMap = (depthMap) => {
    const height = depthMap.length;
    const width = depthMap[0].length;

    let maxDepth = Number.MIN_VALUE;
    let minDepth = Number.MAX_VALUE;

    for (let i = 0; i < height; i++) {
      for (let j = 0; j < width; j++) {
        maxDepth = Math.max(maxDepth, depthMap[i][j]);
        minDepth = Math.min(minDepth, depthMap[i][j]);
      }
    }

    let depthRange = maxDepth - minDepth;

    let normalizedDepthMap = [];

    for (let i = 0; i < height; i++) {
      let row = [];
      for (let j = 0; j < width; j++) {
        let depth = (depthMap[i][j] - minDepth) / depthRange;
        let color = getColor(depth);
        row.push(color);
      }
      normalizedDepthMap.push(row);
    }

    return normalizedDepthMap;
  };

  const handleColorMapSelection = (newColor) => {
    let newColors = [...colors];
    newColors.push(newColor.rgb);
    setColors(newColors);
    setDisplayColorPicker(false);
  };

  let normalizedDepthMap = normalizeDepthMap(depthMap);
  let height = normalizedDepthMap.length;
  let width = normalizedDepthMap[0].length;

  let colorBar = colors.map((color, index) => {
    return (
      <div key={color-${index}} style={{ backgroundColor: `rgb(${color.r},${color.g},${color.b})`, height: '20px', width: `${100 / colors.length}%` }}>
        <div style={{ textAlign: 'center' }}>{index}</div>
      </div>
    );
  });

  let imageRows = normalizedDepthMap.map((row, rowIndex) => {
    let imageCells = row.map((color, cellIndex) => {
      return (
        <td key={cell-${rowIndex}-${cellIndex}} style={{ backgroundColor: color,</tr>
);
});

let imageTable = (
<table>
<tbody>
{imageRows}
</tbody>
</table>
);

return (
<div>
<div style={{ display: ‘flex’, alignItems: ‘center’ }}>
<div style={{ marginRight: ‘10px’ }}>Depth</div>
{colorBar}
</div>
<div>
{imageTable}
</div>
<button onClick={handleColorMapSelection}>Select Color Map</button>
</div>
);
}

export default DepthMapVisualizer;

This code is a React component that takes a 2D array representing a depth map and visualizes it as a table where each pixel is colored based on its depth value. The component normalizes the depth values and maps them to a color using the getColor() function. The color map used for normalization can be modified by the user through a color picker accessed by clicking the “Select Color Map” button. The current color map is displayed as a color bar above the depth map.

The component uses React hooks, specifically useState(), to manage state variables for the current color map (colors), whether the color picker is displayed (displayColorPicker), and the currently selected color (currentColor).

The component first normalizes the depth map using the normalizeDepthMap() function, which calculates the minimum and maximum depth values in the map and maps them to the minimum and maximum values of the color map.

The normalized depth map is then used to generate an HTML table where each cell is colored based on its normalized depth value using the getColor() function. The color bar above the table displays the colors in the current color map, with the index of each color displayed in the center of its corresponding cell.
spam fails_task lang_mismatch pii not_appropriate hate_speech sexual_content quality toxicity humor helpfulness creativity violence