Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Unify table on the home page #1065

Open
wants to merge 15 commits into
base: main
Choose a base branch
from
Open

Unify table on the home page #1065

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
15 commits
Select commit Hold shift + click to select a range
60be1b4
start merging the tables
EshaanAgg Jul 8, 2024
5ac36b2
progress
EshaanAgg Jul 19, 2024
9e4123b
add filtering and hidding columns improvements
EshaanAgg Jul 25, 2024
7a45292
update UI and some snapshots
EshaanAgg Jul 25, 2024
21697e7
improve UI
EshaanAgg Jul 25, 2024
f06a380
handle if all columns are hidden
EshaanAgg Jul 26, 2024
1eb5437
add tooltip
EshaanAgg Jul 27, 2024
c020aa4
add compliance and fix tests
EshaanAgg Jul 27, 2024
2c85971
revert changes to data.json and create production build
EshaanAgg Jul 27, 2024
72b6584
update snapshots
EshaanAgg Jul 27, 2024
c7fe79c
ui changes
EshaanAgg Jul 29, 2024
531a5a0
build and test updates
EshaanAgg Jul 29, 2024
65ebfe7
add width zero with display hide combo for rendering
EshaanAgg Jul 29, 2024
67339c9
UI changes
EshaanAgg Aug 4, 2024
ae4890d
ui changes
EshaanAgg Aug 9, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion benchexec/tablegenerator/react-table/build/main.min.css
View file
Open in desktop

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion benchexec/tablegenerator/react-table/build/main.min.js
View file
Open in desktop

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion benchexec/tablegenerator/react-table/build/vendors.min.js
View file
Open in desktop

Large diffs are not rendered by default.

4 changes: 1 addition & 3 deletions benchexec/tablegenerator/react-table/scripts/start.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,8 +5,6 @@
//
// SPDX-License-Identifier: Apache-2.0

"use strict";
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Is removing this intentional?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

No sir. Will revert!

Copy link
Contributor Author

@EshaanAgg EshaanAgg Jul 29, 2024 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Apparently, it's an ESLint recommendation to remove the same, as the "use strict" directive is useless outside of ES modules and does not work for standalone scripts.
image


const fs = require("fs");
const path = require("path");

Expand All @@ -18,7 +16,7 @@ if (dataParam) {

fs.copyFileSync(
path.resolve(__dirname, "../", dataParam),
path.resolve(process.env.DATA)
path.resolve(process.env.DATA),
);
}

Expand Down
93 changes: 75 additions & 18 deletions benchexec/tablegenerator/react-table/src/App.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,36 @@ body {
overflow-x: hidden;
}

// Tooltip styles
.infoTooltip {
visibility: hidden;
width: 250px;
text-align: center;
border-radius: 6px;
padding: 5px;
position: absolute;
z-index: 200;
left: 150%;
top: 50%;
transform: translateY(-50%);
margin-left: 10px;
opacity: 0;
transition: opacity 0.3s;
background-color: #f9f9f9;
color: black;
font-size: 12px;
font-weight: lighter;
}

.infoTooltipContainer {
position: relative;
display: inline-block;
}

.infoTooltipIcon {
cursor: pointer;
}

.App {
// text-align: center;
font-family: "Droid Sans", "Liberation Sans", Ubuntu, "Trebuchet MS", Tahoma,
Expand All @@ -22,6 +52,12 @@ $border-color: rgb(173, 173, 173);
$hover-color: darken(white, 20%);

//------------------common------------------
.footer {
display: flex;
justify-content: center;
align-items: center;
}

.correct {
color: green;
}
Expand Down Expand Up @@ -73,21 +109,11 @@ $hover-color: darken(white, 20%);
.btn-apply {
margin-left: 100px;
background: $key-color;
//background-image: linear-gradient(to right, $key-color, white);
box-shadow: 0 4px 12px 0 rgba($key-color, 0.5);
&:hover {
background: white;
}
}

.selectColumns {
cursor: pointer;
font-weight: 700;
background-color: white;
&:hover {
background-color: $hover-color;
}
}
.header__tool-infos {
font-weight: 700;
}
Expand Down Expand Up @@ -424,13 +450,25 @@ $content-height: calc(100vh - 43px); // height of .menu sums up to 43px

//------------------summary------------------
#summary {
padding-top: 30px;
padding-top: 10px;
text-align: center;

#benchmark_setup {
width: 100%;
overflow-x: scroll;
margin: 40px 0;

.fixedRowTitle {
text-align: left;
display: flex;
align-items: center;
padding-left: 8px;
}

.stickCheckbox {
position: sticky;
top: 0;
left: 0;
width: max-content;
}

table {
border-collapse: collapse;
Expand Down Expand Up @@ -460,12 +498,25 @@ $content-height: calc(100vh - 43px); // height of .menu sums up to 43px
font-weight: bold;
}

th {
background-color: white;

&.sticky {
position: sticky !important;
left: 0;
z-index: 11;
}
}

tr:nth-child(even) {
background-color: mix($hover-color, white, 33%);
th {
background-color: mix($hover-color, white, 33%);
}
}

tr:hover {
background-color: mix($hover-color, white, 66%);
background-color: mix($hover-color, white, 50%);
}

th {
Expand All @@ -476,13 +527,19 @@ $content-height: calc(100vh - 43px); // height of .menu sums up to 43px
}
}
}

#statistics {
border: 0;
padding: 0;
height: 100%;
width: 100%;

#statistics-placeholder {
padding: 1em;
border-top: 1px solid #adadad;
border-bottom: 1px solid #adadad;
background-color: #f7f7f7;
}

#statistics-table > .table {
.table-content {
.td {
Expand Down Expand Up @@ -513,9 +570,9 @@ $content-height: calc(100vh - 43px); // height of .menu sums up to 43px
}

.selectColumns {
display: block;
text-overflow: ellipsis;
overflow: hidden;
border: #555;
}
}
}
Expand All @@ -537,15 +594,15 @@ $content-height: calc(100vh - 43px); // height of .menu sums up to 43px
}

.tr {
border-bottom: 1px solid #adadad;
border-bottom: 1px solid transparent;
}
}
}
}
}

p {
margin-top: 40px;
margin-top: 15px;
}
}

Expand Down
22 changes: 21 additions & 1 deletion benchexec/tablegenerator/react-table/src/components/Overview.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -41,7 +41,7 @@ import deepEqual from "deep-equal";
require("setimmediate"); // provides setImmediate and clearImmediate

const menuItems = [
{ key: "summary", title: "Summary", path: "/" },
{ key: "summary", title: "Setup & Statistics", path: "/" },
{ key: "table", title: "Table", path: "/table" },
{ key: "quantile", title: "Quantile Plot", path: "/quantile" },
{ key: "scatter", title: "Scatter Plot", path: "/scatter" },
Expand Down Expand Up @@ -462,6 +462,26 @@ export default class Overview extends React.Component {
)}
</div>
</div>

{/* Footer */}
{
// Do not display the footer on table and info pages
["table", "info"].includes(this.state.active) ? null : (
<div className="footer">
<p className="footer-content">
Generated by{" "}
<a
className="link"
href="https://github.com/sosy-lab/benchexec"
target="_blank"
rel="noopener noreferrer"
>
BenchExec {this.props.data.version}
</a>
</p>
</div>
)
}
</Router>
);
}
Expand Down
Loading