diff --git a/src/components/experiment-list/experiment-list-element.js b/src/components/experiment-list/experiment-list-element.js index 4678700124363079dee43bc923119c9e6575c59c..41357127f13b79732c02a045dfc96d38eb0e726c 100644 --- a/src/components/experiment-list/experiment-list-element.js +++ b/src/components/experiment-list/experiment-list-element.js @@ -1,17 +1,18 @@ import React from 'react'; -import { FaPlay, FaTrash, FaFileExport, FaShareAlt, FaClone } from 'react-icons/fa'; +import { FaTrash, FaFileExport, FaShareAlt, FaClone } from 'react-icons/fa'; +import { RiPlayFill, RiPlayLine, RiPlayList2Fill } from 'react-icons/ri'; import { VscTriangleUp, VscTriangleDown } from 'react-icons/vsc'; import { GoFileSubmodule } from 'react-icons/go'; import timeDDHHMMSS from '../../utility/time-filter.js'; -//import ExperimentStorageService from '../../services/experiments/files/experiment-storage-service.js'; import ExperimentExecutionService from '../../services/experiments/execution/experiment-execution-service.js'; +import PublicExperimentsService from '../../services/experiments/files/public-experiments-service.js'; +import ExperimentStorageService from '../../services/experiments/files/experiment-storage-service.js'; import SimulationDetails from './simulation-details'; +import ExperimentOverview from '../experiment-overview/experiment-overview.js'; import './experiment-list-element.css'; -import PublicExperimentsService from '../../services/experiments/files/public-experiments-service.js'; -import ExperimentStorageService from '../../services/experiments/files/experiment-storage-service.js'; const CLUSTER_THRESHOLDS = { UNAVAILABLE: 2, @@ -166,19 +167,19 @@ export default class ExperimentListElement extends React.Component { disabled={this.isLaunchDisabled()} className='btn btn-default' title={this.launchButtonTitle} > - <FaPlay className='icon' />Launch + <RiPlayFill className='icon' />Launch </button> : null} {exp.rights.launch /*&& config.brainProcesses > 1*/ ? <button className='btn btn-default'> - <FaPlay className='icon' />Launch in Single Process Mode + <RiPlayLine className='icon' />Launch in Single Process Mode </button> : null} {exp.rights.launch /*&& this.props.availableServers.length > 1*/ ? <button className='btn btn-default' > - <FaPlay className='icon' />Launch Multiple + <RiPlayList2Fill className='icon' />Launch Multiple </button> : null} @@ -196,7 +197,8 @@ export default class ExperimentListElement extends React.Component { {exp.rights.launch ? <button className='btn btn-default'> {this.state.showRecordings ? - <VscTriangleUp className='icon' /> : <VscTriangleDown className='icon' /> + <VscTriangleUp className='icon' /> : + <VscTriangleDown className='icon' /> } Recordings </button> @@ -216,7 +218,8 @@ export default class ExperimentListElement extends React.Component { this.setState({ showSimDetails: !this.state.showSimDetails }); }}> {this.state.showSimDetails ? - <VscTriangleUp className='icon' /> : <VscTriangleDown className='icon' /> + <VscTriangleUp className='icon' /> : + <VscTriangleDown className='icon' /> } Simulations </button> @@ -226,7 +229,7 @@ export default class ExperimentListElement extends React.Component { {exp.rights.clone ? <button className='btn btn-default' onClick={() => { PublicExperimentsService.instance.cloneExperiment(exp); - this.props.selectExperimentOverviewTab(0); + this.props.selectExperimentOverviewTab(ExperimentOverview.CONSTANTS.TAB_INDEX.MY_EXPERIMENTS); }}> <FaClone className='icon' />Clone </button> diff --git a/src/components/experiment-overview/experiment-overview.js b/src/components/experiment-overview/experiment-overview.js index f6a796e83afaaf3ade2a748e978a124d54a122b2..a8d1146854b3c85a8a584aa8b02f841ac63720ba 100644 --- a/src/components/experiment-overview/experiment-overview.js +++ b/src/components/experiment-overview/experiment-overview.js @@ -1,7 +1,5 @@ import React from 'react'; import { Tab, Tabs, TabList, TabPanel } from 'react-tabs'; -//import Tabs from 'react-bootstrap/Tabs'; -//import Tab from 'react-bootstrap/Tab'; import 'react-tabs/style/react-tabs.css'; import ExperimentStorageService from '../../services/experiments/files/experiment-storage-service.js'; @@ -15,6 +13,17 @@ import NrpHeader from '../nrp-header/nrp-header.js'; import './experiment-overview.css'; export default class ExperimentOverview extends React.Component { + static CONSTANTS = { + TAB_INDEX: { + MY_EXPERIMENTS: 0, + NEW_EXPERIMENT: 1, + MODEL_LIBRARIES: 2, + EXPERIMENT_FILES: 3, + TEMPLATES: 4, + RUNNING_SIMULATIONS: 5 + } + }; + constructor(props) { super(props); this.state = { @@ -23,7 +32,7 @@ export default class ExperimentOverview extends React.Component { joinableExperiments: [], availableServers: [], startingExperiment: undefined, - selectedTabIndex: 0 + selectedTabIndex: ExperimentOverview.CONSTANTS.TAB_INDEX.MY_EXPERIMENTS }; } @@ -98,10 +107,6 @@ export default class ExperimentOverview extends React.Component { }); } - selectTab(index) { - this.setState({ selectedTabIndex: index }); - } - render() { return ( <div className='experiment-overview-wrapper'> @@ -111,9 +116,7 @@ export default class ExperimentOverview extends React.Component { <Tabs className="tabs-view" id="tabs-experiment-lists" selectedIndex={this.state.selectedTabIndex} - onSelect={(index) => this.setState({ selectedTabIndex: index })} - /*activeKey={this.state.selectedTabKey} - onSelect={(key) => this.setState({ selectedTabKey: key })}*/> + onSelect={(index) => this.setState({ selectedTabIndex: index })} > <TabList> <Tab>My Experiments</Tab> <Tab>New Experiment</Tab> @@ -124,32 +127,32 @@ export default class ExperimentOverview extends React.Component { </TabList> {/* My Experiments */} - <TabPanel /*Tab title='My Experiments' eventKey='my-experiments'*/> + <TabPanel> <ExperimentList experiments={this.state.storageExperiments} availableServers={this.state.availableServers} startingExperiment={this.state.startingExperiment} /> </TabPanel> {/* New Experiment */} - <TabPanel /*Tab title='New Experiment' eventKey='new-experiment'*/> + <TabPanel> <h2>"New Experiment" tab coming soon ...</h2> </TabPanel> {/* Model Libraries */} - <TabPanel /*Tab title='Model Libraries' eventKey='model-libraries'*/> + <TabPanel> <h2>"Model Libraries" tab coming soon ...</h2> </TabPanel> {/* Experiment Files */} - <TabPanel /*Tab title='Experiment Files' eventKey='experiment-files'*/> + <TabPanel> <h2>"Experiment Files" tab coming soon ...</h2> </TabPanel> {/* Templates */} - <TabPanel /*Tab title='Template Experiments' eventKey='template-experiments'*/> + <TabPanel> <ExperimentList experiments={this.state.publicExperiments} availableServers={this.state.availableServers} startingExperiment={this.state.startingExperiment} selectExperimentOverviewTab={(index) => this.setState({ selectedTabIndex: index })} /> </TabPanel> {/* Running Simulations */} - <TabPanel /*Tab title='Running Experiments' eventKey='running-experiments'*/> + <TabPanel> <ExperimentList experiments={this.state.joinableExperiments} availableServers={this.state.availableServers}