From 7452bfd34670fc24fdf5a9c058cbbc958c1ec958 Mon Sep 17 00:00:00 2001 From: Deniz Ugur Date: Thu, 31 Aug 2023 14:33:58 -0700 Subject: [PATCH] cleaner coverage page header --- .../src/components/SpecsCovered.tsx | 2 +- conformance-search/src/index.css | 25 +- .../src/pages/CoveragePage/CoverageHeader.tsx | 223 ++++++++++-------- .../src/pages/CoveragePage/CoveragePage.tsx | 21 +- 4 files changed, 142 insertions(+), 129 deletions(-) diff --git a/conformance-search/src/components/SpecsCovered.tsx b/conformance-search/src/components/SpecsCovered.tsx index e0f28b9..4e0ace4 100644 --- a/conformance-search/src/components/SpecsCovered.tsx +++ b/conformance-search/src/components/SpecsCovered.tsx @@ -22,7 +22,7 @@ export default function SpecsCovered({ key={info.ISO} className={clsx( "group flex items-center justify-between gap-2 truncate px-3 py-2 font-light hover:bg-gray-100", - compact && "!py-1 text-sm font-normal" + compact && "text-sm font-normal" )} href={info.link} rel="noreferrer" diff --git a/conformance-search/src/index.css b/conformance-search/src/index.css index d260667..3549111 100644 --- a/conformance-search/src/index.css +++ b/conformance-search/src/index.css @@ -14,26 +14,23 @@ code.basic { @apply rounded bg-gray-300 px-1 font-mono text-black; } -table { - @apply border-1 border-black bg-neutral-100; +progress[value] { + /* Reset the default appearance */ + appearance: none; } -thead { - @apply bg-black text-white; +progress[value]::-webkit-progress-bar { + @apply bg-gray-300; } -tbody th { - @apply border-b-2 border-black px-2 text-center; +progress[value].low::-webkit-progress-value { + @apply bg-red-600; } -tbody tr { - @apply border-b-1 border-black bg-white text-center last:border-0; +progress[value].med::-webkit-progress-value { + @apply bg-yellow-600; } -tbody td { - @apply px-2; -} - -input[type="number"]::-webkit-inner-spin-button { - opacity: 1; +progress[value].high::-webkit-progress-value { + @apply bg-green-600; } diff --git a/conformance-search/src/pages/CoveragePage/CoverageHeader.tsx b/conformance-search/src/pages/CoveragePage/CoverageHeader.tsx index ddf8d80..679b49b 100644 --- a/conformance-search/src/pages/CoveragePage/CoverageHeader.tsx +++ b/conformance-search/src/pages/CoveragePage/CoverageHeader.tsx @@ -1,5 +1,76 @@ import { Coverage } from "@/types/json"; import SpecsCovered from "@/components/SpecsCovered"; +import clsx from "clsx"; +import { Button, Modal, Tooltip } from "@mui/material"; +import { AiOutlineInfoCircle } from "react-icons/ai"; +import { useState } from "react"; +import { MdClose } from "react-icons/md"; + +function StatisticDisplay({ + label, + alt, + info, + value, + total, + excluded = 0 +}: { + label: string; + alt: string; + info?: string; + value: number; + total: number; + excluded?: number; +}) { + const [open, setOpen] = useState(false); + const adjustedTotal = total - excluded; + let level = "low"; + if (value / total >= 0.75) { + level = "high"; + } else if (value / total >= 0.25) { + level = "med"; + } + + return ( +
+
+ {label} + {info && ( + setOpen(false)} + onOpen={() => setOpen(true)} + open={open} + placement="top" + title={info} + > + + + )} +
+
+ + + {((value / adjustedTotal) * 100).toFixed(0)}% + +
+ + {value} of {adjustedTotal} {alt} {alt.includes("file") ? "published" : "covered"} + + {excluded > 0 && ( + + {excluded} {alt} are under consideration (excluded) + + )} +
+ ); +} + +StatisticDisplay.defaultProps = { + excluded: 0, + info: "" +}; export default function CoverageHeader({ coverageStats, @@ -10,6 +81,7 @@ export default function CoverageHeader({ processedCoverageStats: Coverage; depth: number; }) { + const [open, setOpen] = useState(false); const download = () => { const dataStr = `data:text/json;charset=utf-8,${encodeURIComponent( JSON.stringify(coverageStats) @@ -21,111 +93,58 @@ export default function CoverageHeader({ downloadAnchorNode.remove(); }; + const sumValues = (obj: Record) => { + return Object.values(obj).reduce((acc, val) => acc + val.length, 0); + }; + return ( -
- - - - - - - - - - - - - - - - - - - - - - - - -
File Statistics
CountAttribute
{coverageStats.files.count}Files submitted
{coverageStats.files.published_count}Published
{coverageStats.files.under_consideration_count}Under consideration
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Boxes
CountAttribute
{processedCoverageStats.path_file_map.count}All possible box locations
- {( - (processedCoverageStats.lists.boxes.covered.length / - (processedCoverageStats.lists.boxes.not_covered.length + - processedCoverageStats.lists.boxes.covered.length)) * - 100 - ).toFixed(2)} - % - Coverage percentage (depth={depth})
{processedCoverageStats.path_file_map.non_empty}Unique box locations in files
{processedCoverageStats.path_file_map.published.count}Published
{processedCoverageStats.path_file_map.under_consideration.count}Under consideration
- - - - - - - - - - - - - - - - - - - - - - - - -
User Defined Features
CountAttribute
{processedCoverageStats.feature_file_map.count}Total number of features
{processedCoverageStats.feature_file_map.published_features}Published
- {processedCoverageStats.feature_file_map.under_consideration_features} - Under consideration
-
- +
+
+ + +
- + setOpen(false)} + open={open} > - Download Coverage Report - +
+
+

More Information

+ +
+
+ +
+ +
+
); } diff --git a/conformance-search/src/pages/CoveragePage/CoveragePage.tsx b/conformance-search/src/pages/CoveragePage/CoveragePage.tsx index 4698784..93b5c1b 100644 --- a/conformance-search/src/pages/CoveragePage/CoveragePage.tsx +++ b/conformance-search/src/pages/CoveragePage/CoveragePage.tsx @@ -199,21 +199,19 @@ export default function CoveragePage() { <>
-
- -
+
) => setSearch((e.target as HTMLInputElement).value) } placeholder="Start by typing a feature or box fourcc..." - type="text" + type="search" value={search} /> @@ -222,11 +220,10 @@ export default function CoveragePage() { for features/boxes ending in avcC.
- Depth Setting + Depth Setting setDepth(value as number)}