Merge pull request #588 from lsst-ts/tickets/DM-41976

OLE visual improvements
lsst-ts · Jan 8, 2024 · 4e5d29f · 4e5d29f
2 parents 6a96135 + 2ce9443
commit 4e5d29f
Show file tree

Hide file tree

Showing 9 changed files with 120 additions and 23 deletions.
diff --git a/CHANGELOG.rst b/CHANGELOG.rst
@@ -7,6 +7,7 @@ v5.27.11
 
 * Add MTM2 powerSystemState data `<https://github.com/lsst-ts/LOVE-frontend/pull/590>`_
 * Remove custom failed script sound alert `<https://github.com/lsst-ts/LOVE-frontend/pull/589>`_
+* OLE visual improvements `<https://github.com/lsst-ts/LOVE-frontend/pull/588>`_
 
 v5.27.10
 --------

diff --git a/love/src/Utils.js b/love/src/Utils.js
@@ -1970,3 +1970,14 @@ export function checkJSONResponse(response, onSuccess) {
     return resp;
   });
 }
+
+/**
+ * Function to format time of incident for OLE
+ * @param {string} dateStart start date of incident in ISO format
+ * @param {string} dateEnd end date of incident in ISO format
+ * @returns {string} formatted string for OLE
+ */
+export function formatOLETimeOfIncident(dateStart, dateEnd) {
+  if (dateStart === dateEnd) return truncateISODateToMinutes(dateStart);
+  return `${truncateISODateToMinutes(dateStart)} - ${truncateISODateToMinutes(dateEnd)}`;
+}
diff --git a/love/src/components/GeneralPurpose/RichTextEditor/RichTextEditor.jsx b/love/src/components/GeneralPurpose/RichTextEditor/RichTextEditor.jsx
@@ -99,7 +99,7 @@ const RichTextEditor = forwardRef(
         <ReactQuill
           ref={reactQuillRef}
           modules={modules}
-          formats={[]}
+          formats={['header', 'link']}
           theme="snow"
           value={value}
           onChange={handleChange}

diff --git a/love/src/components/GeneralPurpose/SimpleTable/SimpleTable.jsx b/love/src/components/GeneralPurpose/SimpleTable/SimpleTable.jsx
@@ -25,11 +25,11 @@ export { Table, Thead, Tr, Td, Th, Tbody };
 /**
  * Renders a table from data and headers configuration
  */
-function SimpleTable({ headers, data }) {
+function SimpleTable({ className, headers, data }) {
   const defaultRenderMethod = (value, row) => value;
 
   return (
-    <Table>
+    <Table className={className}>
       <Thead>
         <Tr>
           {headers.map((header, index) => (
@@ -61,6 +61,8 @@ function SimpleTable({ headers, data }) {
 }
 
 SimpleTable.propTypes = {
+  /** className to be applied to the table */
+  className: PropTypes.string,
   /** Array with properties of table columns and its headers.*/
   headers: PropTypes.arrayOf(
     PropTypes.shape({

diff --git a/love/src/components/GeneralPurpose/SimpleTable/SimpleTable.module.css b/love/src/components/GeneralPurpose/SimpleTable/SimpleTable.module.css
@@ -80,7 +80,7 @@ td {
 }
 
 .table td {
-  color: var(--secondary-font-color);
+  color: var(--primary-font-color);
   padding: 0.4em 1em;
   border-top: 1px solid transparent;
   border-bottom: 1px solid transparent;

diff --git a/love/src/components/OLE/Exposure/Exposure.jsx b/love/src/components/OLE/Exposure/Exposure.jsx
@@ -539,7 +539,7 @@ export default class Exposure extends Component {
           Last updated: {this.state.lastUpdated ? this.state.lastUpdated.format(TIME_FORMAT) : ''}
           {updatingExposures && <SpinnerIcon className={styles.spinnerIcon} />}
         </div>
-        <SimpleTable headers={headers} data={filteredData} />
+        <SimpleTable className={styles.table} headers={headers} data={filteredData} />
       </div>
     );
   }

diff --git a/love/src/components/OLE/Exposure/Exposure.module.css b/love/src/components/OLE/Exposure/Exposure.module.css
@@ -565,14 +565,27 @@ th.tableHead {
   color: var(--link-hover-font-color);
 }
 
-.container table {
+table.table {
   margin: 0;
   border: 0;
 }
 
-.container table th {
+table.table th {
   position: sticky;
   top: 0;
+  z-index: 1;
+}
+
+table.table tr td {
+  border-bottom: 2px solid var(--second-tertiary-background-color) !important;
+}
+
+table.table tr:hover td {
+  background-color: var(--second-tertiary-background-color);
+}
+
+table.table tr {
+  background-color: var(--second-primary-background-color) !important;
 }
 
 .attachmentIcon {

diff --git a/love/src/components/OLE/NonExposure/NonExposure.jsx b/love/src/components/OLE/NonExposure/NonExposure.jsx
@@ -37,7 +37,7 @@ import ManagerInterface, {
   getFilesURLs,
   jiraMarkdownToHtml,
   getObsDayFromDate,
-  truncateISODateToMinutes,
+  formatOLETimeOfIncident,
 } from 'Utils';
 
 import SimpleTable from 'components/GeneralPurpose/SimpleTable/SimpleTable';
@@ -154,10 +154,17 @@ export default class NonExposure extends Component {
     return [
       {
         field: 'date_added',
-        title: 'Day Observation',
+        title: 'Date Added',
         type: 'string',
         className: styles.tableHead,
-        render: (value) => getObsDayFromDate(moment(value + 'Z')),
+        render: (value) => moment(value).format(ISO_STRING_DATE_TIME_FORMAT),
+      },
+      {
+        field: 'date_added',
+        title: 'Obs Day',
+        type: 'string',
+        className: styles.tableHead,
+        render: (value) => getObsDayFromDate(moment(value)),
       },
       {
         field: 'level',
@@ -173,19 +180,16 @@ export default class NonExposure extends Component {
         className: styles.tableHead,
         render: (value) => value?.join(', '),
       },
-      {
-        field: null,
-        title: 'Time of Incident (UTC)',
-        type: 'string',
-        className: styles.tableHead,
-        render: (_, row) => `${truncateISODateToMinutes(row.date_begin)} - ${truncateISODateToMinutes(row.date_end)}`,
-      },
       {
         field: 'time_lost',
         title: 'Obs. Time Loss',
         type: 'string',
         className: styles.tableHead,
-        render: (value) => formatSecondsToDigital(value * 3600),
+        render: (value, row) => (
+          <span title={formatOLETimeOfIncident(row.date_begin, row.date_end)}>
+            {formatSecondsToDigital(value * 3600)}
+          </span>
+        ),
       },
       {
         field: 'message_text',
@@ -198,6 +202,7 @@ export default class NonExposure extends Component {
           return (
             <>
               <div className={styles.wikiMarkupText} dangerouslySetInnerHTML={{ __html: parsedValue }} />
+              {value.length > 500 && <input className={styles.expandBtn} type="checkbox" />}
               {files.length > 0 && (
                 <h3>
                   Attachments:{' '}
@@ -347,7 +352,7 @@ export default class NonExposure extends Component {
     const { logs: tableData, modeView, modeEdit } = this.state;
 
     const headers = Object.values(this.getHeaders());
-    let filteredData = [...tableData];
+    let filteredData = [...(tableData ?? [])];
 
     // Filter by type
     if (selectedCommentType.value !== OLE_COMMENT_TYPE_OPTIONS[0].value) {
@@ -492,7 +497,7 @@ export default class NonExposure extends Component {
           Last updated: {this.state.lastUpdated ? this.state.lastUpdated.format(TIME_FORMAT) : ''}
           {this.state.updatingLogs && <SpinnerIcon className={styles.spinnerIcon} />}
         </div>
-        <SimpleTable headers={headers} data={filteredData} />
+        <SimpleTable className={styles.table} headers={headers} data={filteredData} />
       </div>
     );
   }

diff --git a/love/src/components/OLE/NonExposure/NonExposure.module.css b/love/src/components/OLE/NonExposure/NonExposure.module.css
@@ -498,9 +498,33 @@ th.tableHead {
   white-space: pre-wrap;
   text-align: left;
   overflow-x: auto;
-  max-width: 70em;
+  position: relative;
+}
+
+.wikiMarkupText:has(+ .expandBtn) {
+  max-height: 5em;
+  overflow-y: hidden;
 }
 
+.wikiMarkupText:has(+ .expandBtn:not(:checked))::before {
+  content: '';
+  position: absolute;
+  height: 1em;
+  width: 100%;
+  bottom: 0;
+  pointer-events: none;
+  background: linear-gradient(to bottom, transparent, var(--second-primary-background-color));
+}
+
+tr:hover .wikiMarkupText:has(+ .expandBtn:not(:checked))::before {
+  background: linear-gradient(to bottom, transparent, var(--second-tertiary-background-color));
+}
+
+/* .wikiMarkupText:has(+ .expandBtn) {
+  overflow-y: hidden;
+  max-width: 70em;
+} */
+
 .wikiMarkupText h1,
 .wikiMarkupText h2,
 .wikiMarkupText h3,
@@ -519,14 +543,27 @@ th.tableHead {
   color: var(--link-hover-font-color);
 }
 
-.container table {
+table.table {
   margin: 0;
   border: 0;
 }
 
-.container table th {
+table.table th {
   position: sticky;
   top: 0;
+  z-index: 1;
+}
+
+table.table tr td {
+  border-bottom: 2px solid var(--second-tertiary-background-color) !important;
+}
+
+table.table tr:hover td {
+  background-color: var(--second-tertiary-background-color);
+}
+
+table.table tr {
+  background-color: var(--second-primary-background-color) !important;
 }
 
 .attachmentIcon {
@@ -535,3 +572,31 @@ th.tableHead {
   margin-right: 0.25em;
   fill: var(--default-active-font-color);
 }
+
+.expandBtn {
+  font-size: var(--font-size-smaller);
+  color: white;
+  appearance: none;
+  border: 1px solid white;
+  padding: 0.2em;
+  border-radius: 0.25em;
+  cursor: pointer;
+  margin: 0;
+  margin-top: 0.25em;
+}
+
+.expandBtn:hover {
+  background-color: #ccc;
+}
+
+.expandBtn::before {
+  content: '⊕ Expand';
+}
+
+.expandBtn:checked::before {
+  content: '⊖ Collapse';
+}
+
+.wikiMarkupText:has(+ .expandBtn:checked) {
+  max-height: none;
+}