<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Plato - components/Investigation/InvestigationTable.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/Investigation/InvestigationTable.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">65.50</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">337</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">38.36</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">2.24</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 &quot;react&quot;;
import Moment from &quot;react-moment&quot;;
import { Grid, Row, Col, Button, Glyphicon } from &quot;react-bootstrap&quot;;
import { Link } from &quot;react-router-dom&quot;;
import _ from &quot;lodash&quot;;
import Loading from &quot;../../components/Loading.js&quot;;
import DOIBadge from &quot;../../components/doi/DOIBadge.js&quot;;
import { stringifyBytesSize } from &quot;../Helpers.js&quot;;
import ResponsiveTable from &quot;../Table/ResponsiveTable.js&quot;;
import InvestigationWidget from &#039;../Investigation/InvestigationWidget.js&#039;;

import {
  SAMPLE_COUNT,
  FILE_COUNT,
  VOLUME,
  DATASET_COUNT
} from &quot;../../constants/ParameterTypes.js&quot;;

class InvestigationTable extends React.Component {

  doiFormatter(cell, row) {
    return &lt;DOIBadge doi={cell} /&gt;;
  }

  dateFormatter(cell, row) {
    if (cell != null) {
      return (
        &lt;Moment parse=&quot;YYYY-MM-DD HH:mm&quot; format=&quot;DD/MM/YYYY&quot;&gt;
          ${cell}
        &lt;/Moment&gt;
      );
    }
  }

