absolute timeline draft with hardcoded date

buschlab · Feb 27, 2024 · 46bfbf1 · 46bfbf1
1 parent a646110
commit 46bfbf1
Show file tree

Hide file tree

Showing 3 changed files with 50 additions and 16 deletions.
diff --git a/packages/cbioportal-clinical-timeline/src/TickAxis.tsx b/packages/cbioportal-clinical-timeline/src/TickAxis.tsx
@@ -79,6 +79,8 @@ const TickAxis: React.FunctionComponent<ITickAxisProps> = observer(function({
                         startPoint = tick.start;
                     }
 
+                    var startDate = new Date('01/01/1960');
+
                     const majorTickPosition = store.getPosition({
                         start: startPoint,
                     });
@@ -98,17 +100,12 @@ const TickAxis: React.FunctionComponent<ITickAxisProps> = observer(function({
 
                         let majorLabel: string = '';
 
-                        if (count < 0) {
-                            majorLabel = `${count}${unit}`;
-                        }
-
-                        if (count === 0) {
-                            majorLabel = '0';
-                        }
-
-                        if (count > 0) {
-                            majorLabel = `${count}${unit}`;
-                        }
+                        startDate.setMonth(startDate.getMonth() + count);
+                        majorLabel =
+                            startDate.getMonth() +
+                            1 +
+                            '/' +
+                            startDate.getFullYear();
 
                         content = (
                             <>
@@ -165,13 +162,29 @@ const TickAxis: React.FunctionComponent<ITickAxisProps> = observer(function({
                                                 : `${count + 1}${unit}`;
                                         minorLabel =
                                             count === -1
-                                                ? `-${minorCount}m`
-                                                : `${majorLabel} ${minorCount}m`;
+                                                ? startDate.getMonth() +
+                                                  minorCount +
+                                                  1 +
+                                                  '/' +
+                                                  startDate.getFullYear()
+                                                : startDate.getMonth() +
+                                                  minorCount +
+                                                  1 +
+                                                  '/' +
+                                                  startDate.getFullYear();
                                     } else {
                                         minorLabel =
                                             count === 0
-                                                ? `${minorCount}m`
-                                                : `${majorLabel} ${minorCount}m`;
+                                                ? startDate.getMonth() +
+                                                  minorCount +
+                                                  1 +
+                                                  '/' +
+                                                  startDate.getFullYear()
+                                                : startDate.getMonth() +
+                                                  minorCount +
+                                                  1 +
+                                                  '/' +
+                                                  startDate.getFullYear();
                                     }
                                 }
 

diff --git a/packages/cbioportal-clinical-timeline/src/Timeline.tsx b/packages/cbioportal-clinical-timeline/src/Timeline.tsx
@@ -281,6 +281,7 @@ const Timeline: React.FunctionComponent<ITimelineProps> = observer(function({
 }: ITimelineProps) {
     const tracks = store.data;
     const SCROLLBAR_PADDING = 15;
+    var dateType = false;
     let height =
         TICK_AXIS_HEIGHT +
         _.sumBy(tracks, t => {
@@ -354,6 +355,17 @@ const Timeline: React.FunctionComponent<ITimelineProps> = observer(function({
             className={'tl-timeline-wrapper'}
             id={store.uniqueId}
         >
+            <div className={'tl-timeline-zoom-info'}>
+                <button
+                    className={'btn btn-xs'}
+                    onClick={() => {
+                        dateType = !dateType;
+                        console.log(dateType);
+                    }}
+                >
+                    <i className={'fa fa-search-minus'} /> toggle date type
+                </button>
+            </div>
             <div className={'tl-timeline-reset-buttons'}>
                 <div className={'tl-timeline-zoom-info'}>
                     {store.zoomBounds && (

diff --git a/packages/cbioportal-clinical-timeline/src/lib/helpers.ts b/packages/cbioportal-clinical-timeline/src/lib/helpers.ts
@@ -201,6 +201,9 @@ export function sortNestedTracks(tracks: TimelineTrackSpecification[]) {
 }
 
 export function formatDate(dayCount: number) {
+    var startDate = new Date('01/01/1960');
+    startDate.setDate(startDate.getDate() + dayCount);
+
     let negative = dayCount < 0;
     dayCount = Math.abs(dayCount);
 
@@ -218,7 +221,13 @@ export function formatDate(dayCount: number) {
         arr.push(`${days} day${days === 1 ? '' : 's'}`);
 
     const formattedDate = arr.join(', ');
-    return `${negative ? '-' : ''}${formattedDate}`;
+    return (
+        startDate.getDate() +
+        '/' +
+        (startDate.getMonth() + 1) +
+        '/' +
+        startDate.getFullYear()
+    );
 }
 
 function getAllDescendantData(