diff --git a/conformance-search/package-lock.json b/conformance-search/package-lock.json index d541179b..146d4b8d 100644 --- a/conformance-search/package-lock.json +++ b/conformance-search/package-lock.json @@ -22,17 +22,20 @@ "react-router-dom": "^6.15.0", "react-syntax-highlighter": "^15.5.0", "react-use": "^17.4.0", + "react-virtualized-auto-sizer": "^1.0.20", + "react-window": "^1.8.9", "url-join": "^5.0.0" }, "devDependencies": { "@testing-library/jest-dom": "^6.0.1", "@testing-library/react": "^14.0.0", - "@types/jest": "^29.5.3", + "@types/jest": "^29.5.4", "@types/lodash": "^4.14.197", "@types/object-hash": "^3.0.3", - "@types/react": "^18.2.20", + "@types/react": "^18.2.21", "@types/react-dom": "^18.2.7", "@types/react-syntax-highlighter": "^15.5.7", + "@types/react-window": "^1.8.5", "@typescript-eslint/eslint-plugin": "^6.4.1", "@typescript-eslint/parser": "^6.4.1", "@vitejs/plugin-react": "^4.0.4", @@ -2757,9 +2760,9 @@ } }, "node_modules/@types/jest": { - "version": "29.5.3", - "resolved": "https://registry.npmjs.org/@types/jest/-/jest-29.5.3.tgz", - "integrity": "sha512-1Nq7YrO/vJE/FYnqYyw0FS8LdrjExSgIiHyKg7xPpn+yi8Q4huZryKnkJatN1ZRH89Kw2v33/8ZMB7DuZeSLlA==", + "version": "29.5.4", + "resolved": "https://registry.npmjs.org/@types/jest/-/jest-29.5.4.tgz", + "integrity": "sha512-PhglGmhWeD46FYOVLt3X7TiWjzwuVGW9wG/4qocPevXMjCmrIc5b6db9WjeGE4QYVpUAWMDv3v0IiBwObY289A==", "dev": true, "dependencies": { "expect": "^29.0.0", @@ -2844,9 +2847,9 @@ "integrity": "sha512-JCB8C6SnDoQf0cNycqd/35A7MjcnK+ZTqE7judS6o7utxUCg6imJg3QK2qzHKszlTjcj2cn+NwMB2i96ubpj7w==" }, "node_modules/@types/react": { - "version": "18.2.20", - "resolved": "https://registry.npmjs.org/@types/react/-/react-18.2.20.tgz", - "integrity": "sha512-WKNtmsLWJM/3D5mG4U84cysVY31ivmyw85dE84fOCk5Hx78wezB/XEjVPWl2JTZ5FkEeaTJf+VgUAUn3PE7Isw==", + "version": "18.2.21", + "resolved": "https://registry.npmjs.org/@types/react/-/react-18.2.21.tgz", + "integrity": "sha512-neFKG/sBAwGxHgXiIxnbm3/AAVQ/cMRS93hvBpg8xYRbeQSPVABp9U2bRnPf0iI4+Ucdv3plSxKK+3CW2ENJxA==", "dependencies": { "@types/prop-types": "*", "@types/scheduler": "*", @@ -2887,6 +2890,15 @@ "@types/react": "*" } }, + "node_modules/@types/react-window": { + "version": "1.8.5", + "resolved": "https://registry.npmjs.org/@types/react-window/-/react-window-1.8.5.tgz", + "integrity": "sha512-V9q3CvhC9Jk9bWBOysPGaWy/Z0lxYcTXLtLipkt2cnRj1JOSFNF7wqGpkScSXMgBwC+fnVRg/7shwgddBG5ICw==", + "dev": true, + "dependencies": { + "@types/react": "*" + } + }, "node_modules/@types/scheduler": { "version": "0.16.3", "resolved": "https://registry.npmjs.org/@types/scheduler/-/scheduler-0.16.3.tgz", @@ -9473,6 +9485,11 @@ "resolved": "https://registry.npmjs.org/mdn-data/-/mdn-data-2.0.14.tgz", "integrity": "sha512-dn6wd0uw5GsdswPFfsgMp5NSB0/aDe6fK94YJV/AJDYXL6HVLWBsxeq7js7Ad+mU2K9LAlwpk6kN2D5mwCPVow==" }, + "node_modules/memoize-one": { + "version": "5.2.1", + "resolved": "https://registry.npmjs.org/memoize-one/-/memoize-one-5.2.1.tgz", + "integrity": "sha512-zYiwtZUcYyXKo/np96AGZAckk+FWWsUdJ3cHGGmld7+AhvcWmQyGCYUh1hc4Q/pkOhb65dQR/pqCyK0cOaHz4Q==" + }, "node_modules/merge-stream": { "version": "2.0.0", "resolved": "https://registry.npmjs.org/merge-stream/-/merge-stream-2.0.0.tgz", @@ -10623,6 +10640,31 @@ "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.5.3.tgz", "integrity": "sha512-mSxlJJwl3BMEQCUNnxXBU9jP4JBktcEGhURcPR6VQVlnP0FdDEsIaz0C35dXNGLyRfrATNofF0F5p2KPxQgB+w==" }, + "node_modules/react-virtualized-auto-sizer": { + "version": "1.0.20", + "resolved": "https://registry.npmjs.org/react-virtualized-auto-sizer/-/react-virtualized-auto-sizer-1.0.20.tgz", + "integrity": "sha512-OdIyHwj4S4wyhbKHOKM1wLSj/UDXm839Z3Cvfg2a9j+He6yDa6i5p0qQvEiCnyQlGO/HyfSnigQwuxvYalaAXA==", + "peerDependencies": { + "react": "^15.3.0 || ^16.0.0-alpha || ^17.0.0 || ^18.0.0-rc", + "react-dom": "^15.3.0 || ^16.0.0-alpha || ^17.0.0 || ^18.0.0-rc" + } + }, + "node_modules/react-window": { + "version": "1.8.9", + "resolved": "https://registry.npmjs.org/react-window/-/react-window-1.8.9.tgz", + "integrity": "sha512-+Eqx/fj1Aa5WnhRfj9dJg4VYATGwIUP2ItwItiJ6zboKWA6EX3lYDAXfGF2hyNqplEprhbtjbipiADEcwQ823Q==", + "dependencies": { + "@babel/runtime": "^7.0.0", + "memoize-one": ">=3.1.1 <6" + }, + "engines": { + "node": ">8.0.0" + }, + "peerDependencies": { + "react": "^15.0.0 || ^16.0.0 || ^17.0.0 || ^18.0.0", + "react-dom": "^15.0.0 || ^16.0.0 || ^17.0.0 || ^18.0.0" + } + }, "node_modules/read-cache": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/read-cache/-/read-cache-1.0.0.tgz", diff --git a/conformance-search/package.json b/conformance-search/package.json index b55809e8..02daa7ec 100644 --- a/conformance-search/package.json +++ b/conformance-search/package.json @@ -33,6 +33,8 @@ "react-router-dom": "^6.15.0", "react-syntax-highlighter": "^15.5.0", "react-use": "^17.4.0", + "react-virtualized-auto-sizer": "^1.0.20", + "react-window": "^1.8.9", "url-join": "^5.0.0" }, "devDependencies": { @@ -44,6 +46,7 @@ "@types/react": "^18.2.20", "@types/react-dom": "^18.2.7", "@types/react-syntax-highlighter": "^15.5.7", + "@types/react-window": "^1.8.5", "@typescript-eslint/eslint-plugin": "^6.4.1", "@typescript-eslint/parser": "^6.4.1", "@vitejs/plugin-react": "^4.0.4", diff --git a/conformance-search/src/pages/CoveragePage.tsx b/conformance-search/src/pages/CoveragePage.tsx deleted file mode 100644 index a4941c74..00000000 --- a/conformance-search/src/pages/CoveragePage.tsx +++ /dev/null @@ -1,472 +0,0 @@ -import { Slider } from "@mui/material"; -import Fuse from "fuse.js"; -import React, { useEffect, useMemo, useState } from "react"; -import { AiOutlineLoading } from "react-icons/ai"; -import { FaExpandAlt } from "react-icons/fa"; -import { useAsync, useMedia, useThrottle } from "react-use"; -import { Coverage } from "@/types/json"; -import SpecsCovered from "@/components/SpecsCovered"; -import { NavigationBar } from "@/components"; -import { CoverageResults } from "@/types"; - -function HighlightBox({ children }: { children: string }) { - const path = children.split(".").slice(0, -1).join("."); - const last = children.split(".").slice(-1)[0]; - return ( -
- - - {path.includes("*") ? ( - <> - {path.split("*")[0]} - - {path.split("*")[1]} - - ) : ( - path - )} - . - - - {last} - - -
- ); -} - -function CoverageTables({ - coverageStats, - processedCoverageStats, - depth -}: { - coverageStats: Coverage; - processedCoverageStats: Coverage; - depth: number; -}) { - const download = () => { - const dataStr = `data:text/json;charset=utf-8,${encodeURIComponent( - JSON.stringify(coverageStats) - )}`; - const downloadAnchorNode = document.createElement("a"); - downloadAnchorNode.setAttribute("href", dataStr); - downloadAnchorNode.setAttribute("download", `coverage-${BUILD_TIMESTAMP}.json`); - downloadAnchorNode.click(); - downloadAnchorNode.remove(); - }; - - 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
-
- -
- -
- ); -} - -function Tables({ results }: { results: CoverageResults }) { - return ( - <> - {["covered", "not_covered", "under_consideration"].map((type) => { - if (!results) return null; - if (results.boxes[type].length === 0 && results.features[type].length === 0) - return null; - return ( -
- - {type.replace("_", " ")} ( - {results.boxes[type].length + results.features[type].length}) - - {results.boxes[type].length > 0 && ( - <> - - Boxes ({results.boxes[type].length}) - - - - {results.boxes[type].map( - (path: Fuse.FuseResult) => { - return ( - - - - ); - } - )} - -
- {path.item} -
- - )} - {results.features[type].length > 0 && ( - <> - - Features ({results.features[type].length}) - - - - {results.features[type].map( - (feature: Fuse.FuseResult) => { - return ( - - - - ); - } - )} - -
- {feature.item} -
- - )} -
- ); - })} - - ); -} - -export default function CoveragePage() { - const mobile = useMedia("(max-height: 1000px)"); - const [processedCoverageStats, setProcessedCoverageStats] = useState(); - const [search, setSearch] = useState(""); - const throttledSearch = useThrottle(search, 250); - const [depth, setDepth] = useState(3); - const [fuses, setFuses] = useState<{ - boxes: { - covered: Fuse; - not_covered: Fuse; - under_consideration: Fuse; - }; - features: { - covered: Fuse; - not_covered: Fuse; - under_consideration: Fuse; - }; - }>(); - - // Load coverage stats - const { value: coverageStats } = useAsync(async () => { - return (await import("../../data/coverage.json").then( - (module) => module.default - )) as Coverage; - }, []); - - // When coverage stats are loaded or depth value is changed, process them - useEffect(() => { - if (!coverageStats) return undefined; - - // Process paths that they are truncated to the depth specified - const process = (list: string[]) => - list.map((path) => { - const split = path.split("."); - - if (split.length <= depth + 1) return path; - - return split - .slice(1, split.length + 1) - .reverse() - .slice(0, depth) - .concat(["*", "file"]) - .reverse() - .join("."); - }); - - // Deduplicate paths and also remove similar paths - const dedupe = (list: string[]) => { - const set = new Set(); - - // Add all items to set - list.forEach((item) => set.add(item)); - - // Remove items that are similar to other items - list.forEach((item) => { - if (!item.includes("*")) return; - const similar = item.replace(".*", ""); - if (set.has(similar)) set.delete(similar); - }); - - return Array.from(set); - }; - - const cs = structuredClone(coverageStats); - - cs.lists.boxes.covered = dedupe(process(cs.lists.boxes.covered)); - cs.lists.boxes.under_consideration = dedupe(process(cs.lists.boxes.under_consideration)); - cs.lists.boxes.not_covered = dedupe(process(cs.lists.boxes.not_covered)).filter( - (path) => !cs.lists.boxes.covered.includes(path) - ); - - setProcessedCoverageStats(cs); - - // Create Fuse instances - const fuseOptions: Fuse.IFuseOptions = { - threshold: 0.4, - ignoreLocation: true, - ignoreFieldNorm: true, - useExtendedSearch: true - }; - - setFuses({ - boxes: { - covered: new Fuse(cs.lists.boxes.covered, fuseOptions), - not_covered: new Fuse(cs.lists.boxes.not_covered, fuseOptions), - under_consideration: new Fuse(cs.lists.boxes.under_consideration, fuseOptions) - }, - features: { - covered: new Fuse(cs.lists.features.covered, fuseOptions), - not_covered: new Fuse(cs.lists.features.not_covered, fuseOptions), - under_consideration: new Fuse(cs.lists.features.under_consideration, fuseOptions) - } - }); - - return () => { - setFuses(undefined); - setProcessedCoverageStats(undefined); - }; - }, [coverageStats, depth]); - - // Apply current search query to all lists - const results: CoverageResults = useMemo(() => { - if (!fuses || !processedCoverageStats) - return { - boxes: { - covered: [], - not_covered: [], - under_consideration: [] - }, - features: { - covered: [], - not_covered: [], - under_consideration: [] - } - }; - - if (throttledSearch === "") { - const wrapInFuseResult = (arr: string[]) => - arr.map((item) => ({ item, refIndex: 0, score: 0 })); - - return { - boxes: { - covered: wrapInFuseResult(processedCoverageStats.lists.boxes.covered), - not_covered: wrapInFuseResult(processedCoverageStats.lists.boxes.not_covered), - under_consideration: wrapInFuseResult( - processedCoverageStats.lists.boxes.under_consideration - ) - }, - features: { - covered: wrapInFuseResult(processedCoverageStats.lists.features.covered), - not_covered: wrapInFuseResult( - processedCoverageStats.lists.features.not_covered - ), - under_consideration: wrapInFuseResult( - processedCoverageStats.lists.features.under_consideration - ) - } - }; - } - - const boxes = { - covered: fuses.boxes.covered.search(throttledSearch), - not_covered: fuses.boxes.not_covered.search(throttledSearch), - under_consideration: fuses.boxes.under_consideration.search(throttledSearch) - }; - const features = { - covered: fuses.features.covered.search(throttledSearch), - not_covered: fuses.features.not_covered.search(throttledSearch), - under_consideration: fuses.features.under_consideration.search(throttledSearch) - }; - - return { boxes, features }; - }, [fuses, processedCoverageStats, throttledSearch]); - - const maxDepth = useMemo(() => { - let max = 0; - if (!coverageStats) return max; - coverageStats.lists.boxes.covered.forEach((path) => { - const split = path.split("."); - if (split.length > max) max = split.length; - }); - coverageStats.lists.boxes.not_covered.forEach((path) => { - const split = path.split("."); - if (split.length > max) max = split.length; - }); - coverageStats.lists.boxes.under_consideration.forEach((path) => { - const split = path.split("."); - if (split.length > max) max = split.length; - }); - return max; - }, [coverageStats]); - - // If screen is smaller than 1000px, then #root should have height: auto - useEffect(() => { - if (mobile) document.getElementById("root")?.style.setProperty("height", "auto"); - else document.getElementById("root")?.style.setProperty("height", "100vh"); - }, [mobile]); - - // Show a loading indicator if coverage stats are not loaded yet - if (!processedCoverageStats || !coverageStats) - return ( -
- -
- ); - - return ( - <> - -
-
- -
-
- ) => - setSearch((e.target as HTMLInputElement).value) - } - placeholder="Start by typing a feature or box fourcc..." - type="text" - value={search} - /> - - Note: You can use unix-style search - operators. For example, type avcC$ to search - for features/boxes ending in avcC. - -
- Depth Setting - setDepth(value as number)} - step={1} - valueLabelDisplay="auto" - /> -
-
-
- -
-
- - ); -} diff --git a/conformance-search/src/pages/CoveragePage/CoverageHeader.tsx b/conformance-search/src/pages/CoveragePage/CoverageHeader.tsx new file mode 100644 index 00000000..ddf8d80b --- /dev/null +++ b/conformance-search/src/pages/CoveragePage/CoverageHeader.tsx @@ -0,0 +1,131 @@ +import { Coverage } from "@/types/json"; +import SpecsCovered from "@/components/SpecsCovered"; + +export default function CoverageHeader({ + coverageStats, + processedCoverageStats, + depth +}: { + coverageStats: Coverage; + processedCoverageStats: Coverage; + depth: number; +}) { + const download = () => { + const dataStr = `data:text/json;charset=utf-8,${encodeURIComponent( + JSON.stringify(coverageStats) + )}`; + const downloadAnchorNode = document.createElement("a"); + downloadAnchorNode.setAttribute("href", dataStr); + downloadAnchorNode.setAttribute("download", `coverage-${BUILD_TIMESTAMP}.json`); + downloadAnchorNode.click(); + downloadAnchorNode.remove(); + }; + + 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
+
+ +
+ +
+ ); +} diff --git a/conformance-search/src/pages/CoveragePage/CoveragePage.tsx b/conformance-search/src/pages/CoveragePage/CoveragePage.tsx new file mode 100644 index 00000000..dbf9de0a --- /dev/null +++ b/conformance-search/src/pages/CoveragePage/CoveragePage.tsx @@ -0,0 +1,245 @@ +import { Slider } from "@mui/material"; +import Fuse from "fuse.js"; +import React, { useEffect, useMemo, useState } from "react"; +import { AiOutlineLoading } from "react-icons/ai"; +import { useAsync, useThrottle } from "react-use"; +import { Coverage } from "@/types/json"; +import { NavigationBar } from "@/components"; +import { CoverageResults } from "@/types"; +import useMobile from "./useMobile"; +import Tables from "./Tables"; +import CoverageHeader from "./CoverageHeader"; + +export default function CoveragePage() { + const mobile = useMobile(); + const [processedCoverageStats, setProcessedCoverageStats] = useState(); + const [search, setSearch] = useState(""); + const throttledSearch = useThrottle(search, 250); + const [depth, setDepth] = useState(3); + const [fuses, setFuses] = useState<{ + boxes: { + covered: Fuse; + not_covered: Fuse; + under_consideration: Fuse; + }; + features: { + covered: Fuse; + not_covered: Fuse; + under_consideration: Fuse; + }; + }>(); + + // Load coverage stats + const { value: coverageStats } = useAsync(async () => { + return (await import("../../../data/coverage.json").then( + (module) => module.default + )) as Coverage; + }, []); + + // When coverage stats are loaded or depth value is changed, process them + useEffect(() => { + if (!coverageStats) return undefined; + + // Process paths that they are truncated to the depth specified + const process = (list: string[]) => + list.map((path) => { + const split = path.split("."); + + if (split.length <= depth + 1) return path; + + return split + .slice(1, split.length + 1) + .reverse() + .slice(0, depth) + .concat(["*", "file"]) + .reverse() + .join("."); + }); + + // Deduplicate paths and also remove similar paths + const dedupe = (list: string[]) => { + const set = new Set(); + + // Add all items to set + list.forEach((item) => set.add(item)); + + // Remove items that are similar to other items + list.forEach((item) => { + if (!item.includes("*")) return; + const similar = item.replace(".*", ""); + if (set.has(similar)) set.delete(similar); + }); + + return Array.from(set); + }; + + const cs = structuredClone(coverageStats); + + cs.lists.boxes.covered = dedupe(process(cs.lists.boxes.covered)); + cs.lists.boxes.under_consideration = dedupe(process(cs.lists.boxes.under_consideration)); + cs.lists.boxes.not_covered = dedupe(process(cs.lists.boxes.not_covered)).filter( + (path) => !cs.lists.boxes.covered.includes(path) + ); + + setProcessedCoverageStats(cs); + + // Create Fuse instances + const fuseOptions: Fuse.IFuseOptions = { + threshold: 0.4, + ignoreLocation: true, + ignoreFieldNorm: true, + useExtendedSearch: true + }; + + setFuses({ + boxes: { + covered: new Fuse(cs.lists.boxes.covered, fuseOptions), + not_covered: new Fuse(cs.lists.boxes.not_covered, fuseOptions), + under_consideration: new Fuse(cs.lists.boxes.under_consideration, fuseOptions) + }, + features: { + covered: new Fuse(cs.lists.features.covered, fuseOptions), + not_covered: new Fuse(cs.lists.features.not_covered, fuseOptions), + under_consideration: new Fuse(cs.lists.features.under_consideration, fuseOptions) + } + }); + + return () => { + setFuses(undefined); + setProcessedCoverageStats(undefined); + }; + }, [coverageStats, depth]); + + // Apply current search query to all lists + const results: CoverageResults = useMemo(() => { + if (!fuses || !processedCoverageStats) + return { + boxes: { + covered: [], + not_covered: [], + under_consideration: [] + }, + features: { + covered: [], + not_covered: [], + under_consideration: [] + } + }; + + if (throttledSearch === "") { + const wrapInFuseResult = (arr: string[]) => + arr.map((item) => ({ item, refIndex: 0, score: 0 })); + + return { + boxes: { + covered: wrapInFuseResult(processedCoverageStats.lists.boxes.covered), + not_covered: wrapInFuseResult(processedCoverageStats.lists.boxes.not_covered), + under_consideration: wrapInFuseResult( + processedCoverageStats.lists.boxes.under_consideration + ) + }, + features: { + covered: wrapInFuseResult(processedCoverageStats.lists.features.covered), + not_covered: wrapInFuseResult( + processedCoverageStats.lists.features.not_covered + ), + under_consideration: wrapInFuseResult( + processedCoverageStats.lists.features.under_consideration + ) + } + }; + } + + const boxes = { + covered: fuses.boxes.covered.search(throttledSearch), + not_covered: fuses.boxes.not_covered.search(throttledSearch), + under_consideration: fuses.boxes.under_consideration.search(throttledSearch) + }; + const features = { + covered: fuses.features.covered.search(throttledSearch), + not_covered: fuses.features.not_covered.search(throttledSearch), + under_consideration: fuses.features.under_consideration.search(throttledSearch) + }; + + return { boxes, features }; + }, [fuses, processedCoverageStats, throttledSearch]); + + const maxDepth = useMemo(() => { + let max = 0; + if (!coverageStats) return max; + coverageStats.lists.boxes.covered.forEach((path) => { + const split = path.split("."); + if (split.length > max) max = split.length; + }); + coverageStats.lists.boxes.not_covered.forEach((path) => { + const split = path.split("."); + if (split.length > max) max = split.length; + }); + coverageStats.lists.boxes.under_consideration.forEach((path) => { + const split = path.split("."); + if (split.length > max) max = split.length; + }); + return max; + }, [coverageStats]); + + // If screen is smaller than 1000px, then #root should have height: auto + useEffect(() => { + if (mobile) document.getElementById("root")?.style.setProperty("height", "auto"); + else document.getElementById("root")?.style.setProperty("height", "100vh"); + }, [mobile]); + + // Show a loading indicator if coverage stats are not loaded yet + if (!processedCoverageStats || !coverageStats) + return ( +
+ +
+ ); + + return ( + <> + +
+
+ +
+
+ ) => + setSearch((e.target as HTMLInputElement).value) + } + placeholder="Start by typing a feature or box fourcc..." + type="text" + value={search} + /> + + Note: You can use unix-style search + operators. For example, type avcC$ to search + for features/boxes ending in avcC. + +
+ Depth Setting + setDepth(value as number)} + step={1} + valueLabelDisplay="auto" + /> +
+
+
+ +
+
+ + ); +} diff --git a/conformance-search/src/pages/CoveragePage/HighlightBox.tsx b/conformance-search/src/pages/CoveragePage/HighlightBox.tsx new file mode 100644 index 00000000..433c3022 --- /dev/null +++ b/conformance-search/src/pages/CoveragePage/HighlightBox.tsx @@ -0,0 +1,30 @@ +import { FaExpandAlt } from "react-icons/fa"; + +export default function HighlightBox({ children }: { children: string }) { + const path = children.split(".").slice(0, -1).join("."); + const last = children.split(".").slice(-1)[0]; + return ( +
+ + + {path.includes("*") ? ( + <> + {path.split("*")[0]} + + {path.split("*")[1]} + + ) : ( + path + )} + . + + + {last} + + +
+ ); +} diff --git a/conformance-search/src/pages/CoveragePage/Tables.tsx b/conformance-search/src/pages/CoveragePage/Tables.tsx new file mode 100644 index 00000000..b93b127b --- /dev/null +++ b/conformance-search/src/pages/CoveragePage/Tables.tsx @@ -0,0 +1,163 @@ +import Fuse from "fuse.js"; +import React from "react"; +import AutoSizer from "react-virtualized-auto-sizer"; +import { FixedSizeList as List } from "react-window"; +import { CoverageResults } from "@/types"; +import useMobile from "./useMobile"; +import HighlightBox from "./HighlightBox"; + +function BoxRow({ + data, + index, + style +}: { + data: Fuse.FuseResult[]; + index: number; + style: React.CSSProperties; +}) { + const { item } = data[index]; + return ( +
  • + + {item} + +
    • + ); +} + +function FeatureRow({ + data, + index, + style +}: { + data: Fuse.FuseResult[]; + index: number; + style: React.CSSProperties; +}) { + const { item } = data[index]; + return ( +
  • + + {item} + +
    • + ); +} + +export default function Tables({ results }: { results: CoverageResults }) { + const mobile = useMobile(); + return ( + <> + {["covered", "not_covered", "under_consideration"].map((type) => { + if (!results) return null; + if (results.boxes[type].length === 0 && results.features[type].length === 0) + return null; + return ( +
    + + {type.replace("_", " ")} ( + {results.boxes[type].length + results.features[type].length}) + + {results.boxes[type].length > 0 && ( +
    + + Boxes ({results.boxes[type].length}) + +
      + {/** Redundant conditional because of typings */} + {mobile ? ( + + {({ width }) => { + return ( + + {BoxRow} + + ); + }} + + ) : ( + + {({ height, width }) => { + return ( + + {BoxRow} + + ); + }} + + )} +
    +
    + )} + {results.features[type].length > 0 && ( +
    + + Features ({results.features[type].length}) + +
      + {/** Redundant conditional because of typings */} + {mobile ? ( + + {({ width }) => { + return ( + + {FeatureRow} + + ); + }} + + ) : ( + + {({ height, width }) => { + return ( + + {FeatureRow} + + ); + }} + + )} +
    +
    + )} +
    + ); + })} + + ); +} diff --git a/conformance-search/src/pages/CoveragePage/index.ts b/conformance-search/src/pages/CoveragePage/index.ts new file mode 100644 index 00000000..cb511336 --- /dev/null +++ b/conformance-search/src/pages/CoveragePage/index.ts @@ -0,0 +1,3 @@ +import CoveragePage from "./CoveragePage"; + +export default CoveragePage; diff --git a/conformance-search/src/pages/CoveragePage/useMobile.tsx b/conformance-search/src/pages/CoveragePage/useMobile.tsx new file mode 100644 index 00000000..3f3c475f --- /dev/null +++ b/conformance-search/src/pages/CoveragePage/useMobile.tsx @@ -0,0 +1,9 @@ +import { useMedia } from "react-use"; + +export default function useMobile() { + const oneColumnH = useMedia("(max-height: 1500px)"); + const twoColumnH = useMedia("(max-height: 1100px)"); + const twoColumnW = useMedia("(max-width: 1024px)"); + const mobile = twoColumnW ? oneColumnH : twoColumnH; + return mobile; +}