<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Plato - components/DataCollection/DataCollectionTable.js</title>

  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="description" content="">
  <meta name="author" content="">

  <!--[if lt IE 9]>
  <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
  <![endif]-->

  <link href="../../assets/css/vendor/morris.css" rel="stylesheet" type="text/css">
  <link href="../../assets/css/vendor/bootstrap.css" rel="stylesheet" type="text/css">
  <link href="../../assets/css/vendor/font-awesome.css" rel="stylesheet" type="text/css">
  <link href="../../assets/css/vendor/codemirror.css" rel="stylesheet" type="text/css">
  <link href="../../assets/css/plato.css" rel="stylesheet" type="text/css">
  <link href="../../assets/css/plato-file.css" rel="stylesheet" type="text/css">

</head>

<body>

<div class="navbar navbar-fixed-top">
  <div class="container">
    <a class="navbar-brand" href="https://github.com/the-simian/es6-plato">ES6 Plato on Github</a>
    <ul class="nav navbar-nav">
      <li>
        <a href="../../index.html">Report Home</a>
      </li>
      <li class="active">
        <a href="display.html">Summary Display</a>
      </li>
    </ul>
  </div>
</div>

<div class="jumbotron">
  <div class="container">
    <h1>components/DataCollection/DataCollectionTable.js</h1>
  </div>
</div>

<div class="container aggregate-stats">
  <div class="row">
    <div class="col-md-6">
      <h2 class="header">Maintainability <a href="http://blogs.msdn.com/b/codeanalysis/archive/2007/11/20/maintainability-index-range-and-meaning.aspx"><i class="icon icon-info-sign" rel="popover" data-placement="top" data-trigger="hover" data-content="A value between 0 and 100 that represents the relative ease of maintaining the code. A high value means better maintainability." data-original-title="Maintainability Index"  data-container="body"></i></a></h2>
      <p class="stat">63.63</p>
    </div>
    <div class="col-md-6">
      <h2 class="header">Lines of code <i class="icon icon-info-sign" rel="popover" data-placement="top" data-trigger="hover" data-content="Source Lines of Code / Logical Lines of Code" data-original-title="SLOC/LSLOC" data-container="body"></i></h2>
      <p class="stat">201</p>
    </div>
  </div>
  <div class="row historical">
    <div class="col-md-6">
      <p id="chart_historical_maint" class="chart"></p>
    </div>
    <div class="col-md-6">
      <p id="chart_historical_sloc" class="chart"></p>
    </div>
  </div>
  <div class="row">
    <div class="col-md-6">
      <h2 class="header">Difficulty  <a href="http://en.wikipedia.org/wiki/Halstead_complexity_measures"><i class="icon icon-info-sign" rel="popover" data-placement="top" data-trigger="hover" data-content="The difficulty measure is related to the difficulty of the program to write or understand." data-original-title="Difficulty" data-container="body"></i></a></h2>
      <p class="stat">32.93</p>
    </div>
    <div class="col-md-6">
      <h2 class="header">Estimated Errors  <a href="http://en.wikipedia.org/wiki/Halstead_complexity_measures"><i class="icon icon-info-sign" rel="popover" data-placement="top" data-trigger="hover" data-content="Halstead's delivered bugs is an estimate for the number of errors in the implementation." data-original-title="Delivered Bugs" data-container="body"></i></a></h2>
      <p class="stat">1.48</p>
    </div>
  </div>
</div>

<div class="container charts">
  <div class="row">
    <h2 class="header">Function weight</h2>
  </div>
  <div class="row">
    <div class="col-md-6">
      <h3 class="chart-header">By Complexity <a href="http://en.wikipedia.org/wiki/Cyclomatic_complexity"><i class="icon icon-info-sign" rel="popover" data-placement="top" data-trigger="hover" data-content="This metric counts the number of distinct paths through a block of code. Lower values are better." data-original-title="Cyclomatic Complexity" data-container="body"></i></a></h3>
      <div id="fn-by-complexity" class="stat"></div>
    </div>
    <div class="col-md-6">
      <h3 class="chart-header">By SLOC  <i class="icon icon-info-sign" rel="popover" data-placement="top" data-trigger="hover" data-content="Source Lines of Code / Logical Lines of Code" data-original-title="SLOC/LSLOC" data-container="body"></i></h3>
      <div id="fn-by-sloc" class="stat"></div>
    </div>
  </div>
