From dd107f7d3bdf851537234fe47ce05c3ba6c6b715 Mon Sep 17 00:00:00 2001 From: Dan Strano Date: Mon, 24 Jul 2023 12:19:01 -0400 Subject: [PATCH] Feedback from Will --- src/App.css | 7 +- src/MainRouter.js | 3 +- src/components/CategoryItemBox.js | 2 +- src/components/SubmissionBox.js | 2 +- src/components/SubmissionBoxSmall.js | 6 +- src/components/SubmissionScroll.js | 2 - src/views/Home.js | 249 +++++++++++++++++++++++++++ src/views/Tasks.js | 161 +---------------- 8 files changed, 263 insertions(+), 169 deletions(-) create mode 100644 src/views/Home.js diff --git a/src/App.css b/src/App.css index c40f1cab..3bdf4d02 100644 --- a/src/App.css +++ b/src/App.css @@ -238,17 +238,20 @@ form > span > .row > label { } .submission { - border-radius: 16px; padding: 8px; margin: 6px; background-color: #FFFFFF; - box-shadow: 0 3px 12px rgba(33,33,33,.2); } .submission:hover { box-shadow: 0 3px 16px rgba(33,33,33,.2); } +.submission-large { + border-radius: 16px; + box-shadow: 0 3px 12px rgba(33,33,33,.2); +} + .category-item-box { display: inline-block; height: 128px; diff --git a/src/MainRouter.js b/src/MainRouter.js index aba74bff..00092eac 100644 --- a/src/MainRouter.js +++ b/src/MainRouter.js @@ -2,6 +2,7 @@ import { BrowserRouter as Router, Redirect, Route, Switch } from 'react-router-d import axios from 'axios' import React, { useState } from 'react' import config from './config' +import Home from './views/Home' import Submissions from './views/Submissions' import LogIn from './views/LogIn' import Register from './views/Register' @@ -60,7 +61,7 @@ const MainRouter = (props) => { exact path='/' > - + { const CategoryItemBox = (props) => { return (
-
+
{props.type !== 'tag' && props.item.description &&
diff --git a/src/components/SubmissionBox.js b/src/components/SubmissionBox.js index 6b608dfc..574d78b0 100644 --- a/src/components/SubmissionBox.js +++ b/src/components/SubmissionBox.js @@ -96,7 +96,7 @@ const SubmissionBox = (props) => { } return ( -
+
diff --git a/src/components/SubmissionBoxSmall.js b/src/components/SubmissionBoxSmall.js index b6528d9b..a0964f68 100644 --- a/src/components/SubmissionBoxSmall.js +++ b/src/components/SubmissionBoxSmall.js @@ -2,7 +2,6 @@ import React from 'react' import { Link } from 'react-router-dom' import { library } from '@fortawesome/fontawesome-svg-core' import { faExternalLinkAlt } from '@fortawesome/free-solid-svg-icons' -import logo from './../images/metriq_logo_secondary_blue.png' library.add(faExternalLinkAlt) @@ -11,10 +10,7 @@ const SubmissionBoxSmall = (props) =>
-
- Submission thumbnail -
-
+
{(props.item.name.length > 80) ? (props.item.name.substring(0, 77) + '...') : props.item.name}
diff --git a/src/components/SubmissionScroll.js b/src/components/SubmissionScroll.js index 2487b578..f2d6bc16 100644 --- a/src/components/SubmissionScroll.js +++ b/src/components/SubmissionScroll.js @@ -132,8 +132,6 @@ class SubmissionScroll extends React.Component { key={index} isLoggedIn={this.props.isLoggedIn} isEditView={this.props.isEditView} - isUnderReview={!(item.approvedAt)} - isDraft={!(item.publishedAt)} />)} {!this.props.isSmall && this.state.items.length && ( Loading...
}> diff --git a/src/views/Home.js b/src/views/Home.js new file mode 100644 index 00000000..cf1095f2 --- /dev/null +++ b/src/views/Home.js @@ -0,0 +1,249 @@ +import axios from 'axios' +import React from 'react' +import { Button, Tab, Tabs } from 'react-bootstrap' +import config from '../config' +import ErrorHandler from '../components/ErrorHandler' +import FormFieldValidator from '../components/FormFieldValidator' +import FormFieldTypeaheadRow from '../components/FormFieldTypeaheadRow' +import CategoryScroll from '../components/CategoryScroll' +import CategoryItemIcon from '../components/CategoryItemIcon' +import CategoryItemBox from '../components/CategoryItemBox' +import SubscribeButton from '../components/SubscribeButton' +import FormFieldAlertRow from '../components/FormFieldAlertRow' +import FormFieldWideRow from '../components/FormFieldWideRow' +import { sortCommon, sortAlphabetical } from '../components/SortFunctions' +import SotaChart from '../components/SotaChart' +import { withRouter, Link } from 'react-router-dom' +import { library } from '@fortawesome/fontawesome-svg-core' +import { faHeart, faExternalLinkAlt, faChartLine } from '@fortawesome/free-solid-svg-icons' +import TopSubmitters from '../components/TopSubmitters' +import SubmissionScroll from '../components/SubmissionScroll' + +library.add(faHeart, faExternalLinkAlt, faChartLine) + +const qedcIds = [34, 2, 97, 142, 150, 172, 173, 174, 175, 176, 177, 178, 179] + +class Home extends React.Component { + constructor (props) { + super(props) + this.state = { + isLoading: true, + alphabetical: [], + allNames: [], + platforms: [], + featured: [], + trending: [], + popular: [], + latest: [], + topSubmitters: [], + activeTab: 'Trending', + filterId: null, + requestFailedMessage: '' + } + + this.handleOnFilter = this.handleOnFilter.bind(this) + this.handleOnSelect = this.handleOnSelect.bind(this) + } + + handleOnFilter (value) { + if (value) { + this.setState({ filterId: value.id }) + } + } + + handleOnSelect (value) { + if (value) { + this.props.history.push('/Task/' + value.id) + } + } + + componentDidMount () { + axios.get(config.api.getUriPrefix() + '/task/submissionCount') + .then(res => { + const alphabetical = res.data.data + alphabetical.sort(sortAlphabetical) + this.setState({ alphabetical, isLoading: false }) + }) + .catch(err => { + this.setState({ requestFailedMessage: ErrorHandler(err) }) + }) + + axios.get(config.api.getUriPrefix() + '/task/names') + .then(res => { + this.setState({ + requestFailedMessage: '', + allNames: res.data.data + }) + }) + .catch(err => { + this.setState({ requestFailedMessage: ErrorHandler(err) }) + }) + + axios.get(config.api.getUriPrefix() + '/platform/submissionCount') + .then(res => { + const common = [...res.data.data] + common.sort(sortCommon) + const rws = [] + for (let i = 0; i < 2; ++i) { + const row = [] + for (let j = 0; j < 3; ++j) { + row.push(common[3 * i + j]) + } + rws.push(row) + } + this.setState({ + requestFailedMessage: '', + platforms: rws + }) + }) + .catch(err => { + this.setState({ requestFailedMessage: ErrorHandler(err) }) + }) + + axios.get(config.api.getUriPrefix() + '/task/submissionCount/34') + .then(res => { + const featured = [res.data.data] + + axios.get(config.api.getUriPrefix() + '/task/submissionCount/50') + .then(res => { + featured.push(res.data.data) + + axios.get(config.api.getUriPrefix() + '/task/submissionCount/164') + .then(res => { + featured.push(res.data.data) + this.setState({ featured }) + }) + .catch(err => { + this.setState({ requestFailedMessage: ErrorHandler(err) }) + }) + }) + .catch(err => { + this.setState({ requestFailedMessage: ErrorHandler(err) }) + }) + }) + .catch(err => { + this.setState({ requestFailedMessage: ErrorHandler(err) }) + }) + } + + render () { + return ( +
+

Metriq is a platform for tracking and sharing quantum technology benchmarks. Users can make new submissions (link) that show the performance of different methods (link) on platforms (link) against tasks (link).

+

We have highlighted tasks here and you can search for more:

+
+ this.handleOnFilter(value)} + onSelect={this.handleOnSelect} + alignLabelRight + isRow + /> + +
+
+

Featured Tasks

+
+
+
+
+ {this.state.featured.map((item, index) => + +
+
+
+ + + +
+
+
+ {item.name} + {qedcIds.includes(parseInt(item.id)) && + (QED-C)} + +
+ {item.description} +
+
+
+
+ {item.parentTask.name} +
+
+ + + + + +
+
+
+
+ + )} +
+
+
+ +
+
+
+
Top Submissions
+ this.setState({ activeTab })}> + + + + + + + + + + +
+
+
+ +
+ + Platforms } /> + +
+ {(this.state.platforms.length > 0) && + + +

Platforms

+ + +
+
+ {this.state.platforms.map((row, rid) =>
{row.map((item, id) => )}
)} +
+
+ +
+ } + + + +
+ ) + } +} + +export default withRouter(Home) diff --git a/src/views/Tasks.js b/src/views/Tasks.js index 1671991e..130a0ef6 100644 --- a/src/views/Tasks.js +++ b/src/views/Tasks.js @@ -1,29 +1,20 @@ import axios from 'axios' import React from 'react' -import { Button, Tab, Tabs } from 'react-bootstrap' import config from './../config' import ErrorHandler from '../components/ErrorHandler' import FormFieldValidator from '../components/FormFieldValidator' import FormFieldTypeaheadRow from '../components/FormFieldTypeaheadRow' import CategoryScroll from '../components/CategoryScroll' -import CategoryItemIcon from '../components/CategoryItemIcon' -import CategoryItemBox from '../components/CategoryItemBox' -import SubscribeButton from '../components/SubscribeButton' import FormFieldAlertRow from '../components/FormFieldAlertRow' import FormFieldWideRow from '../components/FormFieldWideRow' import ViewHeader from '../components/ViewHeader' -import { sortCommon, sortAlphabetical } from '../components/SortFunctions' -import SotaChart from '../components/SotaChart' -import { withRouter, Link } from 'react-router-dom' +import { sortAlphabetical } from '../components/SortFunctions' +import { withRouter } from 'react-router-dom' import { library } from '@fortawesome/fontawesome-svg-core' import { faHeart, faExternalLinkAlt, faChartLine } from '@fortawesome/free-solid-svg-icons' -import TopSubmitters from '../components/TopSubmitters' -import SubmissionScroll from '../components/SubmissionScroll' library.add(faHeart, faExternalLinkAlt, faChartLine) -const qedcIds = [34, 2, 97, 142, 150, 172, 173, 174, 175, 176, 177, 178, 179] - class Tasks extends React.Component { constructor (props) { super(props) @@ -31,13 +22,6 @@ class Tasks extends React.Component { isLoading: true, alphabetical: [], allNames: [], - platforms: [], - featured: [], - trending: [], - popular: [], - latest: [], - topSubmitters: [], - activeTab: 'Trending', filterId: null, requestFailedMessage: '' } @@ -79,60 +63,12 @@ class Tasks extends React.Component { .catch(err => { this.setState({ requestFailedMessage: ErrorHandler(err) }) }) - - axios.get(config.api.getUriPrefix() + '/platform/submissionCount') - .then(res => { - const common = [...res.data.data] - common.sort(sortCommon) - const rws = [] - for (let i = 0; i < 2; ++i) { - const row = [] - for (let j = 0; j < 3; ++j) { - row.push(common[3 * i + j]) - } - rws.push(row) - } - this.setState({ - requestFailedMessage: '', - platforms: rws - }) - }) - .catch(err => { - this.setState({ requestFailedMessage: ErrorHandler(err) }) - }) - - axios.get(config.api.getUriPrefix() + '/task/submissionCount/34') - .then(res => { - const featured = [res.data.data] - - axios.get(config.api.getUriPrefix() + '/task/submissionCount/50') - .then(res => { - featured.push(res.data.data) - - axios.get(config.api.getUriPrefix() + '/task/submissionCount/164') - .then(res => { - featured.push(res.data.data) - this.setState({ featured }) - }) - .catch(err => { - this.setState({ requestFailedMessage: ErrorHandler(err) }) - }) - }) - .catch(err => { - this.setState({ requestFailedMessage: ErrorHandler(err) }) - }) - }) - .catch(err => { - this.setState({ requestFailedMessage: ErrorHandler(err) }) - }) } render () { return (
Tasks -

Tasks are workloads of interest performed on a quantum computer.

-

Search the task hierarchy to see charts of comparative performance across methods, see our submitter leader board and featured task charts, or click into the parent/child task hierarchy through top-level task categories.


- -
-
-

Featured

-
-
-
-
- {this.state.featured.map((item, index) => - -
-
-
- - - -
-
-
- {item.name} - {qedcIds.includes(parseInt(item.id)) && - (QED-C)} - -
- {item.description} -
-
-
-
- {item.parentTask.name} -
-
- - - - - -
-
-
-
- - )} -
-
-
- -
-
-
-
Top Submissions
- this.setState({ activeTab })}> - - - - - - - - - - -
-
-
- +

Tasks are workloads of interest performed on a quantum computer.

+

Search the task hierarchy to see charts of comparative performance across methods or click into the parent/child task hierarchy through top-level task categories.



- {(this.state.platforms.length > 0) && - - -

Platforms

- - -
-
- {this.state.platforms.map((row, rid) =>
{row.map((item, id) => )}
)} -
-
- -
- - - - }