Update news 4.20 (#1142)

Author: calvinlu3

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

@@ -800,6 +800,7 @@ export type DataRelease = {
 };
 
 export const DATA_RELEASES: DataRelease[] = [
+  { date: '08152024', version: 'v4.20' },
   { date: '07042024', version: 'v4.19' },
   { date: '07022024', version: 'v4.18' },
   { date: '06042024', version: 'v4.17' },

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

@@ -4,3 +4,5 @@
 //     (NCT1234567)
 export const REF_CAPTURE = /(\(\s*(?:PMID|NCT|Abstract):?.*?(?:\([^()]*\).*?)*\))/i;
 export const VALID_LATIN_TEXT = /^[\p{Script=Latin}\p{M}\p{N}\p{Z}\p{P}\p{Sm}\p{Sc}\p{Sk}]+$/u;
+
+export const ALTERNATIVE_ALLELES_REGEX = /([A-Z]+[0-9]+)([A-Z]+(\/[A-Z]+)*)/i;

src/main/webapp/app/config/constants/regex.ts

@@ -1,7 +1,11 @@
 import React from 'react';
-import { AlterationPageLink } from 'app/shared/utils/UrlUtils';
+import {
+  AlterationPageLink,
+  getAlternativeAllelesPageLinks,
+} from 'app/shared/utils/UrlUtils';
 import WithSeparator from 'react-with-separator';
 import SummaryWithRefs from 'app/oncokb-frontend-commons/src/components/SummaryWithRefs';
+import { ALTERNATIVE_ALLELES_REGEX } from 'app/config/constants/regex';
 
 const MutationEffectDescription: React.FunctionComponent<{
   hugoSymbol: string;
@@ -18,30 +22,19 @@ const MutationEffectDescription: React.FunctionComponent<{
       const varSegs = segments[1].split(' ');
       let alterationStr = varSegs.pop();
       if (alterationStr) {
-        const altRegex = new RegExp('([A-Z]+[0-9]+)([A-Z]+(/[A-Z]+)*)', 'i');
+        const altRegex = ALTERNATIVE_ALLELES_REGEX;
         alterationStr = alterationStr.replace('.', '');
         if (altRegex.test(alterationStr)) {
           const matches = altRegex.exec(alterationStr);
           if (matches) {
-            const positionalVar = matches[1];
-            const alternativeAlleles = matches[2];
-            const alleleLines = alternativeAlleles
-              .split('/')
-              .map((allele, index) => {
-                return (
-                  <AlterationPageLink
-                    hugoSymbol={props.hugoSymbol}
-                    alteration={`${positionalVar}${allele}`}
-                  >
-                    {index === 0 ? `${positionalVar}${allele}` : allele}
-                  </AlterationPageLink>
-                );
-              });
             return (
               <span>
                 {segments[0]} {additionalMutationEffectSeparator}
                 {varSegs.join(' ')}{' '}
-                <WithSeparator separator={'/'}>{alleleLines}</WithSeparator>.
+                {getAlternativeAllelesPageLinks(
+                  props.hugoSymbol,
+                  alterationStr
+                )}
               </span>
             );
           }

src/main/webapp/app/pages/annotationPage/MutationEffectDescription.tsx

@@ -43,6 +43,10 @@ export const ChangedAnnotationListItem = (props: {
   title?: string;
   data: SimpleTableRow[];
   columnHeaderType?: AnnotationColumnHeaderType;
+  headers?: {
+    name: string;
+  }[];
+  useOneLineRowClass?: boolean;
 }) => {
   let longestRow = 0;
   if (props.data.length > 0) {
@@ -158,9 +162,17 @@ export const ChangedAnnotationListItem = (props: {
       {props.title ? props.title : defaultTitle}
       <Row className={'overflow-auto'}>
         <SimpleTable
-          columns={annotationColumnHeader.slice(0, longestRow)}
+          columns={
+            props.headers
+              ? props.headers
+              : annotationColumnHeader.slice(0, longestRow)
+          }
           rows={props.data}
-          theadClassName={useOneLineRowClass ? mainStyle.oneRowHeader : ''}
+          theadClassName={
+            props.useOneLineRowClass ?? useOneLineRowClass
+              ? mainStyle.oneRowHeader
+              : ''
+          }
         />
       </Row>
     </li>

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

@@ -136,6 +136,8 @@ export default class NewsList extends React.Component<NewsListProps> {
                       <ChangedAnnotationListItem
                         title={annotation.title}
                         columnHeaderType={annotation.columnHeaderType}
+                        headers={annotation.headers}
+                        useOneLineRowClass={annotation.useOneLineRowClass}
                         data={
                           annotation.content
                             ? annotation.content.map((item, index) => {

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

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