Samples grid

by Matias Guijarro

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.24/browser.js"></script>
<script src="https://fb.me/react-with-addons-0.14.0.js"></script>
<script src="https://fb.me/react-dom-0.14.0.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.isotope/2.2.2/isotope.pkgd.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/x-editable/1.5.0/bootstrap3-editable/js/bootstrap-editable.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/x-editable/1.5.0/bootstrap3-editable/css/bootstrap-editable.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/classnames/2.1.5/index.min.js"></script>
<script src="https://rawgit.com/mguijarr/c81254820bc9264800a9/raw/696af40035b04de1c00661f6892ef5f1f9efd034/samples_list.js"></script>
<script src="https://facebook.github.io/react/js/jsfiddle-integration-babel.js"></script>
<div id="container">
</div>

CSS

.samples-grid-item {
  width: 190px;
  height: 90px;
  border: 1px solid #AAA;
  background: #FFF;
  box-shadow: 0px 2px 3px 0px #AAA;
  padding: 5px;
  margin-top: 5px;
  margin-right: 3px;
  margin-bottom: 5px;
  margin-left: 3px;
  overflow: hidden;
  border-radius: 3px;
}

.protein-acronym {
  font-size: small;
  font-weight: bold;
}

.dm {
  font-size: small;
  font-style: italic;
}

.sc_location {
  float: right;
  font-size: x-small;
}

.dot {
  height: 7px;
  width: 7px;
  margin-top: 1px;
  margin-right: 1px;
  border-radius: 100%;
  background: green;
  position: absolute;
  right: 0;
  top: 0;
}

.samples-grid-item-selected {
  background: #CEE3F6;
}

JavaScript 1.7

var SampleGrid = React.createClass({
    getInitialState() {
        return { isotope: null, samples_list: [] };
    },
    
    componentDidMount() {
        let container = ReactDOM.findDOMNode(this);
        if (! this.state.isotope) {
            this.setState({ isotope: new Isotope(container, {itemSelector: '.samples-grid-item', layoutMode: 'fitRows'})});
        }
    },

    componentDidUpdate(new_props, new_state) {
        if (new_state.samples_list != this.state.samples_list) {
            if (this.state.isotope) {
                this.state.isotope.reloadItems();
                this.state.isotope.layout();
                this.state.isotope.arrange();
            }
        }
    },

    render() {
        let samples_list = this.state.samples_list;
        return <div className='samples-grid'>
            {samples_list.map(function(sample_info, i) {
            let exp_type = sample_info.experimentType || "";
           let sc_loc = sample_info.containerSampleChangerLocation+":"+sample_info.sampleLocation
           return <SampleGridItem key={sample_info.sampleId} ref={sample_info.sampleId} sample_id={sample_info.sampleId} acronym={sample_info.proteinAcronym} name={sample_info.sampleName} dm="HA1234567" location={sc_loc} tags={exp_type}/>
       })}
        </div>;
    },
    
    add_samples(samples_list) {
        this.setState({'samples_list': samples_list});
    }
    
});

var SampleGridItem = React.createClass({
    getInitialState() {
        let tags;
        if (this.props.tags === "") {
            tags = [];
        } else {
            tags = this.props.tags.match(/[^ ]+/g);
        }
        console.log(tags);
        return { selected: false, loadable: false, 'tags': tags };
    },
    
    componentDidMount() {
    	let editable = ReactDOM.findDOMNode(this.refs.pacronym);
        $(editable).editable({ placement: "right", container: "body" });
    },
    
    btnClicked(e) {
      alert("clicked");
    },
    
    toggleSelected() {
  ...