From 33c488e9d0d15dc0c8fe2ae7235dbd24103c63a2 Mon Sep 17 00:00:00 2001 From: Kevin Ness Date: Tue, 16 Apr 2024 20:06:47 -0400 Subject: [PATCH 1/5] Add sort option and misc adjustments --- .../SuiteDataContainer/styles.module.css | 3 +- .../components/SuiteDisplay/index.tsx | 2 +- .../components/SuiteSelector/index.tsx | 14 ++++- .../conformance/ResultsDisplay/index.tsx | 23 +++++++- .../conformance/ResultsDisplay/nav.tsx | 53 +++++++++++++++++-- .../ResultsDisplay/styles.module.css | 14 ++--- src/components/conformance/types.ts | 19 +++++-- src/components/conformance/utils.ts | 17 ++++++ 8 files changed, 124 insertions(+), 21 deletions(-) diff --git a/src/components/conformance/ResultsDisplay/components/SuiteDataContainer/styles.module.css b/src/components/conformance/ResultsDisplay/components/SuiteDataContainer/styles.module.css index 12488cfd..329ff50b 100644 --- a/src/components/conformance/ResultsDisplay/components/SuiteDataContainer/styles.module.css +++ b/src/components/conformance/ResultsDisplay/components/SuiteDataContainer/styles.module.css @@ -2,7 +2,8 @@ display: flex; flex-direction: column; width: 85%; - height: 70vh; + height: 75vh; + padding: 0.5rem; } @media screen and (max-width: 996px) { diff --git a/src/components/conformance/ResultsDisplay/components/SuiteDisplay/index.tsx b/src/components/conformance/ResultsDisplay/components/SuiteDisplay/index.tsx index 141614af..4e8997fb 100644 --- a/src/components/conformance/ResultsDisplay/components/SuiteDisplay/index.tsx +++ b/src/components/conformance/ResultsDisplay/components/SuiteDisplay/index.tsx @@ -21,8 +21,8 @@ export default function SuiteDisplay(props: SuiteDisplayProps): JSX.Element {
{props.currentSuite.suites ? ( ) : null} diff --git a/src/components/conformance/ResultsDisplay/components/SuiteSelector/index.tsx b/src/components/conformance/ResultsDisplay/components/SuiteSelector/index.tsx index b3a44f28..8124c4d6 100644 --- a/src/components/conformance/ResultsDisplay/components/SuiteSelector/index.tsx +++ b/src/components/conformance/ResultsDisplay/components/SuiteSelector/index.tsx @@ -1,19 +1,29 @@ import React from "react"; -import { SuiteResult, TestStats } from "@site/src/components/conformance/types"; +import { + ConformanceState, + SortOption, + SuiteResult, + TestStats, +} from "@site/src/components/conformance/types"; import styles from "./styles.module.css"; +import { availableSortingOptions } from "../../../utils"; type SelectorProps = { + state: ConformanceState; suites: SuiteResult[]; esFlag: string | null; navigateToSuite: (string) => void; }; export default function SuiteSelector(props: SelectorProps): JSX.Element { + const option: SortOption[] = availableSortingOptions.filter( + (v) => v.id === props.state.sortOption, + ); return (
{props.suites - .sort((a, b) => a.name.localeCompare(b.name)) + .sort(option[0].callback) .filter((suite) => { const stats: TestStats = suite.versionedStats[props.esFlag] ?? suite.stats; diff --git a/src/components/conformance/ResultsDisplay/index.tsx b/src/components/conformance/ResultsDisplay/index.tsx index 45a3b1e2..2f94e341 100644 --- a/src/components/conformance/ResultsDisplay/index.tsx +++ b/src/components/conformance/ResultsDisplay/index.tsx @@ -5,6 +5,7 @@ import { VersionItem, SuiteResult, ConformanceState, + SortOption, } from "@site/src/components/conformance/types"; import ResultNavigation from "./nav"; import { @@ -113,7 +114,25 @@ export default function ResultsDisplay(props: ResultsProps): JSX.Element { const nulledFlag = flag ? flag : undefined; history.push({ pathname: "/conformance", - state: createState(props.state.version, props.state.testPath, nulledFlag), + state: createState( + props.state.version, + props.state.testPath, + nulledFlag, + props.state.sortOption, + ), + }); + }; + + // Sets the sorting option + const setSortOption = (option: string) => { + history.push({ + pathname: "/conformance", + state: createState( + props.state.version, + props.state.testPath, + props.state.ecmaScriptVersion, + option, + ), }); }; @@ -125,6 +144,7 @@ export default function ResultsDisplay(props: ResultsProps): JSX.Element { props.state.version, props.state.testPath, props.state.ecmaScriptVersion, + props.state.sortOption, test, ), }); @@ -146,6 +166,7 @@ export default function ResultsDisplay(props: ResultsProps): JSX.Element { state={props.state} sliceNavToIndex={sliceNavToIndex} setEcmaScriptFlag={setEcmaScriptFlag} + setSortOption={setSortOption} /> {currentSuite ? ( void; setEcmaScriptFlag: (string) => void; + setSortOption: (string) => void; }; export default function ResultNavigation(props: ResultsNavProps): JSX.Element { @@ -17,6 +19,10 @@ export default function ResultNavigation(props: ResultsNavProps): JSX.Element { setEcmaScriptFlag={props.setEcmaScriptFlag} esVersionValue={props.state.ecmaScriptVersion} /> + +
+ ); +} diff --git a/src/components/conformance/ResultsDisplay/styles.module.css b/src/components/conformance/ResultsDisplay/styles.module.css index 1736bdd5..c5542aea 100644 --- a/src/components/conformance/ResultsDisplay/styles.module.css +++ b/src/components/conformance/ResultsDisplay/styles.module.css @@ -10,7 +10,7 @@ .resultsNav { display: flex; flex-direction: row; - height: 5vh; + height: 3.5rem; width: 100%; padding: 0.75em; } @@ -20,8 +20,11 @@ } .dropdownContainer { - width: 6em; - padding: 0.25em; + display: flex; + flex-direction: row; + width: 12rem; + height: 2.5rem; + padding: 0.5rem 0; } @media screen and (max-height: 996px) { @@ -32,9 +35,8 @@ } .resultsNav { - min-height: 3.5rem; - height: auto; + height: 3.5rem; width: 100vw; - padding: 1rem auto; + padding: 0.75rem auto; } } diff --git a/src/components/conformance/types.ts b/src/components/conformance/types.ts index fa710783..dc10fbf9 100644 --- a/src/components/conformance/types.ts +++ b/src/components/conformance/types.ts @@ -6,6 +6,7 @@ export type ConformanceState = { version: VersionItem; testPath: string[]; ecmaScriptVersion: string | undefined; + sortOption: string; selectedTest: string | undefined; }; @@ -14,13 +15,14 @@ export type VersionItem = { fetchUrl: string; }; -export type TestStats = { - total: number; - passed: number; - ignored: number; - panic: number; +export type SortOption = { + id: string; + name: string; + callback: (a: SuiteResult, b: SuiteResult) => number; }; +// The below types are specific to test result types. + export type ResultInfo = { version: string; commit: string; @@ -49,6 +51,13 @@ export type VersionedStats = { es13: TestStats; }; +export type TestStats = { + total: number; + passed: number; + ignored: number; + panic: number; +}; + export type TestResult = { name: string; edition: SpecEdition; diff --git a/src/components/conformance/utils.ts b/src/components/conformance/utils.ts index 2c106e15..66ee714a 100644 --- a/src/components/conformance/utils.ts +++ b/src/components/conformance/utils.ts @@ -1,6 +1,7 @@ import { ConformanceState, ResultInfo, + SortOption, SpecEdition, SuiteResult, TestOutcome, @@ -15,17 +16,33 @@ export function createState( version: VersionItem, testPath?: string[], ecmaScriptVersion?: string, + sortOption?: string, selectedTest?: string, ): ConformanceState { testPath = testPath ? testPath : [version.tagName]; + sortOption = sortOption ? sortOption : availableSortingOptions[0].id; return { version, testPath, ecmaScriptVersion, + sortOption, selectedTest, }; } +export const availableSortingOptions: SortOption[] = [ + { + id: "alpha", + name: "Alphabetical", + callback: (a, b) => a.name.localeCompare(b.name), + }, + { + id: "reverse", + name: "Reverse Alpha", + callback: (a, b) => -a.name.localeCompare(b.name), + }, +]; + // Interface for the http response of boa_tester's `ResultInfo` interface HttpResultInfo { c: string; From 3cb595fc33f537f2890268ac13fc77b400f12f73 Mon Sep 17 00:00:00 2001 From: Kevin Ness Date: Mon, 22 Apr 2024 20:27:53 -0400 Subject: [PATCH 2/5] Fix mobile responsiveness on nav --- .../conformance/ResultsDisplay/nav.tsx | 28 +++++++++++-------- .../ResultsDisplay/styles.module.css | 24 ++++++++++++++-- 2 files changed, 37 insertions(+), 15 deletions(-) diff --git a/src/components/conformance/ResultsDisplay/nav.tsx b/src/components/conformance/ResultsDisplay/nav.tsx index 1d3b61da..375a85e8 100644 --- a/src/components/conformance/ResultsDisplay/nav.tsx +++ b/src/components/conformance/ResultsDisplay/nav.tsx @@ -15,18 +15,22 @@ type ResultsNavProps = { export default function ResultNavigation(props: ResultsNavProps): JSX.Element { return (
- - - +
+ + +
+
+ +
); } diff --git a/src/components/conformance/ResultsDisplay/styles.module.css b/src/components/conformance/ResultsDisplay/styles.module.css index c5542aea..9c1fa7cf 100644 --- a/src/components/conformance/ResultsDisplay/styles.module.css +++ b/src/components/conformance/ResultsDisplay/styles.module.css @@ -15,6 +15,11 @@ padding: 0.75em; } +.navSection { + display: flex; + flex-direction: row; +} + .navLink:hover { cursor: pointer; } @@ -27,16 +32,29 @@ padding: 0.5rem 0; } -@media screen and (max-height: 996px) { +@media screen and (max-width: 996px) { .resultsDisplay { height: auto; width: calc(100vw-12px); overflow-y: auto; } + .navSection { + min-height: 2.5rem; + height: auto; + width: 100vw; + } + .resultsNav { - height: 3.5rem; + height: auto; + flex-direction: column; width: 100vw; - padding: 0.75rem auto; + padding: 0; + } + + .dropdownContainer { + padding: 0.25rem 0; + width: 10.5rem; + height: 2rem; } } From 2f1b6944b5ad01f7db92a27e9da2d283f2c5ef85 Mon Sep 17 00:00:00 2001 From: Kevin Ness Date: Tue, 23 Apr 2024 19:32:15 -0400 Subject: [PATCH 3/5] Rebase + add sort options --- .../components/SuiteSelector/index.tsx | 5 +- src/components/conformance/utils.ts | 73 +++++++++++++++++++ 2 files changed, 75 insertions(+), 3 deletions(-) diff --git a/src/components/conformance/ResultsDisplay/components/SuiteSelector/index.tsx b/src/components/conformance/ResultsDisplay/components/SuiteSelector/index.tsx index 8124c4d6..69ce5417 100644 --- a/src/components/conformance/ResultsDisplay/components/SuiteSelector/index.tsx +++ b/src/components/conformance/ResultsDisplay/components/SuiteSelector/index.tsx @@ -12,7 +12,6 @@ import { availableSortingOptions } from "../../../utils"; type SelectorProps = { state: ConformanceState; suites: SuiteResult[]; - esFlag: string | null; navigateToSuite: (string) => void; }; @@ -26,7 +25,7 @@ export default function SuiteSelector(props: SelectorProps): JSX.Element { .sort(option[0].callback) .filter((suite) => { const stats: TestStats = - suite.versionedStats[props.esFlag] ?? suite.stats; + suite.versionedStats[props.state.ecmaScriptVersion] ?? suite.stats; return stats.total !== 0; }) .map((suite) => { @@ -34,7 +33,7 @@ export default function SuiteSelector(props: SelectorProps): JSX.Element { ); diff --git a/src/components/conformance/utils.ts b/src/components/conformance/utils.ts index 66ee714a..e5eb24c0 100644 --- a/src/components/conformance/utils.ts +++ b/src/components/conformance/utils.ts @@ -41,6 +41,79 @@ export const availableSortingOptions: SortOption[] = [ name: "Reverse Alpha", callback: (a, b) => -a.name.localeCompare(b.name), }, + { + id: "most-passed", + name: "Most Passed", + callback: (a, b) => b.stats.passed - a.stats.passed, + }, + { + id: "least-passed", + name: "Least Passed", + callback: (a, b) => a.stats.passed - b.stats.passed, + }, + { + id: "most-pass-percentage", + name: "Most Passed (%)", + callback: (a, b) => + b.stats.total - + a.stats.total + + b.stats.passed / b.stats.total - + a.stats.passed / a.stats.total, + }, + { + id: "least-pass-percentage", + name: "Least Passed (%)", + callback: (a, b) => + b.stats.total - + a.stats.total + + a.stats.passed / a.stats.total - + b.stats.passed / b.stats.total, + }, + { + id: "most-ignored", + name: "Most Ignored", + callback: (a, b) => b.stats.ignored - a.stats.ignored, + }, + { + id: "least-ignored", + name: "Least Ignored", + callback: (a, b) => a.stats.passed - b.stats.passed, + }, + { + id: "most-fail", + name: "Most Failed", + callback: (a, b) => + b.stats.total - + (b.stats.passed + b.stats.ignored) - + (a.stats.total - (a.stats.passed + a.stats.ignored)), + }, + { + id: "least-fail", + name: "Least Failed", + callback: (a, b) => + a.stats.total - + (a.stats.passed + a.stats.ignored) - + (b.stats.total - (b.stats.passed + b.stats.ignored)), + }, + { + id: "most-fail-percentage", + name: "Most Failed (%)", + callback: (a, b) => + b.stats.total - + a.stats.total + + (b.stats.total - (b.stats.passed + b.stats.ignored)) - + (a.stats.total - (a.stats.passed + a.stats.ignored)), + }, + { + id: "least-fail-percentage", + name: "Least Failed (%)", + callback: (a, b) => + b.stats.total - + a.stats.total + + (a.stats.total - b.stats.total) + + a.stats.passed / a.stats.total - + b.stats.passed / b.stats.total, + }, ]; // Interface for the http response of boa_tester's `ResultInfo` From 57f2b862f680893d8cb28d196cf57a78f3c4fdf5 Mon Sep 17 00:00:00 2001 From: nekevss Date: Wed, 24 Apr 2024 09:37:27 -0400 Subject: [PATCH 4/5] Fix least ignored tests --- src/components/conformance/utils.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/conformance/utils.ts b/src/components/conformance/utils.ts index e5eb24c0..0b5e23c2 100644 --- a/src/components/conformance/utils.ts +++ b/src/components/conformance/utils.ts @@ -77,7 +77,7 @@ export const availableSortingOptions: SortOption[] = [ { id: "least-ignored", name: "Least Ignored", - callback: (a, b) => a.stats.passed - b.stats.passed, + callback: (a, b) => a.stats.ignored - b.stats.ignored, }, { id: "most-fail", From 9b725e76eed67dfcf9dd19cfcd2b8570d911b4a0 Mon Sep 17 00:00:00 2001 From: nekevss Date: Wed, 24 Apr 2024 09:45:23 -0400 Subject: [PATCH 5/5] Fix: persist sortOption in setter methods --- src/components/conformance/ResultsDisplay/index.tsx | 2 ++ src/components/conformance/ResultsDisplay/nav.tsx | 2 +- 2 files changed, 3 insertions(+), 1 deletion(-) diff --git a/src/components/conformance/ResultsDisplay/index.tsx b/src/components/conformance/ResultsDisplay/index.tsx index 2f94e341..b8c9ebe9 100644 --- a/src/components/conformance/ResultsDisplay/index.tsx +++ b/src/components/conformance/ResultsDisplay/index.tsx @@ -90,6 +90,7 @@ export default function ResultsDisplay(props: ResultsProps): JSX.Element { props.state.version, newPath, props.state.ecmaScriptVersion, + props.state.sortOption, ), }); }; @@ -105,6 +106,7 @@ export default function ResultsDisplay(props: ResultsProps): JSX.Element { props.state.version, slicedPath, props.state.ecmaScriptVersion, + props.state.sortOption, ), }); }; diff --git a/src/components/conformance/ResultsDisplay/nav.tsx b/src/components/conformance/ResultsDisplay/nav.tsx index 375a85e8..79d0923e 100644 --- a/src/components/conformance/ResultsDisplay/nav.tsx +++ b/src/components/conformance/ResultsDisplay/nav.tsx @@ -132,7 +132,7 @@ type SortProps = { }; function SortingDropdown(props: SortProps): JSX.Element { - const [sortValue, setSortValue] = React.useState(); + const [sortValue, setSortValue] = React.useState(props.sortValue ? props.sortValue : "alpha"); React.useEffect(() => { setSortValue(props.sortValue);