cBioPortal/iViz

View on GitHub
app/index.html

Summary

Maintainability
Test Coverage
<!doctype html>
<html class="no-js" lang="">
<head>
  <meta charset="utf-8">

  <!-- This file shouldn't be included in cBioPortal -->
  <!-- build:js(.) scripts/iviz-vendor-cbio.js -->
  <script src="/bower_components/jquery/jquery.min.js"></script>
  <script src="/bower_components/jquery-ui/ui/jquery-ui.js"></script>
  <script src="/bower_components/bootstrap-sass/assets/javascripts/bootstrap.js"></script>
  <!-- endbuild -->

  <!-- build:js(.) scripts/iviz-vendor.js -->
  <script src="/bower_components/vue/dist/vue.js"></script>
  <script src="/bower_components/modernizr/modernizr.js"></script>
  <script src="/bower_components/chosen/chosen.jquery.min.js"></script>
  <script src="/bower_components/datatables/media/js/jquery.dataTables.js"></script>
  <script src="/bower_components/d3/d3.min.js"></script>
  <script src="/bower_components/crossfilter2/crossfilter.min.js"></script>
  <script src="/bower_components/dcjs/dc.js"></script>
  <script src="/bower_components/classie/classie.js"></script>
  <script src="/bower_components/get-style-property/get-style-property.js"></script>
  <script src="/bower_components/get-size/get-size.js"></script>
  <script src="/bower_components/eventie/eventie.js"></script>
  <script src="/bower_components/eventEmitter/EventEmitter.js"></script>
  <script src="/bower_components/unipointer/unipointer.js"></script>
  <script src="/bower_components/unidragger/unidragger.js"></script>
  <script src="/bower_components/draggabilly/draggabilly.js"></script>
  <script src="/bower_components/doc-ready/doc-ready.js"></script>
  <script src="/bower_components/matches-selector/matches-selector.js"></script>
  <script src="/bower_components/fizzy-ui-utils/utils.js"></script>
  <script src="/bower_components/outlayer/item.js"></script>
  <script src="/bower_components/outlayer/outlayer.js"></script>
  <script src="/bower_components/packery/dist/packery.pkgd.js"></script>
  <script src="/bower_components/underscore/underscore.js"></script>
  <script src="/bower_components/ev-emitter/ev-emitter.js"></script>
  <script src="/bower_components/imagesloaded/imagesloaded.js"></script>
  <script src="/bower_components/qtip2/jquery.qtip.js"></script>
  <script src="/bower_components/qtip2/basic/jquery.qtip.js"></script>
  <script src="/bower_components/clipboard/dist/clipboard.js"></script>
  <script src="/bower_components/plotly.js/dist/plotly.min.js"></script>
  <script src="/bower_components/react/react.js"></script>
  <script src="/bower_components/react/react-dom.js"></script>
  <script src="/bower_components/fixed-data-table/dist/fixed-data-table.min.js"></script>
  <script src="/bower_components/jstat/dist/jstat.min.js"></script>
  <script src="/bower_components/backbone/backbone.js"></script>
  <script src="/bower_components/remarkable-bootstrap-notify/bootstrap-notify.js"></script>
  <script src="/bower_components/progressbar.js/dist/progressbar.min.js"></script>
  <!-- endbuild -->

  <!-- build:css(.) styles/iviz-vendor.css -->
  <link rel="stylesheet" href="/.tmp/styles/vendor.css"/>
  <!-- bower:css -->
  <link rel="stylesheet" href="/bower_components/datatables/media/css/jquery.dataTables.css" />
  <link rel="stylesheet" href="/bower_components/dcjs/dc.css" />
  <link rel="stylesheet" href="/bower_components/qtip2/jquery.qtip.css" />
  <link rel="stylesheet" href="/bower_components/fixed-data-table/dist/fixed-data-table.min.css" />
  <!-- endbower -->
  <!-- endbuild -->

  <!-- build:css(.tmp) styles/iviz.css -->
  <link rel="stylesheet" href="styles/main.css"/>
  <!-- endbuild -->

  <!-- build:js scripts/cbio-vendor.js -->
  <script src="_components/FileSaver.min.js"></script>
  <script src="_components/cbio-util.js"></script>
  <script src="_components/download-util.js"></script>
  <script src="_components/MutatedGeneCNATable.js"></script>
  <script src="scripts/model/dataProxy.js"></script>
  <script src="_components/cbioportal-client.js"></script>
  <!-- endbuild -->

  <!-- build:js scripts/iviz.js -->
  <script src="scripts/session/sessionEvent.js"></script>
  <script src="scripts/session/sessionServices.js"></script>
  <script src="scripts/session/sessionUtil.js"></script>
  <script src="_components/Notification.js"></script>
  <script src="_components/GeneValidator.js"></script>
  <script src="_components/QueryByGeneUtil.js"></script>
  <script src="_components/QueryByGeneTextArea.js"></script>
  <script src="scripts/main.js"></script>
  <script src="scripts/vueCore.js"></script>
  <script src="scripts/controller/util.js"></script>
  <script src="scripts/controller/priorityManager.js"></script>
  <script src="scripts/views/mainTemplate.js"></script>
  <script src="scripts/views/chartGroupTemplate.js"></script>
  <script src="scripts/views/individualChartTemplate.js"></script>
  <script src="scripts/views/components/generalChart.js"></script>
  <script src="scripts/views/components/chartOperationsHeader.js"></script>
  <script src="scripts/views/components/header/manageCharts.js"></script>
  <script src="scripts/views/components/header/breadCrumbTemplate.js"></script>
  <script src="scripts/views/components/pieChart/pieChart.js"></script>
  <script src="scripts/views/components/pieChart/pieChartTemplate.js"></script>
  <script src="scripts/views/components/barChart/barChart.js"></script>
  <script src="scripts/views/components/barChart/barChartTemplate.js"></script>
  <script src="scripts/views/components/scatterPlot/scatterPlot.js"></script>
  <script src="scripts/views/components/scatterPlot/scatterPlotTemplate.js"></script>
  <script src="scripts/views/components/survivalChart/main.js"></script>
  <script src="scripts/views/components/survivalChart/template.js"></script>
  <script src="scripts/views/components/survivalChart/components/kmEstimator.js"></script>
  <script src="scripts/views/components/survivalChart/components/logRankTest.js"></script>
  <script src="scripts/views/components/survivalChart/components/curve.js"></script>
  <script src="scripts/views/components/survivalChart/proxy.js"></script>
  <script src="scripts/views/components/dataTable/tableView.js"></script>
  <script src="scripts/views/components/dataTable/tableViewTemplate.js"></script>
  <script src="scripts/views/components/customPlots/CaseDialogBox.js"></script>
  <script src="scripts/views/components/error.js"></script>
  <script src="scripts/views/components/shareVirtualStudy/shareVirtualStudy.js"></script>
  <script src="scripts/views/components/virtualStudy/virtualStudy.js"></script>
  <script src="scripts/views/components/progressBar/progressBar.js"></script>
  <!-- endbuild -->
