Merge pull request #14 from sharmalab/dev

Release 0.5

.gitignore

@@ -1 +1,2 @@
 node_modules/
+public/javascripts/browserify/

README.MD

@@ -0,0 +1,27 @@
+# TCIA PubHub Public
+
+Public Facing TCIA Pubhub
+
+## Requirements
+
+* Node.js
+* Bindaas + MongoDB
+* Webpack
+
+## Installation:
+
+
+* git clone the repo
+* Copy config.js.example to config.js
+  * Set EZID username etc, bindaas api key and other parameters
+
+* Edit `config.js` and set bindaas host etc.
+
+* `<sudo> npm install`
+* you may need to install webpack alone if it fails (``<sudo> npm install webpack`)
+* `node bin/www` (Run with nohup etc.)
+* Runs on `localhost:3003` by default
+
+## Developers:
+
+* `webpack --watch` to watch and transpile JSX to js

app.js

@@ -32,34 +32,33 @@ app.use("/users", users);
 
 // catch 404 and forward to error handler
 app.use(function(req, res, next) {
-    var err = new Error("Not Found");
-    err.status = 404;
-    next(err);
+  var err = new Error("Not Found");
+  err.status = 404;
+  next(err);
 });
 
 // error handlers
 
 // development error handler
 // will print stacktrace
 if (app.get("env") === "development") {
-    app.use(function(err, req, res, next) {
-        res.status(err.status || 500);
-        res.render("error", {
-            message: err.message,
-            error: err
-        });
+  app.use(function(err, req, res, next) {
+    res.status(err.status || 500);
+    res.render("error", {
+      message: err.message,
+      error: err
     });
+  });
 }
 
 // production error handler
 // no stacktraces leaked to user
 app.use(function(err, req, res, next) {
-    res.status(err.status || 500);
-    res.render("error", {
-        message: err.message,
-        error: {}
-    });
+  res.status(err.status || 500);
+  res.render("error", {
+    message: err.message,
+    error: {}
+  });
 });
 
-
 module.exports = app;

public/javascripts/src/App.jsx

@@ -117,6 +117,18 @@ var SideBar = React.createClass({
 
 var App = React.createClass({
   render: function() {
+    function livesearch(e) {
+      e.preventDefault();
+      var val = document.getElementById("srch-term").value;
+      // display none those that don't match
+      [].forEach.call(document.getElementsByClassName("doiSummary"), function(
+        elem
+      ) {
+        elem.innerHTML.search(new RegExp(val, "i")) == -1 && val
+          ? elem.setAttribute("style", "display:none;")
+          : elem.setAttribute("style", "display:block;");
+      });
+    }
     return (
       <div>
         <div id="header">
@@ -126,6 +138,27 @@ var App = React.createClass({
         <div className="container" id="main">
           <h3 id="headline"> TCIA PubHub</h3>
 
+          <form>
+            <div className="input-group add-on">
+              <input
+                className="form-control input-lg"
+                placeholder="Search"
+                name="srch-term"
+                id="srch-term"
+                type="text"
+              />
+              <div className="input-group-btn">
+                <button
+                  onClick={livesearch}
+                  className="btn btn-lg"
+                  type="submit"
+                >
+                  <span className="glyphicon glyphicon-search" />
+                </button>
+              </div>
+            </div>
+          </form>
+
           <div id="allDois" className="col-md-10 col-md-offset-1">
             <AllDOI />
           </div>

public/javascripts/src/One.jsx

@@ -181,8 +181,7 @@ var App = React.createClass({
       console.log("...");
       URL = data[0].url;
       if (doi) {
-        var getResources =
-          "api/getResources?doi=" + encodeURI(doi);
+        var getResources = "api/getResources?doi=" + encodeURI(doi);
         if (version) {
           var getResources = getResources + "&version=" + version;
         }
@@ -289,13 +288,15 @@ var App = React.createClass({
 
             {self.state.data
               ? <div>
-                  <div className="row" style={{ paddingLeft: "20px" }}>
-                    <a href="/index"><h5>Homepage</h5></a>
+                  <div className="row pagebar" style={{ paddingLeft: "20px" }}>
+                    <a href="/index">Homepage</a>
+                    <span id="headlink_spacer"> &nbsp;&gt;&nbsp;</span>
+                    <a href={self.state.data.url}>  {self.state.data.title}</a>
                   </div>
                   <h2>{self.state.data.title}</h2>
                   <div><Citation doi={self.state.data.doi} /></div>
                   <div id="citationDisclaimer">
-                    If you use these data, please add this citation to your scholarly resources. Learn about Data Citation Standards.
+                    If you use these data, please add this citation to your scholarly resources. <a href="https://wiki.cancerimagingarchive.net/display/Public/Data+Usage+Policies+and+Restrictions">Learn about Data Citation Standards.</a>
                   </div>
                   <div id="doiBox">
 
@@ -376,6 +377,7 @@ var App = React.createClass({
                           </div>
                         </div>
                       : <div />}
+                    {/*
                     <div className="row doiRow">
                       <div className="col-md-3 doiSide">
                         Share
@@ -390,6 +392,7 @@ var App = React.createClass({
                         </div>
                       </div>
                     </div>
+                    */}
 
                   </div>
 

public/stylesheets/style.css

@@ -3,84 +3,117 @@ body {
   font: 14px "Lucida Grande", Helvetica, Arial, sans-serif;
   margin: 0;
 }
-
 a {
   color: #00B7FF;
 }
-
+h3{
+  margin-top: 0px;
+}
 .doiSummary{
     border: 1px solid #ddd;
     border-radius: 4px;
-    padding: 12px;
+    padding: 9px;
     margin: 14px 2px;
+    background-color:rgba(192,192,192,0.33);
 }
-.doiDescription{
-    padding-top: 8px;
-}
-.doiTitle{
-
+.doiDescription {
+  padding-top: 8px;
 }
+.doiTitle {}
 #headline {
-    text-align: center;
-    padding: 30px 20px;
+  text-align: center;
+  padding: 30px 20px;
 }
-#header{
-    background: url("../images/grunge-blueall2-tcia.jpg");
-    width: 100%;
-    height: 150px;
-    padding: 20px;
+.pagebar{
+  padding:5px;
+  font-size: 125%;
 }
-.message, .citation{
-    padding: 10px;
-    font-size: 12px;
+#header {
+  background: url("../images/grunge-blueall2-tcia.jpg");
+  width: 100%;
+  height: 100px;
+  padding: 20px;
 }
-.message{
-    width: 200px;
+.message, .citation {
+  padding: 10px;
+  font-size: 12px;
+}
+.message {
+  width: 200px;
 }
-
 .sideBarSection {
-    margin-top: 20px;
+  margin-top: 20px;
 }
 .sideBarSection ul {
-    list-style: none;
-    padding: 0;
+  list-style: none;
+  padding: 0;
+}
+.missing_warning{
+  text-transform: capitalize;
+}
+#doiBox {
+  border: 1px solid #ddd;
+  border-radius: 10px;
+  padding: 9px;
+  margin: 18px 0;
+}
+.doiRow {
+  padding: 8px;
+  overflow-wrap: break-word;
+  word-wrap: break-word;
+}
+#citationDisclaimer {
+  font-size: 10px;
+  padding: 4px;
+  background: #eee;
+}
+.doiSide {
+  font-weight: bold;
+}
+.resourceVal {
+  //    padding-left:40px;
+  float: right;
+  //    padding: 20px;
+}
 
+#main{
+    padding: 10px;
+    margin: 0 auto;
+    float: none;
 }
 
-#doiBox{
-    border: 1px solid #ddd;
+.previousResources{
+    max-height: 300px;
+    overflow-y: scroll;
+    //border-top: 1px solid #ccc;
+    padding: 10px;
+    border: 1px solid #eee;
     border-radius: 10px;
-    padding: 9px;
-    margin: 18px 0;
+    margin-bottom :10px;
+    //border-bottom: 1px solid #ccc;
 }
 
-.doiRow{
+.resource {
+    border: 1px dashed #333;
     padding: 8px;
-    overflow-wrap: break-word;
-    word-wrap: break-word;
-}
-#citationDisclaimer{
-    font-size: 10px;
-    padding: 4px;
-    background: #eee;
+
 }
-.doiSide {
+.resourceType{
     font-weight: bold;
+    text-transform: uppercase;
 }
-
-.resourceVal{
-//    padding-left:40px;
+.resourceDelete{
     float: right;
-//    padding: 20px;
-}
-li:hover{
-    background: #eee;
+    margin-top: -4px;
 }
 
-.tab-content{
-    padding: 20px;
+li:hover {
+  background: #eee;
+}
+.tab-content {
+  padding: 20px;
 }
-.shareaholic-canvas   {
-    zoom: 0.5;
-    margin-top: -5px;
+.shareaholic-canvas {
+  zoom: 0.5;
+  margin-top: -5px;
 }