「React」からReact、{UseState}をインポートします。
「racep-color」から{chromepicker}をインポートします。

関数depthmapvisualizer（props）{
  const {depthmap} = props;

  const [colors、setcolors] = uesestate（[[
    {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] = uesestate（false）;
  const [currentColor、setCurrentColor] = uesestate（{r：0、g：0、b：255}）;

  const getColor =（深さ）=> {
    if（深さ<0.25）{
      return `rgb（0、$ {math.floor（深さ * 1020）}、255）`;
    } else if（深さ<0.5）{
      return `rgb（0、255、$ {math.floor（1020-深さ * 1020）}）`;
    } else if（深さ<0.75）{
      return `rgb（$ {math.floor（深さ * 1020）-255}、255、0）`;
    } それ以外 {
      return `rgb（255、$ {math.floor（1020-深さ * 1020）}、0）`;
    }
  };

  const remarizedepthmap =（depthmap）=> {
    const height = depthmap.length;
    const width = depthmap [0] .length;

    maxdepth = number.min_value;
    mindepth = number.max_value;

    for（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]）;
      }
    }

    depthrange = maxdepth -mindepth;

    lemizeddepthmap = [];

    for（i = 0; i <height; i ++）{
      let row = [];
      for（let j = 0; j <width; j ++）{
        深さ=（depthmap [i] [j]  -  mindepth） / depthrangeとします。
        color = getColor（深さ）;
        row.push（color）;
      }
      remarizeddepthmap.push（row）;
    }

    return remarizeddepthmap;
  };

  const handlecolormapselection =（newcolor）=> {
    newcolors = [... colors];
    newcolors.push（newcolor.rgb）;
    setcolors（newcolors）;
    setDisplayColorpicker（false）;
  };

  remurizeddepthmap = remarizepthmap（depthmap）;
  let height = remarizeddepthmap.length;
  width = remarizeddepthmap [0] .length;

  let colorbar = colors.map（（color、index）=> {
    戻る （
      <div key = {color-$ {index}} style = {{backgroundcolor： `rgb（$ {color.r}、$ {color.g}、$ {color.b}）`、height： '20px'、幅： `$ {100 / colors.length}％`}}>
        <div style = {{textalign： 'center'}}> {index} </div>
      </div>
    ）;
  }）;

  imagerows = remarizeddepthmap.map（（row、rowindex）=> {
    imagecells = row.map（（color、cellindex）=> {
      戻る （
        <td key = {cell-$ {rowindex}  -  $ {cellindex}} style = {{backgroundcolor：color、</tr>
）;
}）;

ImageTable =（
<表>
<tbody>
{Imagerows}
</tbody>
</table>
）;

戻る （
<div>
<div style = {{display： 'flex'、alignitems： 'center’}}>
<div style = {{marginright： '10px’}}>深さ</div>
{colorbar}
</div>
<div>
{imagetable}
</div>
<ボタンonclick = {handlecolormapselection}>カラーマップを選択</button>
</div>
）;
}

デフォルトのdepthmapvisualizerをエクスポートします。

このコードは、深度マップを表す2D配列を採取し、各ピクセルが深さ値に基づいて色付けされているテーブルとして視覚化するReactコンポーネントです。コンポーネントは深さ値を正規化し、getColor（）関数を使用して色にマッピングします。正規化に使用されるカラーマップは、「Color Mapの選択」ボタンをクリックしてアクセスしたカラーピッカーを介してユーザーが変更できます。現在のカラーマップは、深度マップの上のカラーバーとして表示されます。

コンポーネントは、Coler Pickerが表示されている（DisplayColorpicker）、現在選択されている色（CurrentColor）の場合、現在のカラーマップ（色）の状態変数を管理するために、React Hook、特にUseState（）を使用します。

コンポーネントは、まず、正規化されたEpthMap（）関数を使用して深度マップを正規化します。これは、マップの最小値と最大深度値を計算し、カラーマップの最小値と最大値にマッピングします。

次に、正規化された深さマップを使用して、getColor（）関数を使用してその正規化された深さ値に基づいて各セルが色付けされるHTMLテーブルを生成します。テーブルの上のカラーバーには、現在のカラーマップの色が表示され、各色のインデックスが対応するセルの中心に表示されます。
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.