Update news 4.22 (#1177)

* Update news 4.22

* Fix CDx date for Trusight and display utc time

---------

Co-authored-by: Calvin Lu <[email protected]>

Author: jfkonecn

screenshot-test/__baseline_snapshots__/Precision Oncology Therapies Page without Login-snap.png

@@ -2,7 +2,10 @@ import * as React from 'react';
 import { Table } from 'react-bootstrap';
 
 export type ElementType = JSX.Element | string;
-export type SimpleTableCell = { key: string; content: ElementType };
+export type SimpleTableCell = {
+  key: string;
+  content: ElementType | ElementType[];
+};
 export type SimpleTableRow = { key: string; content: SimpleTableCell[] };
 export type SimpleTableRows = SimpleTableRow[];
 export type SimpleTableColumn = {
@@ -21,8 +24,8 @@ export type SimpleTableProps = {
 export const SimpleTable = (props: SimpleTableProps) => {
   const getRow = (row: SimpleTableRow) => {
     return row.content
-      ? row.content.map(cell => {
-          return <td key={cell.key}>{cell.content}</td>;
+      ? row.content.map(({ key, content }) => {
+          return <td key={key}>{content}</td>;
         })
       : null;
   };
@@ -44,9 +47,41 @@ export const SimpleTable = (props: SimpleTableProps) => {
           </thead>
         )}
         <tbody className={props.tbodyClassName}>
-          {props.rows.map(row => (
-            <tr key={row.key}>{getRow(row)}</tr>
-          ))}
+          {props.rows.flatMap(({ key, content }) => {
+            let maxContentSize = 1;
+            for (const cur of content) {
+              maxContentSize = Array.isArray(cur.content)
+                ? Math.max(cur.content.length, maxContentSize)
+                : maxContentSize;
+            }
+            const elements: JSX.Element[] = [];
+            for (let i = 0; i < maxContentSize; i++) {
+              const element = (
+                <tr key={`${key}_${i}`}>
+                  {content.map(({ content: innerContent, key: innerKey }) => {
+                    if (Array.isArray(innerContent)) {
+                      return <td key={innerKey}>{innerContent[i]}</td>;
+                    } else if (i === 0) {
+                      return (
+                        <td
+                          key={innerKey}
+                          rowSpan={
+                            maxContentSize > 1 ? maxContentSize : undefined
+                          }
+                        >
+                          {innerContent}
+                        </td>
+                      );
+                    } else {
+                      return <></>;
+                    }
+                  })}
+                </tr>
+              );
+              elements.push(element);
+            }
+            return elements;
+          })}
         </tbody>
       </Table>
     </div>

src/main/webapp/app/components/SimpleTable.tsx

@@ -821,6 +821,7 @@ export type DataRelease = {
 };
 
 export const DATA_RELEASES: DataRelease[] = [
+  { date: '10242024', version: 'v4.22' },
   { date: '09252024', version: 'v4.21' },
   { date: '08152024', version: 'v4.20' },
   { date: '07042024', version: 'v4.19' },
@@ -948,6 +949,7 @@ export const DEFAULT_FEEDBACK_ANNOTATION: Feedback = {
   type: FeedbackType.ANNOTATION,
 };
 
+export type FdaSubmissionType = 'PMA' | 'PMN' | 'HDE' | 'DEN';
 export const FDA_SUBMISSION_URL_SUFFIX = {
   PMA: 'cfpma/pma.cfm',
   PMN: 'cfpmn/pmn.cfm',

src/main/webapp/app/config/constants.tsx

@@ -87,6 +87,52 @@ interface ICancerType {
   tumorForm: 'SOLID' | 'LIQUID' | 'MIXED';
 }
 
+interface IRule {
+  id: number;
+  entity: string;
+  rule: string;
+  name: string | null;
+  association: IAssociation | null;
+}
+
+interface IAssociation {
+  id: number;
+  name: string | null;
+  rules: IRule[] | null;
+  alterations: IAlteration[] | null;
+  cancerTypes: ICancerType[] | null;
+  drugs: IDrug[] | null;
+  fdaSubmissions: IFdaSubmission[] | null;
+}
+
+interface IDrug {
+  id: number;
+  uuid: string;
+  name: string;
+  associations: IAssociation[] | null;
+}
+
+interface IAlteration {
+  id: number;
+  name: string;
+  alteration: string;
+  proteinChange: string;
+  start: number | null;
+  end: number | null;
+  refResidues: string | null;
+  variantResidues: string | null;
+  genes: IGene[] | null;
+  associations: IAssociation[] | null;
+}
+
+interface IGene {
+  id: number;
+  entrezGeneId: number;
+  hugoSymbol: string;
+  hgncId: string | null;
+  alterations: IAlteration[] | null;
+}
+
 type SelectOption = {
   value: string;
   label: string;
@@ -99,6 +145,27 @@ const referenceColumnInfo = (
   </div>
 );
 
+const getDrugName = (drugs: IDrug[], rules: IRule[]) => {
+  // Create a map of drug ids to drug names for quick lookup
+  const drugMap = new Map();
+  drugs.forEach((drug: any) => {
+    drugMap.set(drug.id, drug.name);
+  });
+
+  const drugRule = rules.filter((rule: IRule) => rule.entity === 'DRUG')[0];
+
+  if (!drugRule) {
+    return drugs[0].name;
+  }
+  return drugRule.rule
+    .split(/([+,])/)
+    .map((part: any) => {
+      const id = parseInt(part, 10);
+      return isNaN(id) ? part : drugMap.get(id) || part;
+    })
+    .join('');
+};
+
 const parseCDx = () => {
   const parsedCompanionDiagnosticDevices: ICompanionDiagnosticDevice[] = [];
   for (const cdx of companionDiagnosticDevices) {
@@ -131,18 +198,8 @@ const parseCDx = () => {
         ).map((gene: any) => ({
           gene,
           alterations: uniq(assoc.alterations.map((a: any) => a.name)).sort(),
-          drugs: assoc.treatments
-            .map((treatment: any) =>
-              treatment.drugs.map((drug: any) => drug.name).join(' + ')
-            )
-            .join(', '),
-          cancerTypes: assoc.associationCancerTypes.reduce(
-            (ctAcc: any[], act: any) => {
-              ctAcc.push(act.cancerType);
-              return ctAcc;
-            },
-            []
-          ),
+          drugs: getDrugName(assoc.drugs, assoc.rules),
+          cancerTypes: assoc.cancerTypes,
           fdaSubmissions: assoc.fdaSubmissions,
         }));
       })

src/main/webapp/app/pages/companionDiagnosticDevicesPage/companionDiagnosticDevicePage.tsx

@@ -117,7 +117,7 @@ export const ChangedAnnotationListItem = (props: {
     case AnnotationColumnHeaderType.UPDATED_SAME_LEVEL_DRUG:
       annotationColumnHeader = CHANGED_ANNOTATION_UPDATED_DRUG_SAME_HIGHEST_LEVEL_COLUMNS;
       defaultTitle =
-        "Addition of drug(s) associated with a tumor type-specific leveled alteration(s) currently in OncoKB™ (without changing the alteration's highest level of evidence)";
+        "Updated therapeutic implications - Addition of drug(s) associated with a tumor type-specific leveled alteration(s) currently in OncoKB™ (without changing the alteration's highest level of evidence)";
       useOneLineRowClass = true;
       break;
     case AnnotationColumnHeaderType.LEVEL:

src/main/webapp/app/pages/newsPage/ChangedAnnotationListItem.tsx

@@ -87,6 +87,7 @@ export default class NewsPage extends React.Component<{
           <CitationText />
         </div>
         <div className="mt-2">
+          <NewsList date={'10242024'} />
           <NewsList date={'09252024'} />
           <NewsList date={'08152024'} />
           <NewsList date={'07042024'} />