feat(participants): Initial work for participants.

- Create Participants entity feature within application. - Add basic fake data on server for demo purposes. - Add basic test coverage. Closes GDC-42
NCI-GDC · Oct 7, 2014 · f5ac3ca · f5ac3ca
1 parent b6ad2ae
commit f5ac3ca
Show file tree

Hide file tree

Showing 17 changed files with 658 additions and 8 deletions.
diff --git a/.gitignore b/.gitignore
@@ -3,6 +3,7 @@
 node_modules/
 bower_components/
 npm-debug.log*
+.DS_Store
 
 dist/
 .tmp/

diff --git a/app/scripts/app.ts b/app/scripts/app.ts
@@ -23,6 +23,7 @@ angular
 
       "ngApp.home",
       "ngApp.widgets",
+      "ngApp.participants",
       "ngApp.components",
       "templates"
     ])

diff --git a/app/scripts/components/header/templates/header.html b/app/scripts/components/header/templates/header.html
@@ -12,12 +12,10 @@
     <nav class="navbar-collapse collapse navbar-responsive-collapse" data-collapse="HeaderController.isCollapsed"
          role="navigation" data-ng-click="HeaderController.collapse()">
       <ul class="nav navbar-nav">
-        <li><a href="/widgets">Widgets1</a></li>
-        <li><a href="/widgets">Widgets2</a></li>
+        <li><a href="/widgets">Widgets</a></li>
+        <li><a href="/participants">Participants</a></li>
       </ul>
       <ul class="nav navbar-nav navbar-right">
-        <li><a href="/widgets">Widgets3</a></li>
-        <li><a href="/widgets">Widgets4</a></li>
       </ul>
     </nav>
   </div>