</head>
<body>

<div class="container-fluid" id="complete-screen">
  <nav class="navbar navbar-default navbar-fixed-top" v-if="!failedToInit.status">
    <div id="main-header" style="display: none" :class="{show:!isloading}">
      <div id="iviz-header-left">
        <div class="iviz-header-left-case iviz-header-item">
          <span class="name">Selected:</span>
          <span class="content">
            <span>{{ selectedSamplesNum }} samples / {{ selectedPatientsNum }} patients</span>
          </span>
        </div>
        <virtual-study class="iviz-header-item" v-if="showShareButton || showSaveButton" :show-share-button="showShareButton"
                       :show-save-button="showSaveButton" :stats="stats"
                       :update-stats.sync="updateStats"></virtual-study>
        <span id="iviz-header-left-patient-select" class="iviz-header-button iviz-header-item"
              @click="openCases" class="number"
              role="button" tabindex="0" style="display: block;"><i class="fa fa-user-circle-o" aria-hidden="true"></i></span>
        <span id="iviz-header-left-case-download" class="iviz-header-button iviz-header-item" @click="downloadCaseData()"
              role="button"
              tabindex="0" :disabled="downloadingSelected">
          <i v-if="!downloadingSelected" class="fa fa-download" alt="download"></i>
          <i v-if="downloadingSelected" class="fa fa-spinner fa-spin"></i></span>

        <span id="query-by-gene-span" class="iviz-header-item">
          <textarea id="query-by-gene-textarea" class="expand expandFocusOut" rows="1" cols="10"></textarea>
        </span>
        <span class="iviz-header-arrow iviz-header-item">
          <i class="fa fa-arrow-right fa-lg" aria-hidden="true"></i>
        </span>
        <input type="button" id="iviz-header-left-1" value="Query" class="iviz-header-button iviz-header-item" style="display: block;"
               v-on:click="submitForm">
        <custom-case-input class="iviz-header-item" :stats="stats" :update-stats.sync="updateStats"></custom-case-input>
        <select id="iviz-add-chart" class="chosen-select iviz-header-item"
                v-select :charts="charts" v-if="showDropDown">
          <option id='' value="">Add Chart</option>
          <option id="{{data.attr_id}}" v-if="!data.show" value="{{data.attr_id}}" v-for="(index,data) in charts">
            {{data.display_name}}
          </option>
        </select>
      </div>

      <div id="breadcrumbs_container" v-if="hasfilters">
        <div style="float:left;">
          <span class="breadcrumb_container">Your selections: </span>
        </div>

        <span class="breadcrumb_container"
              v-if="customfilter.patientUids.length>0||customfilter.sampleUids.length>0">
          <span>{{customfilter.display_name}}</span>
          <i class="fa fa-times breadcrumb_remove"
             @click="clearAllCharts(true)"></i>
        </span>
        <div style="float:left" v-for="group in groups">
          <bread-crumb :attributes.sync="item"
                       :filters.sync="item.filter" v-for="(index1, item) in group.attributes"
                       v-if="item.filter.length>0"></bread-crumb>
        </div>
        <div style="float:left">
          <button type='button' @click="clearAllCharts(true)"
                  class="btn btn-default btn-xs">Clear All
          </button>
        </div>
      </div>
    </div>
  </nav>
  <div :class="{'start-loading': showScreenLoad}" v-if="!failedToInit.status">
    <div class="grid" id="main-grid" v-show="!isloading">
      <main-template :groups.sync="groups" :redrawgroups.sync="redrawgroups"
                     :selectedpatient-uIDs.sync="selectedpatientUIDs"
                     :selectedsample-uIDs.sync="selectedsampleUIDs"
                     :hasfilters.sync="hasfilters"
                     :customfilter.sync="customfilter"
                     :showed-survival-plot="showedSurvivalPlot"
                     :clear-all="clearAll"></main-template>
    </div>
    <progress-bar div-id="study-view-summary-page-pb" :status="studyViewSummaryPagePBStatus" v-show="isloading"></progress-bar>
  </div>
  <error container-id="fail-to-init" v-if="failedToInit.status" :message="failedToInit.message"></error>
