add table rendering to parameter-triggered custom plots

bumps/webview/client/src/components/CustomPlot.vue

@@ -7,15 +7,19 @@ import { v4 as uuidv4 } from 'uuid';
 import type { AsyncSocket } from '../asyncSocket.ts';
 import { setupDrawLoop } from '../setupDrawLoop';
 import { configWithSVGDownloadButton } from '../plotly_extras.mjs';
+import { TableData} from './CSVTable.vue'
+import CSVTable from './CSVTable.vue'
 
 type PlotInfo = {title: string, change_with: string, model_index: number};
 const title = 'Custom'
+const figtype = ref<String>("")
 const plot_div = ref<HTMLDivElement | null>(null);
 const plot_div_id = ref(`div-${uuidv4()}`);
 const plot_infos = ref<PlotInfo[]>([]);
 //const current_plot_name = ref<PlotNameInfo>({"name": "", "change_with": "parameters", "model_index": 0});
 const current_plot_index = ref<number>(0);
 const error_text = ref<string>("")
+const table_data = ref<TableData>({raw: "", header: [], rows: [[]]})
 
 // add types to mpld3
 declare global {
@@ -48,9 +52,9 @@ const { draw_requested } = setupDrawLoop('updated_parameters', props.socket, fet
 async function fetch_and_draw() {
   const { model_index, title } = plot_infos.value[current_plot_index.value];
   const payload = await props.socket.asyncEmit('get_custom_plot', model_index, title);
-  let { fig_type, plotdata } = payload as { fig_type: 'plotly' | 'matplotlib' | 'error', plotdata: object};
+  const { fig_type, plotdata } = payload as { fig_type: 'plotly' | 'matplotlib' | 'table' | 'error', plotdata: object};
+  figtype.value = fig_type
   if (fig_type === 'plotly') {
-    error_text.value = "";
     await nextTick();
     const { data, layout } = plotdata as Plotly.PlotlyDataLayoutConfig;
     const config: Partial<Plotly.Config> = {
@@ -64,17 +68,23 @@ async function fetch_and_draw() {
     await Plotly.react(plot_div.value as HTMLDivElement, [...data], layout, config);
   }
   else if (fig_type === 'matplotlib') {
-    error_text.value = ""
     await nextTick();
     let mpld3_data = plotdata as { width: number, height: number };
     mpld3_data.width = Math.round(plot_div.value?.clientWidth ?? 640) - 16;
     mpld3_data.height = Math.round(plot_div.value?.clientHeight ?? 480) - 16;
     mpld3.draw_figure(plot_div_id.value, mpld3_data, false, true);
   }
+  else if (fig_type === 'table') {
+    await nextTick();
+    table_data.value = plotdata as TableData;
+  }  
   else if (fig_type === 'error') {
     error_text.value = String(plotdata).replace(/[\n]+/g, "<br>");
   }
-  
+  else {
+    figtype.value = 'error';
+    error_text.value = "Unknown figure type " + fig_type;
+  }  
 }
 
 </script>
@@ -88,12 +98,15 @@ async function fetch_and_draw() {
       <option v-for="(plot_info, index) in plot_infos" :key="index" :value="index">
         {{ plot_info.model_index }}:  {{ plot_info.title ?? "" }} </option>
     </select>
-    <div v-if="error_text" class="flex-grow-0" ref="error_div">
+    <div v-if="figtype==='error'" class="flex-grow-0" ref="error_div">
       <div style="color:red; font-size: larger; font-weight: bold;">
         Plotting error:
       </div>
       <div v-html="error_text"></div>
-    </div>    
+    </div>
+    <div v-else-if="figtype==='table'" class="flex-grow-0">
+      <CSVTable :table_data="table_data"></CSVTable>
+    </div>
     <div v-else class="flex-grow-1" ref="plot_div" :id=plot_div_id>
     </div>
   </div>

bumps/webview/client/src/components/CustomUncertaintyPlot.vue

@@ -126,7 +126,7 @@ async function fetch_and_draw(latest_timestamp?: string) {
       </div>
       <div v-html="error_text"></div>
     </div>
-    <div v-else-if="figtype==='table'" class="flex-grow-0" ref="table_div">
+    <div v-else-if="figtype==='table'" class="flex-grow-0">
       <CSVTable :table_data="table_data"></CSVTable>
     </div>
     <div v-else class="flex-grow-1 position-relative">