how to replace the color chunk in top heatmap

[honghh2018]

Thanks to develop the great tools,
I want to plot the heatmap with color bar top in heatmap like below,picture

but i get the below picture

even thought i relpace the element the trace in array, it color bar like below picture

It distance from the body heatmap

var z_data = [];
   for (var i = 0; i < 15; i++) { // 15行基因
       var temp_row = [];
       for (var j = 0; j < 100; j++) { // 每行100个细胞
           temp_row.push(Math.random());
       }
       z_data.push(temp_row);
   }
   var genes = Array.from({length: 15}, (_, i) => `Gene${i + 1}`);
   var cells = Array.from({length: 100}, (_, i) => `Cell${i + 1}`);

   // 分群信息，分组不均匀
   var groupAssignments = [20, 15, 25, 10, 30]; // 各组的细胞数
   var clusterColorBar = [];
   var groupColors = ['red', 'green', 'blue', 'yellow', 'purple']; // 分组颜色

   groupAssignments.forEach((count, index) => {
       clusterColorBar = clusterColorBar.concat(Array(count).fill(index + 1));
   });


   var trace = [

       {
           x: cells,
           y: ['Cluster'],
           z: [clusterColorBar.map(value => value)], // 使用实际数值
           type: 'heatmap',
           colorscale: groupColors.map((color, index) => [index / (groupColors.length), color]),
           showscale: false,
           hoverinfo: 'skip', // 禁用悬停信息
           domain: {
               x: [0.5, 1],
               y: [0, .5]
           },
       },
       {
           z: z_data,
           x: cells,
           y: genes,
           type: 'heatmap',
           colorscale: 'Viridis',
           // hoverinfo: 'all' // 默认显示所有信息
           domain: {
               x: [0.5, 1],
               y: [0, .5]
           }

       }

   ]



   // 绘制图表
   // Plotly.newPlot('heatmap', [clusterTrace,heatmapTrace], layout);
   // Plotly.newPlot('heatmap', [clusterTrace,heatmapTrace], layout);
   Plotly.newPlot('heatmap', trace);
   trace[1].domain.x=[0,1]
   trace[1].domain.y=[0,1]

any advice would be appreciated,
Best,
hanhuihong