</div>

<div class="container">
  <div class="row">
    <textarea id="file-source" class="col-md-12">import React from &#039;react&#039;;
import { Button, Grid, Row, Col,Label, Glyphicon } from &#039;react-bootstrap&#039;;
import { Link } from &#039;react-router-dom&#039;;
import DOIBadge from &#039;../../components/doi/DOIBadge.js&#039;;
import _ from &#039;lodash&#039;;
import { TITLE, INVESTIGATION_NAMES, INSTRUMENT_NAMES } from &#039;../../constants/ParameterTypes.js&#039;;
import ResponsiveTable from &quot;../Table/ResponsiveTable.js&quot;;

class DataCollectionTable extends React.Component {
 
  doiFormatter(cell, row) {           
     return &lt;DOIBadge doi={cell}&gt;&lt;/DOIBadge&gt;
  }

  
   titleFormatter(cell, datacollection, extraData) {     
     
     var title = _.find(datacollection.parameters, function(o){ return o.name === TITLE });     
     if (title){
       if (title.value){        
            return (title.value);
       }
     }      
  }

    nameFormatter(cell, datacollection, extraData) {    
       
     var names = _.find(datacollection.parameters, function(o){ return o.name === INVESTIGATION_NAMES });     

     if (names){
       if (names.value){  
            var short = JSON.parse(JSON.stringify(names.value));            
            if (short.length &gt; 13){
                short = short.slice(0,10)+ &quot;...&quot;;
            }
         
            return &lt;Link to={`/public/${datacollection.doi}`}&gt;                
                &lt;Button  bsSize=&quot;xsmall&quot;  style={{width:120, textAlign:&#039;left&#039;}}&gt;
                  &lt;Glyphicon glyph=&quot;circle-arrow-right&quot; /&gt;
                  &lt;span style={{marginLeft:&#039;10px&#039;}}&gt;{short} &lt;/span&gt;
                &lt;/Button&gt;     
          &lt;/Link&gt;;
       }
     }      
  }

     beamlineFormatter(cell, datacollection, extraData) {     
       
     var names = _.find(datacollection.parameters, function(o){ return o.name === INSTRUMENT_NAMES });     
     if (names){
       if (names.value){        
            return (names.value);
       }
     }      
  }

    releaseFormatter(cell, datacollection, extraData) {     
        return &lt;Label bsStyle=&quot;primary&quot;&gt;RELEASED&lt;/Label&gt;
    }

    datasetCountFormmater(cell, datacolletion, rowIndex, extraData) {       
      return datacolletion.dataCollectionDatasets.length;
    }

    dataCollectionFormatter(cell, datacolletion, rowIndex, extraData) {      
    return &lt;Grid style={{textAlign:&#039;center&#039;}}&gt;
            &lt;Row className=&quot;show-grid&quot;&gt;
              &lt;Col xs={12} md={12}&gt;
                {extraData.nameFormatter(cell, datacolletion, extraData)}
              &lt;/Col&gt;
             
            &lt;/Row&gt;
             &lt;Row className=&quot;show-grid&quot;&gt;
             &lt;Col xs={12} md={12}&gt;
                {extraData.beamlineFormatter(cell, datacolletion, extraData)}
              &lt;/Col&gt;
            &lt;/Row&gt;
            &lt;Row className=&quot;show-grid&quot;&gt;
              &lt;Col xs={12}&gt;
                  &lt;div style={{color:&#039;gray&#039;, fontStyle:&#039;italic&#039;}}&gt; {extraData.titleFormatter(cell, datacolletion, extraData)}&lt;/div&gt;
              &lt;/Col&gt;             
            &lt;/Row&gt;           
             &lt;Row className=&quot;show-grid&quot; style={{fontSize:&#039;10px&#039;}}&gt;
              &lt;Col xs={12} &gt;
                   &lt;span &gt;{extraData.doiFormatter(datacolletion.doi, datacolletion, extraData)}&lt;/span&gt;   
              &lt;/Col&gt;             
            &lt;/Row&gt;
          &lt;/Grid&gt;;
      
  }

 getColumns() {  
     
    return [
        {
        text: &quot;id&quot;,
        dataField: &quot;id&quot;,
        hidden: true
      },
       {
        text: &quot;Experiment&quot;,
        dataField: &quot;name&quot;,
        formatter: this.dataCollectionFormatter,
        formatExtraData: this,
        sort: true,
        hidden: false,
        headerStyle: (column, colIndex) =&gt; {
          return { width: &quot;50%&quot;, textAlign: &quot;center&quot; };
        },
        responsiveHeaderStyle: {
          xs:  { width: &quot;100%&quot;},
          sm:  { width: &quot;100%&quot;},
          md:  { hidden : true },
          lg:  { hidden : true },
        }
      },
       {
        text: &quot;Proposal&quot;,
        dataField: &quot;name&quot;,
        formatter: this.nameFormatter,
        formatExtraData: this,
        sort: true,
        hidden: false,
        headerStyle: (column, colIndex) =&gt; {
          return { width: &quot;50%&quot;, textAlign: &quot;center&quot; };
        },
        responsiveHeaderStyle: {
          xs: { hidden : true },
          sm: { hidden : true },
          md: { width: &quot;140px&quot;, textAlign: &quot;center&quot; },
          lg: { width: &quot;140px&quot;, textAlign: &quot;center&quot; }
        }
      },
      {
        text: &quot;Beamline&quot;,
        dataField: &quot;visitId&quot;,
        formatter: this.beamlineFormatter,
        sort: true,
        responsiveHeaderStyle: {
          xs: { hidden : true },
          sm: { hidden : true },
          md: { width: &quot;140px&quot;, textAlign: &quot;center&quot; },
          lg: { width: &quot;140px&quot;, textAlign: &quot;center&quot; }
        }
      },
      {
        text: &quot;Title&quot;,
        dataField: &quot;summary&quot;,
        formatter: this.titleFormatter,        
        sort: true,
        responsiveHeaderStyle: {
          xs: { hidden : true},
          sm: { hidden : true },
        
        }
      },  
      {
        text: &quot;Datasets&quot;,
        dataField: &quot;summary&quot;,
        formatter: this.datasetCountFormmater,        
        sort: true,
        responsiveHeaderStyle: {
          xs: { hidden : true},
          sm: { hidden : true },
          md: { width: &quot;100px&quot;, textAlign: &quot;center&quot; },
          lg: { width: &quot;100px&quot;, textAlign: &quot;center&quot; }
        
        }
      },  
      
       {
        text: &quot;DOI&quot;,
        dataField: &quot;doi&quot;,
        formatter: this.doiFormatter,
        sort: true,
        responsiveHeaderStyle: {
          xs: { hidden : true },
          sm: { hidden : true },
          md: { hidden : true },
          lg: { width: &quot;300px&quot;, textAlign: &quot;center&quot; }
        }
      }
    ];
 }
  
  render() {   
    /*if (this.props.fetching) {
      return &lt;Loading message=&quot;Loading datacollections&quot;&gt;&lt;/Loading&gt;;
    }     */
    return (
      &lt;ResponsiveTable        
        keyField=&quot;id&quot;
        data={this.props.datacollections}
        columns={this.getColumns()}
      /&gt;
    );    
  }
}

export default DataCollectionTable;
</textarea>
  </div>
</div>

<footer class="footer">
  <div class="container">
    <p>.</p>
  </div>
</footer>

<script type="text/html" id="complexity-popover-template">
  <div class="complexity-notice">
    Complexity : {{ complexity.cyclomatic }} <br>
    Length : {{ complexity.halstead.length }} <br>
    Difficulty : {{ complexity.halstead.difficulty.toFixed(2) }} <br>
    Est # bugs : {{ complexity.halstead.bugs.toFixed(2) }}<br>
  </div>
</script>

<script type="text/javascript" src="../../assets/scripts/bundles/core-bundle.js"></script>
<script type="text/javascript" src="../../assets/scripts/bundles/codemirror.js"></script>
<script type="text/javascript" src="../../assets/scripts/codemirror.markpopovertext.js"></script>
<script type="text/javascript" src="report.js"></script>
<script type="text/javascript" src="report.history.js"></script>
<script type="text/javascript" src="../../assets/scripts/plato-file.js"></script>
</body>
</html>