diff --git a/app/scripts/participant/module.ts b/app/scripts/participant/module.ts
@@ -0,0 +1,38 @@
+module ngApp.participants {
+  "use strict";
+
+  import IParticipantsService = ngApp.participants.services.IParticipantsService;
+  import IParticipant = ngApp.participants.models.IParticipant;
+
+  /* @ngInject */
+  function participantsConfig($stateProvider: ng.ui.IStateProvider) {
+    $stateProvider.state("participants", {
+      url: "/participants",
+      controller: "ParticipantsController as psc",
+      templateUrl: "participant/templates/participants.html",
+      resolve: {
+        participants: (ParticipantsService: IParticipantsService) => {
+          return ParticipantsService.getParticipants();
+        }
+      }
+    });
+
+    $stateProvider.state("participant", {
+      url: "/participants/:participantId",
+      controller: "ParticipantController as pc",
+      templateUrl: "participant/templates/participant.html",
+      resolve: {
+        participant: ($stateParams: ng.ui.IStateParamsService, ParticipantsService: IParticipantsService): ng.IPromise<IParticipant> => {
+          return ParticipantsService.getParticipant($stateParams["participantId"]);
+        }
+      }
+    });
+  }
+
+  angular
+      .module("ngApp.participants", [
+        "participants.controller",
+        "ui.router.state"
+      ])
+      .config(participantsConfig);
+}
diff --git a/app/scripts/participant/participants.controllers.ts b/app/scripts/participant/participants.controllers.ts
@@ -0,0 +1,29 @@
+module ngApp.participants.controllers {
+  import IParticipant = ngApp.participants.models.IParticipant;
+  import IParticipants = ngApp.participants.models.IParticipants;
+
+  export interface IParticipantsController {
+    participants: IParticipants;
+  }
+
+  class ParticipantsController implements IParticipantsController {
+    /* @ngInject */
+    constructor(public participants: IParticipants) {}
+  }
+
+  export interface IParticipantController {
+    participant: IParticipant;
+  }
+
+  class ParticipantController implements IParticipantController {
+    /* @ngInject */
+    constructor(public participant: IParticipant) {}
+  }
+
+  angular
+      .module("participants.controller", [
+        "participants.services"
+      ])
+      .controller("ParticipantsController", ParticipantsController)
+      .controller("ParticipantController", ParticipantController);
+}
diff --git a/app/scripts/participant/participants.models.ts b/app/scripts/participant/participants.models.ts
@@ -0,0 +1,93 @@
+module ngApp.participants.models {
+  import IPagination = ngApp.models.IPagination;
+  import Pagination = ngApp.models.Pagination;
+  import IFacet = ngApp.models.IFacet;
+  import Facet = ngApp.models.Facet;
+  import ICollection = ngApp.models.ICollection;
+
+  export interface IParticipants extends ICollection {
+    hits: IParticipant[];
+  }
+
+  export class Participants implements IParticipants {
+    pagination: IPagination;
+    facets: IFacet[];
+    hits: IParticipant[];
+
+    /* @ngInject */
+    constructor(obj: any) {
+      this.hits = this._getHits(obj.hits);
+      this.facets = this._getFacets(obj.facets);
+      this.pagination = new Pagination(obj.pagination);
+    }
+
+    private _getHits(hits: Object[]): IParticipant[] {
+      return hits.map((hit: Object): IParticipant => {
+        return new Participant(hit);
+      });
+    }
+
+    private _getFacets(facets: IFacet[] = []): IFacet[] {
+      return facets.map((facet: IFacet): IFacet => {
+        return new Facet(facet);
+      });
+    }
+  }
+
+  export interface IParticipant {
+    id: string;
+    code: string;
+    number: string;
+    site: string;
+    program: string;
+    status: string;
+    files: any;
+    annotations: any;
+    experiments: any;
+    data: any;
+    gender: string;
+    vitStatus: string;
+    key: string;
+    uuid: string;
+  }
+
+  export class Participant implements IParticipant {
+    id: string = "--";
+    code: string = "--";
+    number: string = "--";
+    site: string = "--";
+    program: string = "--";
+    status: string = "--";
+    files: any = [];
+    annotations: any = [];
+    uuid: string = "--";
+    experiments: any = [];
+    data: any = [];
+    gender: string = "--";
+    vitStatus: string = "--";
+    key: string = "--";
+
+    /* @ngInject */
+    constructor(obj: any) {
+      this.id = obj.id || this.id;
+      this.code = obj.code || this.code;
+      this.number = obj.number || this.number;
+      this.site = obj.site || this.site;
+      this.program = obj.program || this.program;
+      this.status = obj.status || this.status;
+      this.files = obj.files || this.files;
+      this.annotations = obj.annotations || this.annotations;
+      this.uuid = obj.uuid || this.uuid;
+      this.gender = obj.gender || this.gender;
+      this.vitStatus = obj.vitStatus || this.vitStatus;
+      this.key = obj.key || this.key;
+      this.experiments = obj.experiments || this.experiments;
+      this.data = obj.data || this.data;
+    }
+  }
+
+  angular
+      .module("participants.models", [])
+      .factory("Participants", Participants)
+      .factory("Participant", Participant);
+}
diff --git a/app/scripts/participant/participants.services.ts b/app/scripts/participant/participants.services.ts
@@ -0,0 +1,46 @@
+module ngApp.participants.services {
+  import IParticipant = ngApp.participants.models.IParticipant;
+  import Participant = ngApp.participants.models.Participant;
+  import IParticipants = ngApp.participants.models.IParticipants;
+  import Participants = ngApp.participants.models.Participants;
+
+  export interface IParticipantsService {
+    getParticipant(id: string): ng.IPromise<Participant>;
+    getParticipants(params?: Object): ng.IPromise<Participants>;
+  }
+
+  class ParticipantsService implements IParticipantsService {
+    private static logParticipant(id: string, params: Object) {
+      console.log("Received participant ", id, " request with params: ", params);
+    }
+
+    private static logParticipants(params: Object) {
+      console.log("Received participants request with params: ", params);
+    }
+
+    private ds: restangular.IElement;
+
+    /* @ngInject */
+    constructor(Restangular: restangular.IService) {
+      this.ds = Restangular.all("participants");
+    }
+
+    getParticipant(id: string, params: Object = {}): ng.IPromise<Participant> {
+      ParticipantsService.logParticipant(id, params);
+      return this.ds.get(id, params).then(function (response) {
+        return new Participant(response);
+      });
+    }
+
+    getParticipants(params: Object = {}): ng.IPromise<Participants> {
+      ParticipantsService.logParticipants(params);
+      return this.ds.get("", params).then(function (response) {
+        return new Participants(response);
+      });
+    }
+  }
+
+  angular
+      .module("participants.services", ["participants.models"])
+      .service("ParticipantsService", ParticipantsService);
+}
diff --git a/app/scripts/participant/templates/participant.html b/app/scripts/participant/templates/participant.html
@@ -0,0 +1,134 @@
+<div class="container entity participant">
+  <h1>
+    <span class="entity-identifier">Pa</span>
+    {{ pc.participant.code }}
+    <br>
+    <small>UUID: {{ pc.participant.uuid }}</small>
+  </h1>
+
+  <section class="participant-section row">
+    <div class="col-lg-12 col-md-12">
+      <div class="row">
+        <div class="col-lg-12 col-md-12">
+          <h2>Summary</h2>
+          <table class="table table-striped table-hover table-condensed table-bordered">
+            <tbody>
+              <tr>
+                <td>Code</td>
+                <td>{{ pc.participant.code }}</td>
+              </tr>
+              <tr>
+                <td>Participant Number</td>
+                <td>{{ pc.participant.number }}</td>
+              </tr>
+              <tr>
+                <td>Site</td>
+                <td>{{ pc.participant.site }}</td>
+              </tr>
+              <tr>
+                <td>Program</td>
+                <td>{{ pc.participant.program }}</td>
+              </tr>
+              <tr>
+                <td>Status</td>
+                <td>{{ pc.participant.status }}</td>
+              </tr>
+              <tr>
+                <td>Number of Data Files</td>
+                <td>
+                  <a data-ui-sref="files({ participantId: pc.participant.id })">
+                    {{ pc.participant.files.length }}
+                  </a>
+                </td>
+              </tr>
+              <tr>
+                <td>Number of Annotations</td>
+                <td>
+                  <a data-ui-sref="annotations({ participantId: pc.participant.id })">
+                    {{ pc.participant.annotations.length }}
+                  </a>
+                </td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+      </div>
+      <div class="row">
+        <div class="col-lg-6 col-md-6">
+          <h2>Experimental Analysis</h2>
+          <table class="table table-striped table-hover table-condensed table-bordered">
+            <thead>
+              <tr>
+                <th>Analysis</th>
+                <th>Samples</th>
+                <th>Files</th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr data-ng-repeat="experiment in pc.participant.experiments">
+                <td>{{ experiment.name }}</td>
+                <td>{{ experiment.samples }}</td>
+                <td>
+                  <a data-ui-sref="files({ participantId: pc.participant.id, experimentId: experiment.id })">
+                    {{ experiment.files }}
+                  </a>
+                </td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+        <div class="col-lg-6 col-md-6">
+          <h2>Available Data</h2>
+          <table class="table table-striped table-hover table-condensed table-bordered">
+            <tbody>
+              <tr data-ng-repeat="item in pc.participant.data">
+                <td>{{ item.name }}</td>
+                <td>
+                  <a data-ui-sref="files({ participantId: pc.participant.id, dataId: data.id })">
+                    {{ item.files }}
+                  </a>
+                </td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+      </div>
+      <div class="row">
+        <div class="col-lg-12 col-md-12">
+          <h2>
+            Clinical Information
+            <button class="btn btn-default pull-right">Download Clinical Data</button>
+          </h2>
+          <div class="row">
+            <div class="col-lg-6 col-md-6">
+              <table class="table table-striped table-hover table-condensed table-bordered">
+                <tbody>
+                  <tr>
+                    <td>Gender</td>
+                    <td>{{ pc.participant.gender }}</td>
+                  </tr>
+                  <tr>
+                    <td>Vital Status</td>
+                    <td>{{ pc.participant.vitStatus }}</td>
+                  </tr>
+                </tbody>
+              </table>
+            </div>
+            <div class="col-lg-6 col-md-6">
+              <table class="table table-striped table-hover table-condensed table-bordered">
+                <tbody>
+                  <tr>
+                    <td>Key</td>
+                    <td>{{ pc.participant.key }}</td>
+                  </tr>
+                </tbody>
+              </table>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+
+  </section>
+
+</div>