diff --git a/ui/src/components/SampleGrid/SampleGridTable.css b/ui/src/components/SampleGrid/SampleGridTable.css index 171adad79..f6328ad8f 100644 --- a/ui/src/components/SampleGrid/SampleGridTable.css +++ b/ui/src/components/SampleGrid/SampleGridTable.css @@ -349,7 +349,7 @@ button[disabled] { margin-left: auto; } -.main-circle-center{ +.main-circle-center { fill: #dfd1d9; } diff --git a/ui/src/containers/SampleFlexView.jsx b/ui/src/containers/SampleFlexView.jsx index 6d8da31be..a2fd6de12 100644 --- a/ui/src/containers/SampleFlexView.jsx +++ b/ui/src/containers/SampleFlexView.jsx @@ -119,16 +119,25 @@ class NewSampleFlexView extends React.Component { const scContent = [1, 2, 3, 4, 5, 6, 7, 8]; return ( -
- - - {scContent.map((cell, idx) => { - return ( - this.renderCircle(scContent.length, idx, this.isCellSelected(cell)) - ) +
+ + + {scContent.map((cell, idx) => { + return this.renderCircle( + scContent.length, + idx, + this.isCellSelected(cell), + ); })} - - Sample Changer + + + Sample Changer +
diff --git a/ui/src/containers/SampleGridTableContainer.jsx b/ui/src/containers/SampleGridTableContainer.jsx index 3958aff94..5bd122dce 100644 --- a/ui/src/containers/SampleGridTableContainer.jsx +++ b/ui/src/containers/SampleGridTableContainer.jsx @@ -255,8 +255,12 @@ class SampleGridTableContainer extends React.Component { '#selectionRubberBand', ); document.querySelector('#selectionRubberBand').style.display = 'block'; - selectionRubberBand.style.width = `${e.clientX - selectionRubberBand.offsetLeft}px`; - selectionRubberBand.style.height = `${e.clientY - selectionRubberBand.offsetTop}px`; + selectionRubberBand.style.width = `${ + e.clientX - selectionRubberBand.offsetLeft + }px`; + selectionRubberBand.style.height = `${ + e.clientY - selectionRubberBand.offsetTop + }px`; } e.preventDefault(); @@ -800,10 +804,12 @@ class SampleGridTableContainer extends React.Component { ) { const nbpuck = []; // we won't display the cell / table if all puck in the cell are empty - cell.children.map((puck, idxtd)=> { - if(this.getSampleItems(Number(cell.name), idxtd+1).length > 0 - && (Number(this.props.filterOptions.puckFilter) === idxtd+1 - || this.props.filterOptions.puckFilter.toLowerCase() === '')) { + cell.children.map((puck, idxtd) => { + if ( + this.getSampleItems(Number(cell.name), idxtd + 1).length > 0 && + (Number(this.props.filterOptions.puckFilter) === idxtd + 1 || + this.props.filterOptions.puckFilter.toLowerCase() === '') + ) { nbpuck.push(puck); } }); @@ -812,8 +818,7 @@ class SampleGridTableContainer extends React.Component { let colsmP; if (nbpuck.length === 1) { colsmP = 3; - } - else if (nbpuck.length >= 4 && colsm === 'auto') { + } else if (nbpuck.length >= 4 && colsm === 'auto') { colsmP = 12; } else { colsmP = colsm; @@ -832,8 +837,14 @@ class SampleGridTableContainer extends React.Component { openedClassName="sample-items-collapsible" open lazyRender - trigger={this.getCollapsibleHeaderClose(Number(cell.name), 'collapsible-arrow-c')} - triggerWhenOpen={this.getCollapsibleHeaderOpen(Number(cell.name), 'collapsible-arrow-c')} + trigger={this.getCollapsibleHeaderClose( + Number(cell.name), + 'collapsible-arrow-c', + )} + triggerWhenOpen={this.getCollapsibleHeaderOpen( + Number(cell.name), + 'collapsible-arrow-c', + )} > - {cell.children.map((puck, idxth)=> { - if ((Number(this.props.filterOptions.puckFilter) === idxth+1 - || this.props.filterOptions.puckFilter.toLowerCase() === '') - && this.getSampleItems(Number(cell.name), idxth+1).length > 0) { - const puckMenuID = 'samples-grid-table-context-menu-puck' - return( - - {cell.children.map((puck, idxtd)=> { - if ((Number(this.props.filterOptions.puckFilter) === idxtd+1 - || this.props.filterOptions.puckFilter.toLowerCase() === '') - && this.getSampleItems(Number(cell.name), idxtd+1).length > 0) { - return( - - ) - } + {cell.children.map((puck, idxtd) => { + if ( + (Number(this.props.filterOptions.puckFilter) === + idxtd + 1 || + this.props.filterOptions.puckFilter.toLowerCase() === + '') && + this.getSampleItems(Number(cell.name), idxtd + 1) + .length > 0 + ) { + return ( + + ); + } return null; })} @@ -1096,63 +1153,52 @@ class SampleGridTableContainer extends React.Component { } render() { - return ( - this.state.loadGridTable ? ( -
- {this.props.contextMenu.show ? - ( - - {this.renderContextMenu(this.props.contextMenu.id)} - - ) - : - null - } - {this.props.viewMode.mode === 'Graphical View'? - ( - -
- {this.renderSampleChangerDrawing()} -
- {this.getManualSamples()} - {this.getSampleTable('auto')} - - - ) - : - ( - { this.containerRef = ref; }} - > -
- {this.getManualSamples()} - {this.getSampleTable(this.isSingleCell()? 12: 6)} - - ) - } -
- ): ( -
- loading... -
- ) + return this.state.loadGridTable ? ( +
+ {this.props.contextMenu.show ? ( + + {this.renderContextMenu(this.props.contextMenu.id)} + + ) : null} + {this.props.viewMode.mode === 'Graphical View' ? ( + +
+ {this.renderSampleChangerDrawing()} +
+ {this.getManualSamples()} + {this.getSampleTable('auto')} + + + ) : ( + { + this.containerRef = ref; + }} + > +
+ {this.getManualSamples()} + {this.getSampleTable(this.isSingleCell() ? 12 : 6)} + + )} +
+ ) : ( +
loading...
); } } @@ -1175,7 +1221,9 @@ function mapStateToProps(state) { viewMode: state.sampleGrid.viewMode, contextMenu: state.contextMenu.genericContextMenu, sampleChanger: state.sampleChanger, - type: state.sampleChanger.contents ? state.sampleChanger.contents.name : '"Mockup"' + type: state.sampleChanger.contents + ? state.sampleChanger.contents.name + : '"Mockup"', }; } diff --git a/ui/src/containers/SampleIsaraView.jsx b/ui/src/containers/SampleIsaraView.jsx index fcc991f7f..d504987c6 100644 --- a/ui/src/containers/SampleIsaraView.jsx +++ b/ui/src/containers/SampleIsaraView.jsx @@ -233,13 +233,26 @@ class NewSampleIsaraView extends React.Component { const numPucks = 29; return ( - -
-
- - - - { this.renderPucks(numPucks) } + +
+
+ + + + {this.renderPucks(numPucks)}
diff --git a/ui/src/containers/SampleListViewContainer.jsx b/ui/src/containers/SampleListViewContainer.jsx index 350b6ca1a..6eff1e247 100644 --- a/ui/src/containers/SampleListViewContainer.jsx +++ b/ui/src/containers/SampleListViewContainer.jsx @@ -151,13 +151,19 @@ class SampleListViewContainer extends React.Component { getCellFilterOptions() { let options = []; - let sampleListByCellNb = Object.values(this.props.sampleList).map(sample => sample.cell_no); + let sampleListByCellNb = Object.values(this.props.sampleList).map( + (sample) => sample.cell_no, + ); // we create a list from all cell numbers and keep unique value and then sort ascending - let sampleListByCellNbUniqueVal = [...new Set(sampleListByCellNb)].sort((va, vb) => va - vb);; + let sampleListByCellNbUniqueVal = [...new Set(sampleListByCellNb)].sort( + (va, vb) => va - vb, + ); if (this.props.sampleList) { options = sampleListByCellNbUniqueVal.map((cell) => ( - () + )); } @@ -175,13 +181,19 @@ class SampleListViewContainer extends React.Component { getPuckFilterOptions() { let options = []; - let sampleListByPuckNb = Object.values(this.props.sampleList).map(sample => sample.puck_no); + let sampleListByPuckNb = Object.values(this.props.sampleList).map( + (sample) => sample.puck_no, + ); // we create a list from all puck numbers and keep unique value and then sort ascending - let sampleListByPuckNbUniqueVal = [...new Set(sampleListByPuckNb)].sort((va, vb) => va - vb); + let sampleListByPuckNbUniqueVal = [...new Set(sampleListByPuckNb)].sort( + (va, vb) => va - vb, + ); if (this.props.sampleList) { - options = sampleListByPuckNbUniqueVal.map(puck=> ( - () + options = sampleListByPuckNbUniqueVal.map((puck) => ( + )); } options.push( @@ -305,11 +317,11 @@ class SampleListViewContainer extends React.Component { filterText: { text: ReactDOM.findDOMNode(this.filterInput).value.trim() }, }; this.props.filter(optionMap[e.target.id]); - if(Number(e.target.value) > 2) { + if (Number(e.target.value) > 2) { window.scroll({ top: 1, left: 0, - behavior: "smooth", + behavior: 'smooth', }); } }
- - Puck {idxth+1} - {puck.id !== '' ? -
+ {cell.children.map((puck, idxth) => { + if ( + (Number(this.props.filterOptions.puckFilter) === + idxth + 1 || + this.props.filterOptions.puckFilter.toLowerCase() === + '') && + this.getSampleItems(Number(cell.name), idxth + 1) + .length > 0 + ) { + const puckMenuID = + 'samples-grid-table-context-menu-puck'; + return ( +
+ + Puck {idxth + 1} + {puck.id !== '' ? ( +
Code : {puck.id}
- : null} + ) : null} - - {this.itemsControls(Number(cell.name), idxth+1)} + + {this.itemsControls( + Number(cell.name), + idxth + 1, + )} {this.displayPuckCellContextMenu(e, puckMenuID, Number(cell.name), idxth+1)}} + title="Puck Options" + className="samples-grid-table-context-menu-icon" + onClick={(e) => { + this.displayPuckCellContextMenu( + e, + puckMenuID, + Number(cell.name), + idxth + 1, + ); + }} > @@ -877,16 +921,29 @@ class SampleGridTableContainer extends React.Component {
- {this.getSampleItems(Number(cell.name), idxtd+1)} - + {this.getSampleItems( + Number(cell.name), + idxtd + 1, + )} +