Clearer ruler annotation + misc

[Luke-Sikina]

Changes proposed in this pull request:

• Ruler annotation
  • Problem
  • Month and day annotations for large values were hard to understand at a glance
  • Solution
  • Write larger values in y{}m{}d{} form
  • Ex: "1860d" => "5y1m5d"
• Zooming still terrible
  • Problem
  • The start of the zoom is fixed now, but the region ends too soon
  • Fix
  • Adjusted the zoom region when trimmed
• Scroll/drag text renders twice
• "Click + drag to zoom" text not part of right element, flickers

@inodb

[inodb]

Getting some error building this?

make build
mkdir -p dist
echo "/* cBioPortal Clinical Timeline v0.0.20-2-ge763c28 | Maintained @ github.com/cbioportal/clinical-timeline */" > dist/clinical-timeline.js
sed -e '/start-test-code-not-included-in-build/','/end-test-code-not-included-in-build/d' js/lib/d3-timeline.js js/plugins/configButton.js js/plugins/exportTimeline.js js/plugins/helperLines.js js/plugins/overviewAxis.js js/plugins/pluginPrototype.js js/plugins/trimTimeline.js js/plugins/util.js js/plugins/verticalLine.js js/plugins/zoom.js js/clinicalTimeline.js js/parser.js js/sanity.js >> dist/clinical-timeline.js
echo "/* cBioPortal Clinical Timeline v0.0.20-2-ge763c28 | Maintained @ github.com/cbioportal/clinical-timeline */" > dist/clinical-timeline.min.js
if [ ! -d "node_modules" ]; then \
                echo "installing node_modules"; \
                npm install;  \
        fi
uglifyjs dist/clinical-timeline.js >> dist/clinical-timeline.min.js
Parse error at dist/clinical-timeline.js:1788,13
      return `${time.y}y${Math.abs(time.m)}m${Math.abs(time.d)}d`;
             ^
SyntaxError: Unexpected character '`'
    at JS_Parse_Error.get (eval at <anonymous> (/Users/debruiji/git/clinical-timeline/node_modules/uglify-js/tools/node.js:27:1), <anonymous>:86:23)
    at /Users/debruiji/git/clinical-timeline/node_modules/uglify-js/bin/uglifyjs:384:40
    at time_it (/Users/debruiji/git/clinical-timeline/node_modules/uglify-js/bin/uglifyjs:620:15)
    at /Users/debruiji/git/clinical-timeline/node_modules/uglify-js/bin/uglifyjs:345:9
    at FSReqWrap.readFileAfterClose [as oncomplete] (fs.js:511:3)
make: *** [dist/clinical-timeline.min.js] Error 1

Maybe I'm doing something wrong

[inodb]

@Luke-Sikina i added a test to run the build on Travis to master: https://github.com/cBioPortal/clinical-timeline/pull/123. Then rebased this PR. Looks like the build fails on Travis as well. So prolly good to fix that, otherwise I can't deploy it to npm. Uglifyjs is prolly not that important so if it's tricky to fix we could also remove that step entirely

[inodb]

Thanks for your work on this 🙏!

[inodb]

@Luke-Sikina would be nice to create some PR to the frontend as well where we can test this inside of cBioPortal. Not sure if there's an easy way, maybe there's already some documentation somewhere on how to do that?

[Luke-Sikina]

@inodb What do you mean by test this inside the cBioPortal? Right now we verify behavior inside the portal itself by viewing the patient page for actual patients. Are you saying that you want to load the patient page, but with your own timeline JSON instead of the one passed to the patient? As far as I know, you should be able to do this if you run your local javascript, then pause it in legacy.js at the beginning of buildTimeline and replace timeData with your own data. I realize that this isn't the easiest way to verify behavior, but I also don't see a clear path towards better verifiability. Thoughts?

Edit: verified that this works and discovered that you have to comment out $('#timeline-container').show(); (line 374)

Edit2: you were saying that you want to be able to give a link and have people use that link to test this without extra work. Ignore my answer, it's useless and nothing you didn't already know.

[inodb]

@Luke-Sikina Thanks for fixing this!

Found one minor issue with calculating tick after zoom:

