Show metadata as table

lsst-ts · Sep 26, 2024 · da346b1 · da346b1
1 parent 4a456f9
commit da346b1
Show file tree

Hide file tree

Showing 2 changed files with 21 additions and 13 deletions.
diff --git a/src/js/components/MosaicView.js b/src/js/components/MosaicView.js
@@ -1,9 +1,7 @@
 import React, { useState, useEffect } from "react"
 import PropTypes from "prop-types"
-import { WebsocketClient } from "../modules/ws-service-client"
 import {
   cameraType,
-  channelDataType,
   eventType,
   metadataType,
   mosaicSingleView,
@@ -159,21 +157,21 @@ ChannelImage.propTypes = {
 }
 
 function ChannelMetadata({ view, metadata }) {
-  const { metaColumns: viewColumns, latestEvent: {seq_num: seqNum} } = view
+  const { channel, metaColumns: viewColumns, latestEvent: {seq_num: seqNum} } = view
   const columns = [...commonColumns, ...viewColumns]
   const metadatum = metadata[seqNum] || {}
   return (
-    <ul className="viewMeta">
+    <table className="viewMeta" id={`table-${channel}`}>
       {columns.map((column) => {
         const value = metadatum[column] ? metadatum[column] : "No value set"
         return (
-          <li key={column} className="viewMetaCol">
-            <div className="colName">{column}</div>
-            <div className="colValue">{value}</div>
-          </li>
+          <tr key={column} className="viewMetaCol">
+            <th scope="row" className="colName">{column}</th>
+            <td className="colValue">{value}</td>
+          </tr>
         )
       })}
-    </ul>
+    </table>
   )
 }
 ChannelMetadata.propTypes = {

diff --git a/src/sass/style.sass b/src/sass/style.sass
@@ -544,19 +544,29 @@ section
 		justify-content: space-between
 		gap: 1em
 
+
 	.view
 		width: 100%
 
 	.viewImage
 		width: 100%
-		background: rgba(255,255,255,0.3)
 		aspect-ratio: 1
 
 	.viewMeta
+		width: 100%
 		margin-top: 1em
+		border-collapse: separate
+		border-spacing: 0 0.1em
+
+	.colName
+		width: min-content
 
-	.viewMetaCol
+	.colValue
+		font-family: 'Red Hat Mono', monospace
+
+	.placeholder
+		background: rgba(0,0,0,0.3)
 		display: flex
+		justify-content: center
+		align-items: center
 
-	.colName
-		flex-basis: 52%