plotのタイトル表示

frontend/src/api/outputs/Outputs.ts

@@ -1,5 +1,5 @@
 import axios from 'utils/axios'
-
+import { PlotMetaData } from 'store/slice/DisplayData/DisplayDataType'
 import { BASE_URL } from 'const/API'
 
 export type TimeSeriesData = {
@@ -8,17 +8,25 @@ export type TimeSeriesData = {
   }
 }
 
-export async function getTimeSeriesInitDataApi(
-  path: string,
-): Promise<{ data: TimeSeriesData; xrange: string[]; std: TimeSeriesData }> {
+export async function getTimeSeriesInitDataApi(path: string): Promise<{
+  data: TimeSeriesData
+  xrange: string[]
+  std: TimeSeriesData
+  meta?: PlotMetaData
+}> {
   const response = await axios.get(`${BASE_URL}/outputs/inittimedata/${path}`)
   return response.data
 }
 
 export async function getTimeSeriesDataByIdApi(
   path: string,
   index: string,
-): Promise<{ data: TimeSeriesData; xrange: string[]; std: TimeSeriesData }> {
+): Promise<{
+  data: TimeSeriesData
+  xrange: string[]
+  std: TimeSeriesData
+  meta?: PlotMetaData
+}> {
   const response = await axios.get(`${BASE_URL}/outputs/timedata/${path}`, {
     params: {
       index: index,
@@ -27,18 +35,24 @@ export async function getTimeSeriesDataByIdApi(
   return response.data
 }
 
-export async function getTimeSeriesAllDataApi(
-  path: string,
-): Promise<{ data: TimeSeriesData; xrange: string[]; std: TimeSeriesData }> {
+export async function getTimeSeriesAllDataApi(path: string): Promise<{
+  data: TimeSeriesData
+  xrange: string[]
+  std: TimeSeriesData
+  meta?: PlotMetaData
+}> {
   const response = await axios.get(`${BASE_URL}/outputs/alltimedata/${path}`)
   return response.data
 }
 
 export type HeatMapData = number[][]
 
-export async function getHeatMapDataApi(
-  path: string,
-): Promise<{ data: HeatMapData; columns: string[]; index: string[] }> {
+export async function getHeatMapDataApi(path: string): Promise<{
+  data: HeatMapData
+  columns: string[]
+  index: string[]
+  meta?: PlotMetaData
+}> {
   const response = await axios.get(`${BASE_URL}/outputs/data/${path}`)
   return response.data
 }
@@ -52,7 +66,7 @@ export async function getImageDataApi(
     startIndex?: number
     endIndex?: number
   },
-): Promise<{ data: ImageData }> {
+): Promise<{ data: ImageData; meta?: PlotMetaData }> {
   const response = await axios.get(`${BASE_URL}/outputs/image/${path}`, {
     params: {
       workspace_id: params.workspaceId,
@@ -68,7 +82,7 @@ export type CsvData = number[][]
 export async function getCsvDataApi(
   path: string,
   params: { workspaceId: number },
-): Promise<{ data: CsvData }> {
+): Promise<{ data: CsvData; meta?: PlotMetaData }> {
   const response = await axios.get(`${BASE_URL}/outputs/csv/${path}`, {
     params: { workspace_id: params.workspaceId },
   })
@@ -81,7 +95,7 @@ export type RoiData = number[][][]
 export async function getRoiDataApi(
   path: string,
   params: { workspaceId: number },
-): Promise<{ data: RoiData }> {
+): Promise<{ data: RoiData; meta?: PlotMetaData }> {
   const response = await axios.get(`${BASE_URL}/outputs/image/${path}`, {
     params: { workspace_id: params.workspaceId },
   })
@@ -96,7 +110,7 @@ export type ScatterData = {
 
 export async function getScatterDataApi(
   path: string,
-): Promise<{ data: ScatterData }> {
+): Promise<{ data: ScatterData; meta?: PlotMetaData }> {
   const response = await axios.get(`${BASE_URL}/outputs/data/${path}`, {})
   return response.data
 }
@@ -107,9 +121,12 @@ export type BarData = {
   }
 }
 
-export async function getBarDataApi(
-  path: string,
-): Promise<{ data: BarData; columns: string[]; index: string[] }> {
+export async function getBarDataApi(path: string): Promise<{
+  data: BarData
+  columns: string[]
+  index: string[]
+  meta?: PlotMetaData
+}> {
   const response = await axios.get(`${BASE_URL}/outputs/data/${path}`, {})
   return response.data
 }
@@ -118,15 +135,15 @@ export type HTMLData = string
 
 export async function getHTMLDataApi(
   path: string,
-): Promise<{ data: HTMLData }> {
+): Promise<{ data: HTMLData; meta?: PlotMetaData }> {
   const response = await axios.get(`${BASE_URL}/outputs/html/${path}`, {})
   return response.data
 }
 
 export async function addRoiApi(
   path: string,
   data: { posx: number; posy: number; sizex: number; sizey: number },
-): Promise<{ data: HTMLData }> {
+): Promise<{ data: HTMLData; meta?: PlotMetaData }> {
   const response = await axios.post(
     `${BASE_URL}/outputs/image/${path}/add_roi`,
     data,
@@ -137,7 +154,7 @@ export async function addRoiApi(
 export async function mergeRoiApi(
   path: string,
   data: { ids: number[] },
-): Promise<{ data: HTMLData }> {
+): Promise<{ data: HTMLData; meta?: PlotMetaData }> {
   const response = await axios.post(
     `${BASE_URL}/outputs/image/${path}/merge_roi`,
     data,
@@ -148,7 +165,7 @@ export async function mergeRoiApi(
 export async function deleteRoiApi(
   path: string,
   data: { ids: number[] },
-): Promise<{ data: HTMLData }> {
+): Promise<{ data: HTMLData; meta?: PlotMetaData }> {
   const response = await axios.post(
     `${BASE_URL}/outputs/image/${path}/delete_roi`,
     data,

frontend/src/components/Workspace/Visualize/Plot/BarPlot.tsx

@@ -17,6 +17,7 @@ import {
   selectBarDataIsInitialized,
   selectBarDataIsPending,
   selectBarIndex,
+  selectBarMeta,
 } from 'store/slice/DisplayData/DisplayDataSelectors'
 import { getBarData } from 'store/slice/DisplayData/DisplayDataActions'
 import { BarData } from 'api/outputs/Outputs'
@@ -55,6 +56,7 @@ export const BarPlot = React.memo(() => {
 const BarPlotImple = React.memo(() => {
   const { filePath: path, itemId } = React.useContext(DisplayDataContext)
   const barData = useSelector(selectBarData(path), barDataEqualityFn)
+  const meta = useSelector(selectBarMeta(path))
   const width = useSelector(selectVisualizeItemWidth(itemId))
   const height = useSelector(selectVisualizeItemHeight(itemId))
   const index = useSelector(selectBarItemIndex(itemId))
@@ -73,17 +75,27 @@ const BarPlotImple = React.memo(() => {
 
   const layout = React.useMemo(
     () => ({
+      title: {
+        text: meta?.title,
+        x: 0.1,
+      },
       width: width,
       height: height - 120,
       margin: {
-        t: 60, // top
+        t: 50, // top
         l: 50, // left
-        b: 30, // bottom
+        b: 40, // bottom
       },
       dragmode: 'pan',
       autosize: true,
+      xaxis: {
+        title: meta?.xlabel,
+      },
+      yaxis: {
+        title: meta?.ylabel,
+      },
     }),
-    [width, height],
+    [meta, width, height],
   )
 
   const saveFileName = useSelector(selectVisualizeSaveFilename(itemId))

frontend/src/components/Workspace/Visualize/Plot/HeatMapPlot.tsx

@@ -13,6 +13,7 @@ import {
   selectHeatMapDataIsInitialized,
   selectHeatMapDataIsPending,
   selectHeatMapIndex,
+  selectHeatMapMeta,
 } from 'store/slice/DisplayData/DisplayDataSelectors'
 import { getHeatMapData } from 'store/slice/DisplayData/DisplayDataActions'
 import {
@@ -50,6 +51,7 @@ export const HeatMapPlot = React.memo(() => {
 const HeatMapImple = React.memo(() => {
   const { filePath: path, itemId } = React.useContext(DisplayDataContext)
   const heatMapData = useSelector(selectHeatMapData(path), heatMapDataEqualtyFn)
+  const meta = useSelector(selectHeatMapMeta(path))
   const columns = useSelector(selectHeatMapColumns(path))
   const index = useSelector(selectHeatMapIndex(path))
   const showscale = useSelector(selectHeatMapItemShowScale(itemId))
@@ -92,17 +94,27 @@ const HeatMapImple = React.memo(() => {
 
   const layout = React.useMemo(
     () => ({
+      title: {
+        text: meta?.title,
+        x: 0.1,
+      },
       width: width,
       height: height - 50,
       dragmode: 'pan',
       margin: {
-        t: 60, // top
+        t: 50, // top
         l: 50, // left
-        b: 30, // bottom
+        b: 40, // bottom
       },
       autosize: true,
+      xaxis: {
+        title: meta?.xlabel,
+      },
+      yaxis: {
+        title: meta?.ylabel,
+      },
     }),
-    [width, height],
+    [meta, width, height],
   )
 
   const saveFileName = useSelector(selectVisualizeSaveFilename(itemId))

frontend/src/components/Workspace/Visualize/Plot/ImagePlot.tsx

@@ -33,6 +33,7 @@ import {
   selectActiveImageData,
   selectRoiData,
   selectImageDataMaxSize,
+  selectImageMeta,
 } from 'store/slice/DisplayData/DisplayDataSelectors'
 import {
   getImageData,
@@ -166,6 +167,7 @@ const ImagePlotChart = React.memo<{
     selectActiveImageData(path, activeIndex),
     imageDataEqualtyFn,
   )
+  const meta = useSelector(selectImageMeta(path))
   const roiFilePath = useSelector(selectRoiItemFilePath(itemId))
 
   const roiData = useSelector(
@@ -299,6 +301,10 @@ const ImagePlotChart = React.memo<{
   })
   const layout = React.useMemo(
     () => ({
+      title: {
+        text: meta?.title,
+        x: 0.1,
+      },
       width: width,
       height: height - 130,
       margin: {
@@ -308,6 +314,7 @@ const ImagePlotChart = React.memo<{
       },
       dragmode: selectMode ? 'select' : 'pan',
       xaxis: {
+        title: meta?.xlabel,
         autorange: true,
         showgrid: showgrid,
         showline: showline,
@@ -317,6 +324,7 @@ const ImagePlotChart = React.memo<{
         showticklabels: showticklabels,
       },
       yaxis: {
+        title: meta?.ylabel,
         automargin: true,
         autorange: 'reversed',
         showgrid: showgrid,
@@ -328,7 +336,7 @@ const ImagePlotChart = React.memo<{
       },
     }),
     //eslint-disable-next-line react-hooks/exhaustive-deps
-    [showgrid, showline, showticklabels, width, height, selectMode, isAddRoi],
+    [meta, showgrid, showline, showticklabels, width, height, selectMode, isAddRoi],
   )
 
   const saveFileName = useSelector(selectVisualizeSaveFilename(itemId))

frontend/src/components/Workspace/Visualize/Plot/RoiPlot.tsx

@@ -9,6 +9,7 @@ import {
   selectRoiDataIsFulfilled,
   selectRoiDataIsInitialized,
   selectRoiDataIsPending,
+  selectRoiMeta,
 } from 'store/slice/DisplayData/DisplayDataSelectors'
 import { LinearProgress, Typography } from '@mui/material'
 import { getRoiData } from 'store/slice/DisplayData/DisplayDataActions'
@@ -50,6 +51,7 @@ export const RoiPlot = React.memo(() => {
 const RoiPlotImple = React.memo<{}>(() => {
   const { itemId, filePath: path } = React.useContext(DisplayDataContext)
   const imageData = useSelector(selectRoiData(path), imageDataEqualtyFn)
+  const meta = useSelector(selectRoiMeta(path))
   const width = useSelector(selectVisualizeItemWidth(itemId))
   const height = useSelector(selectVisualizeItemHeight(itemId))
 
@@ -93,6 +95,10 @@ const RoiPlotImple = React.memo<{}>(() => {
 
   const layout = React.useMemo(
     () => ({
+      title: {
+        text: meta?.title,
+        x: 0.1,
+      },
       width: width,
       height: height - 50,
       margin: {
@@ -102,19 +108,21 @@ const RoiPlotImple = React.memo<{}>(() => {
       },
       dragmode: 'pan',
       xaxis: {
+        title: meta?.xlabel,
         autorange: true,
         zeroline: false,
         autotick: true,
         ticks: '',
       },
       yaxis: {
+        title: meta?.ylabel,
         autorange: 'reversed',
         zeroline: false,
         autotick: true, // todo
         ticks: '',
       },
     }),
-    [width, height],
+    [meta, width, height],
   )
 
   const saveFileName = useSelector(selectVisualizeSaveFilename(itemId))