  beamlineFormatter(cell, row) {
    return &lt;span style={{ fontWeight: &#039;bold&#039; }}&gt;{cell.toUpperCase()}&lt;/span&gt;;
  }

  nameFormatter(cell, investigation, rowIndex, extraData) {    
    if (extraData.props.linkProposal || extraData.props.user.isAdministrator) {
      return (
        &lt;Link to={`/investigation/${investigation.id}/datasets`}&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;{investigation.name} &lt;/span&gt;&lt;/Button&gt;
        &lt;/Link&gt;
      );
    } else {
      return &lt;span style={{ fontWeight: &quot;bold&quot; }}&gt;{investigation.name}&lt;/span&gt;;
    }
  }

  logbookFormatter(cell, investigation, rowIndex, extraData) {
    return (
      &lt;Link to={`/investigation/${investigation.id}/events`}&gt;
        &lt;span className=&quot;glyphicon glyphicon-list-alt&quot;&gt; &lt;/span&gt;
      &lt;/Link&gt;
    );
  }

  volumeFormatter(cell, investigation, rowIndex, extraData) {
    var volume = _.find(investigation.parameters, function (o) {
      return o.name === VOLUME;
    });
    if (volume) {
      if (volume.value) {
        if (volume.value !== 0) {
          return stringifyBytesSize(volume.value);
        }
      }
    }
  }

  experimentFormatter(cell, investigation, 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(investigation.name, investigation, rowIndex, extraData)}
        &lt;/Col&gt;

      &lt;/Row&gt;
      &lt;Row className=&quot;show-grid&quot;&gt;
        &lt;Col xs={12} md={12}&gt;
          {extraData.beamlineFormatter(investigation.visitId, investigation, rowIndex, 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;{investigation.summary}&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(investigation.doi, investigation, rowIndex, extraData)}&lt;/span&gt;
        &lt;/Col&gt;
      &lt;/Row&gt;
    &lt;/Grid&gt;;

  }

  /**
   * This looks into the parameters of the investigation
   */
  getParameter(investigation, parameterName) {
    var parameter = _.find(investigation.parameters, function (o) {
      return o.name === parameterName;
    });
    if (parameter) {
      if (parameter.value) {
        return parameter.value;
      }
    }
    return;
  }

  sampleCountFormatter(cell, investigation, extraData) {
    var sampleCount = extraData.getParameter(investigation, SAMPLE_COUNT);
    if (sampleCount) {
      if (sampleCount !== 0) {
        return sampleCount;
      }
    }
  }

  fileCountFormatter(cell, investigation, extraData) {
    var fileCount = extraData.getParameter(investigation, FILE_COUNT);
    if (fileCount) {
      if (fileCount !== 0) {
        return (
          &lt;span style={{ width: &quot;50px&quot;, textAlign: &quot;right&quot;, float: &quot;left&quot; }}&gt;
            {fileCount}
          &lt;/span&gt;
        );
      }
    }
  }

  datasetCountFormatter(cell, investigation, rowIndex, extraData) {
    var datasetCount = _.find(investigation.parameters, function (o) {
      return o.name === DATASET_COUNT;
    });
    if (datasetCount) {
      if (datasetCount.value) {
        if (datasetCount.value !== 0) {
          return (
            &lt;div&gt;
              &lt;span
                style={{ width: &quot;40px&quot;, textAlign: &quot;right&quot;, float: &quot;left&quot; }}
              &gt;
                {datasetCount.value}
              &lt;/span&gt;
              &lt;span
                style={{
                  width: &quot;80px&quot;,
                  marginLeft: &quot;5px&quot;,
                  float: &quot;left&quot;,
                  fontStyle: &quot;italic&quot;,
                  color: &quot;#999999&quot;
                }}
              &gt;
                ({extraData.volumeFormatter(cell, investigation, extraData)})
              &lt;/span&gt;
            &lt;/div&gt;
          );
        }
      }
    }
  }

  /**
   * It return true if releaseDate &lt; now
   */
  isReleased(investigation) {
    if (investigation) {
      if (investigation.releaseDate) {
        return true;
      }
    }
    return false;
  }


  getColumns() {
    function getLgHeaderStyle(width, hidden){
      return {
        xs: { hidden: true },
        sm: { hidden: true },
        md: { hidden: true },
        lg: { hidden: hidden, width: width, textAlign: &quot;center&quot; }
      };
    };

    return [
      {
        text: &quot;id&quot;,
        dataField: &quot;id&quot;,
        hidden: true
      },
      {
        text: &quot;Experiment&quot;,
        dataField: &quot;name&quot;,
        formatter: this.experimentFormatter,
        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;,
        sort: true,
        responsiveHeaderStyle: {
          xs: { hidden: true },
          sm: { hidden: true },

        }
      },
      {
        text: &quot;Datasets&quot;,
        dataField: &quot;datasets&quot;,
        formatter: this.datasetCountFormatter,
        formatExtraData: this,
        responsiveHeaderStyle: getLgHeaderStyle(&quot;150px&quot; , !this.props.showInvestigationStats)
      },
      {
        text: &quot;Start Date&quot;,
        dataField: &quot;startDate&quot;,
        formatter: this.dateFormatter,
        sort: true,
        responsiveHeaderStyle: getLgHeaderStyle(&quot;150px&quot; , false)
      },
      {
        text: &quot;Release&quot;,
        dataField: &quot;releaseDate&quot;,
        formatter: this.dateFormatter,
        sort: true,
        responsiveHeaderStyle: getLgHeaderStyle(&quot;110px&quot; , false)
      },
      {
        text: &quot;DOI&quot;,
        dataField: &quot;doi&quot;,
        formatter: this.doiFormatter,
        sort: true,
        responsiveHeaderStyle: getLgHeaderStyle(&quot;300px&quot; , false)
      
      }
    ];
  }

  render() {
   
   
    const expandRow = {
      showExpandColumn: true,
      //expandByColumnOnly: true,
      expanded: this.props.expanded,
      expandColumnPosition: &#039;right&#039;,
      expandHeaderColumnRenderer: ({ isAnyExpands }) =&gt; {
        if (isAnyExpands) {
          return &lt;span style={{ fontSize: &#039;18px&#039; }}&gt;&lt;Glyphicon glyph=&quot;zoom-out&quot; /&gt;&lt;/span&gt;;
        }
        return &lt;span style={{ fontSize: &#039;18px&#039; }}&gt;&lt;Glyphicon glyph=&quot;zoom-in&quot; /&gt;&lt;/span&gt;;
      },
      expandColumnRenderer: ({ expanded }) =&gt; {
        if (expanded) {
          return (
            &lt;Glyphicon glyph=&quot;zoom-out&quot; /&gt;
          );
        }
        return (
          &lt;Glyphicon glyph=&quot;zoom-in&quot; /&gt;
        );
      },
      renderer: investigation =&gt; {        
        return (
          &lt;InvestigationWidget
            investigation={investigation}
            sessionId={this.props.user.sessionId} &gt;
          &lt;/InvestigationWidget&gt;
        );
      }
    };


    if (this.props.fetching) {
      return &lt;Loading message=&quot;Loading investigations&quot; /&gt;;
    }

    return (
      &lt;ResponsiveTable
        keyField=&quot;id&quot;
        data={this.props.investigations}
        columns={this.getColumns()}
        expandRow={expandRow}
       
      /&gt;
    );
  }
}

export default InvestigationTable;
</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>