I guess it's not exactly 5 years in this case, but should prolly round to 5 years?

This was using data from https://www.cbioportal.org/patient?studyId=lgg_ucsf_2014&caseId=P04:

[{"label":"Specimen","visible":true,"times":[{"starting_time":0,"ending_time":0,"display":"circle","tooltip_tables":[[["SURGERY","Astro II Initial"],["SAMPLE_ID","P04_Pri"],["START_DATE",0]]],"stack":1},{"starting_time":461,"ending_time":461,"display":"circle","tooltip_tables":[[["SURGERY","Anaplastic astrocytoma"],["SAMPLE_ID","P04_Rec1"],["START_DATE",461]]],"stack":1},{"starting_time":1075,"ending_time":1075,"display":"circle","tooltip_tables":[[["SURGERY","Anaplastic astrocytoma"],["SAMPLE_ID","P04_Rec2"],["START_DATE",1075]]],"stack":1},{"starting_time":1343,"ending_time":1343,"display":"circle","tooltip_tables":[[["SURGERY","Anaplastic astrocytoma"],["SAMPLE_ID","P04_Rec3"],["START_DATE",1343]]],"stack":1}],"collapse":false},{"label":"Surgery","visible":true,"times":[{"starting_time":0,"ending_time":0,"display":"circle","tooltip_tables":[[["EVENT_TYPE_DETAILED","Astro II Initial"],["START_DATE",0]]],"stack":2},{"starting_time":461,"ending_time":461,"display":"circle","tooltip_tables":[[["EVENT_TYPE_DETAILED","AA III Recurrence1"],["START_DATE",461]]],"stack":2},{"starting_time":1075,"ending_time":1075,"display":"circle","tooltip_tables":[[["EVENT_TYPE_DETAILED","AA III Recurrence2"],["START_DATE",1075]]],"stack":2},{"starting_time":1343,"ending_time":1343,"display":"circle","tooltip_tables":[[["EVENT_TYPE_DETAILED","AA III Recurrence3"],["START_DATE",1343]]],"stack":2}],"collapse":true},{"label":"Status","visible":true,"times":[{"starting_time":432,"ending_time":432,"display":"circle","tooltip_tables":[[["STATUS","radiographic_progression"],["START_DATE",432]]],"stack":3},{"starting_time":1065,"ending_time":1065,"display":"circle","tooltip_tables":[[["STATUS","radiographic_progression"],["START_DATE",1065]]],"stack":3},{"starting_time":1282,"ending_time":1282,"display":"circle","tooltip_tables":[[["STATUS","radiographic_progression"],["START_DATE",1282]]],"stack":3},{"starting_time":1854,"ending_time":1854,"display":"circle","color":"#000","tooltip_tables":[[["START_DATE",1854],["STATUS","DECEASED"]]],"stack":3}],"collapse":true},{"label":"Treatment","times":[],"visible":true,"split":true,"collapse":true},{"label":" Medical Therapy","times":[],"visible":true,"split":true,"collapse":true},{"label":" Chemotherapy","times":[],"visible":true,"split":true,"collapse":true},{"label":" TMZ","times":[{"starting_time":488,"ending_time":518,"display":"rect","tooltip_tables":[[["SUBTYPE","Chemotherapy"],["AGENT","TMZ"],["TREATMENT_TYPE","Medical Therapy"],["START_DATE",488],["STOP_DATE",518]]],"stack":7},{"starting_time":1111,"ending_time":1279,"display":"rect","tooltip_tables":[[["SUBTYPE","Chemotherapy"],["AGENT","TMZ"],["TREATMENT_TYPE","Medical Therapy"],["START_DATE",1111],["STOP_DATE",1279]]],"stack":7}],"visible":true,"split":true,"parent_track":" Chemotherapy"},{"label":" Radiation Therapy","times":[],"visible":true,"split":true,"collapse":true},{"label":" XRT","times":[{"starting_time":488,"ending_time":700,"display":"rect","tooltip_tables":[[["SUBTYPE","XRT"],["TREATMENT_TYPE","Radiation Therapy"],["START_DATE",488],["STOP_DATE",700]]],"stack":9}],"visible":true,"split":true,"parent_track":" Radiation Therapy"}]