</div>

</body>
<script>
  $(document).ready(function() {
    //Include style variables
    iViz.vue.manage.init();
    // Set this to true if want to share virtual study, before user is authenticated
    iViz.vue.manage.getInstance().showShareButton = false;

    iViz.vue.manage.getInstance().showSaveButton = false;

    //Set this to true if want to load user specific cohorts(this is for cbioportal)
    iViz.vue.manage.getInstance().loadUserSpecificCohorts = false;

    window.cbioURL = 'http://www.cbioportal.org/';
    window.appVersion = new Date().getTime();
    window.userEmailAddress = '';
    window.cbioResourceURL = 'resources/';
    window.mutationProfileId = 'acc_tcga_mutations';
    window.cnaProfileId = 'acc_tcga_gistic';
    window.case_set_id = '-1';
    var studyCasesMap = {};
    studyCasesMap['acc_tcga'] = {};
    window.cohortIdsList = ['acc_tcga'];
    window.iviz = {};
    window.iviz.datamanager = new DataManagerForIviz.init(window.cbioURL, studyCasesMap);

    var getSelectableStudyIds = function() {
      var def = new $.Deferred();
      $.when(window.iviz.datamanager.getAllPhysicalStudies(),
        window.iviz.datamanager.getAllVirtualStudies()).then(function(physicalStudies, virtualStudies) {
        var physicalStudyIds = _.pluck(physicalStudies, 'studyId');
        var virtualStudyIds = _.pluck(virtualStudies, 'id');
        def.resolve(physicalStudyIds.concat(virtualStudyIds))
      }).fail(function(error) {
        def.reject(error);
      });
      return def.promise();
    };
    $.when(window.iviz.datamanager.getConfigs())
      .done(function(configs) {
        var opts = {};
        if (_.isObject(configs)) {
          opts = configs;
        }
        $.when(
          window.iviz.datamanager.initialSetup(),
          getSelectableStudyIds()
        ).done(function(_data,selectableIds) {
          iViz.init(_data, opts, selectableIds);
        }).fail(function(error) {
          iViz.vue.manage.getInstance().failedToInit.status = true;
          if (error) {
            iViz.vue.manage.getInstance().failedToInit.message = error
          }
          iViz.vue.manage.getInstance().isloading = false;
        });
      })
      .fail(function() {
        iViz.vue.manage.getInstance().failedToInit.status = true;
        iViz.vue.manage.getInstance().failedToInit.message = 'Failed to load study view configurations.';
        iViz.vue.manage.getInstance().isloading = false;
      });

    QueryByGeneTextArea.init('#query-by-gene-textarea', function(genes) {
      iViz.vue.manage.getInstance().$broadcast('gene-list-updated', genes);
    });

  });
</script>
</html>