Skip to content

Commit a6d95c7

Browse files
DevanitiDevaniti
committed
Improved adapter search UX
1 parent 2324436 commit a6d95c7

18 files changed

+108
-25
lines changed

‎source/GUI/html/default.js

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎source/frontend/assets/css/main.css

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,10 @@
88
src: url(../fonts/Roboto-Regular.ttf);
99
}
1010

11+
html {
12+
scroll-behavior: smooth;
13+
}
14+
1115
body {
1216
color: #000000;
1317
background-color: #FFFFFF;

‎source/frontend/assets/html_website/index.html

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,8 @@
66
<title>D3d12infoDB</title>
77

88
<%- include('../favicon/favicon_header.html') %>
9+
<link rel="search" type="application/opensearchdescription+xml" title="D3d12infoDB" href="opensearch.xml" />
10+
911
</head>
1012

1113
<body>

‎source/frontend/assets/js/website_report_viewer.mjs

Lines changed: 65 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@ import Globals from './globals.mjs'
77
let ShowAdapterSearch = true
88
let IsComparison = false
99
let Reports = []
10-
let ReportIndex = 0
10+
let ReportIndex = null
1111

1212
let ComparisonShowEqual = true
1313
let ComparisonShowOneSided = false
@@ -23,6 +23,37 @@ let AdaptersSearchString = ""
2323
let AdaptersFilters = []
2424
let FilteredReports = []
2525

26+
let PropertiesSearchBarContainer = null
27+
28+
function ShouldPropertySearchBarBeVisible()
29+
{
30+
return IsComparison || ReportIndex != null
31+
}
32+
33+
function DeselectReport() {
34+
ReportIndex = null
35+
PropertiesSearchBarContainer.style.visibility = "hidden"
36+
UpdateReport()
37+
const url = new URL(window.location.href);
38+
url.searchParams.delete('ID');
39+
window.history.replaceState({}, '', url.toString());
40+
document.title = "D3d12infoDB";
41+
}
42+
43+
function SelectReport(newReportIndex)
44+
{
45+
ReportIndex = newReportIndex
46+
PropertiesSearchBarContainer.style.visibility = "visible"
47+
UpdateReport()
48+
const url = new URL(window.location.href);
49+
url.searchParams.set('ID', Reports[ReportIndex].GetField("ID"));
50+
window.history.replaceState({}, '', url.toString());
51+
document.title = Reports[ReportIndex].GetField("DXGI_ADAPTER_DESC3.Description") + " - D3d12infoDB";
52+
53+
// Scroll down to the report
54+
PropertiesSearchBarContainer.scrollIntoView();
55+
}
56+
2657
function FilterSingleReport(wrappedReport) {
2758
let report = wrappedReport.value
2859
let adaptersSearchString = AdaptersSearchString.toLowerCase()
@@ -84,13 +115,26 @@ function UpdateSearchBarAdapters() {
84115
HTML.ClearElement(searchBarContainer)
85116

86117
const searchBar = document.createElement("input")
118+
// Set initial value from URL
119+
const queryParams = (new URL(document.location)).searchParams
120+
AdaptersSearchString = queryParams.get('q') || ""
121+
searchBar.value = AdaptersSearchString
87122
searchBar.type = "search"
88123
searchBar.placeholder = "Search Adapters"
89124
searchBar.classList.add("searchBar")
90125
searchBar.addEventListener('input', function (e) {
91126
AdaptersSearchString = searchBar.value
92127
PrepareReports()
93128
UpdateList()
129+
DeselectReport()
130+
131+
const url = new URL(window.location.href);
132+
if (AdaptersSearchString) {
133+
url.searchParams.set('q', AdaptersSearchString);
134+
} else {
135+
url.searchParams.delete('q');
136+
}
137+
window.history.replaceState({}, '', url.toString());
94138
})
95139
searchBarContainer.appendChild(searchBar)
96140
}
@@ -233,9 +277,10 @@ function UpdateComparisonPropertyFilter() {
233277
}
234278

235279
function UpdateSearchBarProperties() {
236-
const searchBarContainer = document.getElementById("SearchBarPropertiesContainer")
280+
PropertiesSearchBarContainer = document.getElementById("SearchBarPropertiesContainer")
281+
PropertiesSearchBarContainer.style.visibility = ShouldPropertySearchBarBeVisible() ? "visible" : "hidden"
237282

238-
HTML.ClearElement(searchBarContainer)
283+
HTML.ClearElement(PropertiesSearchBarContainer)
239284

240285
const searchBar = document.createElement("input")
241286
searchBar.type = "search"
@@ -250,7 +295,7 @@ function UpdateSearchBarProperties() {
250295
UpdateReport()
251296
}
252297
})
253-
searchBarContainer.appendChild(searchBar)
298+
PropertiesSearchBarContainer.appendChild(searchBar)
254299
}
255300

256301
let compareToID = -1;
@@ -443,10 +488,7 @@ function UpdateList() {
443488
row.appendChild(cell)
444489
})
445490
row.addEventListener('click', () => {
446-
ReportIndex = index
447-
UpdateReport()
448-
window.history.replaceState(null, null, "?ID=" + Reports[ReportIndex].GetField("ID"))
449-
document.title = Reports[ReportIndex].GetField("DXGI_ADAPTER_DESC3.Description") + " - D3d12infoDB";
491+
SelectReport(index)
450492
})
451493
row.classList.add("clickableRow")
452494
tableBody.appendChild(row)
@@ -584,8 +626,6 @@ function UpdateComparison() {
584626

585627
table.appendChild(tableBody)
586628
tableContainer.appendChild(table)
587-
588-
//FormatTable.BuildFormatTable(report, tableContainer)
589629
}
590630

591631
function UpdateReport() {
@@ -595,6 +635,11 @@ function UpdateReport() {
595635

596636
HTML.ClearElement(tableContainer)
597637

638+
if (ReportIndex == null)
639+
{
640+
return;
641+
}
642+
598643
const table = document.createElement("table")
599644
const tableBody = document.createElement("tbody")
600645

@@ -671,9 +716,16 @@ export function Initialize(inShowAdapterSearch, inIsComparison) {
671716

672717
export function LoadReports(reports, startingID) {
673718
Reports = reports
674-
ReportIndex = Reports.findIndex(e => e.GetField("ID") == startingID)
675-
if (ReportIndex == -1) {
676-
ReportIndex = Reports.length - 1
719+
if (startingID != null)
720+
{
721+
ReportIndex = Reports.findIndex(e => e.GetField("ID") == startingID)
722+
if (ReportIndex == -1) {
723+
ReportIndex = Reports.length - 1
724+
}
677725
}
678726
UpdateOutput()
727+
if (startingID != null)
728+
{
729+
PropertiesSearchBarContainer.scrollIntoView();
730+
}
679731
}

‎source/frontend/assets/xml/opensearch.xml

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
<OpenSearchDescription
2+
xmlns="http://a9.com/-/spec/opensearch/1.1/"
3+
xmlns:moz="http://www.mozilla.org/2006/browser/search/">
4+
<ShortName>D3d12infoDB</ShortName>
5+
<Description>Search D3D12 GPU capabilities</Description>
6+
<InputEncoding>UTF-8</InputEncoding>
7+
<Image width="48" height="48" type="image/x-icon">https://d3d12infodb.boolka.dev/favicon.ico</Image>
8+
<Url type="text/html" template="https://d3d12infodb.boolka.dev/index.html?q={searchTerms}" />
9+
<Url type="application/opensearchdescription+xml" rel="self" template="https://d3d12infodb.boolka.dev/opensearch.xml" />
10+
<Query role="example" searchTerms="NVIDIA GeForce RTX 3060 Laptop GPU" />
11+
</OpenSearchDescription>

‎source/frontend/website-index-webpack.js

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,3 +3,6 @@ import './assets/css/report_table.css';
33

44
// js
55
import './assets/js/website_index.mjs';
6+
7+
// open search descriptor
8+
import './assets/xml/opensearch.xml';

‎source/frontend/website-webpack.config.js

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -50,12 +50,12 @@ module.exports = {
5050
}
5151
},
5252
{
53-
test: /\.json$/,
53+
test: /\.(json|ico|xml)$/,
5454
type: 'asset/resource',
5555
generator: {
5656
filename: '[name][ext]'
5757
}
58-
},
58+
}
5959
],
6060
},
6161
plugins: [

‎source/website/CanIUse.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1 @@
1-
<!doctype html><html lang="en"><head><meta charset="UTF-8"><title>D3D12 Can I Use - D3d12infoDB</title><meta name="description" content="Can I Use support matrix for D3D12 features"/><meta name="robots" content="index, archive"/><meta name="keywords" content="DirectX, Direct3D, D3D12, DX12"/><meta property="og:title" content="D3D12 Can I Use"/><meta property="og:description" content="Can I Use support matrix for D3D12 features"/><meta property="og:type" content="website"/><meta property="og:url" content="https://d3d12infodb.boolka.dev/CanIUse.html"/><meta name="twitter:card" content="summary"/><meta name="twitter:title" content="D3D12 Can I Use"/><meta name="twitter:description" content="Can I Use support matrix for D3D12 features"/><link rel="icon" type="image/png" href="84cce981575dbdc0fe40.png" sizes="96x96"/><link rel="icon" type="image/svg+xml" href="favicon.svg"/><link rel="shortcut icon" href="01dd40ee699a7c61060b.ico"/><link rel="apple-touch-icon" sizes="180x180" href="b0669e145449e7ec0cf7.png"/><link rel="manifest" href="ca84030c52cc08023014.webmanifest"/><script defer="defer" src="assets.js"></script><script defer="defer" src="shared.js"></script><script defer="defer" src="can_i_use.js"></script></head><body><noscript>This website requires JavaScript to run</noscript><div class="headerContainer"><div class="headerContainer2"><div class="header"><div class="flexLeft"><div style="width:.5em"></div><a class="headerLink" href="index.html"><div class="headerText">D3d12infoDB</div></a><div style="width:1em"></div><a class="headerLink" href="https://github.com/Devaniti/D3d12infoGUI/releases/latest"><div class="headerText">GUI</div><img class="icon" src="download.svg"></a><div style="width:.3em"></div><a class="headerLink" href="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/Devaniti/D3d12infoGUI"><div class="headerText">Source</div><img class="icon" src="github-mark.svg"></a><div style="width:1em"></div><a class="headerLink" href="https://github.com/sawickiap/D3d12info/releases/latest"><div class="headerText">CLI</div><img class="icon" src="download.svg"></a><div style="width:.3em"></div><a class="headerLink" href="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/sawickiap/D3d12info"><div class="headerText">Source</div><img class="icon" src="github-mark.svg"></a></div><div class="flexRight"><a class="headerLink" href="CanIUse.html"><div class="headerText">Can I Use</div></a><div style="width:.3em"></div><a class="headerLink" href="FeatureTable.html"><div class="headerText">Feature Table</div></a><div style="width:.3em"></div><a class="headerLink" href="about.html"><div class="headerText">About</div></a></div><div style="width:.5em"></div></div></div></div><main><div class="CanIUseSearchContainer"><div class="CanIUseFilter" id="FeatureSearchBar"></div><div class="CanIUseFilterResult" id="FeatureSearchResult"></div></div><div class="CanIUseData" id="FeatureData"></div></main></body></html>
1+
<!doctype html><html lang="en"><head><meta charset="UTF-8"><title>D3D12 Can I Use - D3d12infoDB</title><meta name="description" content="Can I Use support matrix for D3D12 features"/><meta name="robots" content="index, archive"/><meta name="keywords" content="DirectX, Direct3D, D3D12, DX12"/><meta property="og:title" content="D3D12 Can I Use"/><meta property="og:description" content="Can I Use support matrix for D3D12 features"/><meta property="og:type" content="website"/><meta property="og:url" content="https://d3d12infodb.boolka.dev/CanIUse.html"/><meta name="twitter:card" content="summary"/><meta name="twitter:title" content="D3D12 Can I Use"/><meta name="twitter:description" content="Can I Use support matrix for D3D12 features"/><link rel="icon" type="image/png" href="84cce981575dbdc0fe40.png" sizes="96x96"/><link rel="icon" type="image/svg+xml" href="favicon.svg"/><link rel="shortcut icon" href="favicon.ico"/><link rel="apple-touch-icon" sizes="180x180" href="b0669e145449e7ec0cf7.png"/><link rel="manifest" href="ca84030c52cc08023014.webmanifest"/><script defer="defer" src="assets.js"></script><script defer="defer" src="shared.js"></script><script defer="defer" src="can_i_use.js"></script></head><body><noscript>This website requires JavaScript to run</noscript><div class="headerContainer"><div class="headerContainer2"><div class="header"><div class="flexLeft"><div style="width:.5em"></div><a class="headerLink" href="index.html"><div class="headerText">D3d12infoDB</div></a><div style="width:1em"></div><a class="headerLink" href="https://github.com/Devaniti/D3d12infoGUI/releases/latest"><div class="headerText">GUI</div><img class="icon" src="download.svg"></a><div style="width:.3em"></div><a class="headerLink" href="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/Devaniti/D3d12infoGUI"><div class="headerText">Source</div><img class="icon" src="github-mark.svg"></a><div style="width:1em"></div><a class="headerLink" href="https://github.com/sawickiap/D3d12info/releases/latest"><div class="headerText">CLI</div><img class="icon" src="download.svg"></a><div style="width:.3em"></div><a class="headerLink" href="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/sawickiap/D3d12info"><div class="headerText">Source</div><img class="icon" src="github-mark.svg"></a></div><div class="flexRight"><a class="headerLink" href="CanIUse.html"><div class="headerText">Can I Use</div></a><div style="width:.3em"></div><a class="headerLink" href="FeatureTable.html"><div class="headerText">Feature Table</div></a><div style="width:.3em"></div><a class="headerLink" href="about.html"><div class="headerText">About</div></a></div><div style="width:.5em"></div></div></div></div><main><div class="CanIUseSearchContainer"><div class="CanIUseFilter" id="FeatureSearchBar"></div><div class="CanIUseFilterResult" id="FeatureSearchResult"></div></div><div class="CanIUseData" id="FeatureData"></div></main></body></html>

‎source/website/FeatureTable.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1 @@
1-
<!doctype html><html lang="en"><head><meta charset="UTF-8"><title>D3D12 Feature Table - D3d12infoDB</title><meta name="description" content="Support matrix for all D3D12 features, grouped per vendor and architecture"/><meta name="robots" content="index, archive"/><meta name="keywords" content="DirectX, Direct3D, D3D12, DX12"/><meta property="og:title" content="D3D12 Feature Table"/><meta property="og:description" content="Support matrix for all D3D12 features, grouped per vendor and architecture"/><meta property="og:type" content="website"/><meta property="og:url" content="https://d3d12infodb.boolka.dev/FeatureTable.html"/><meta name="twitter:card" content="summary"/><meta name="twitter:title" content="D3D12 Feature Table"/><meta name="twitter:description" content="Support matrix for all D3D12 features, grouped per vendor and architecture"/><link rel="icon" type="image/png" href="84cce981575dbdc0fe40.png" sizes="96x96"/><link rel="icon" type="image/svg+xml" href="favicon.svg"/><link rel="shortcut icon" href="01dd40ee699a7c61060b.ico"/><link rel="apple-touch-icon" sizes="180x180" href="b0669e145449e7ec0cf7.png"/><link rel="manifest" href="ca84030c52cc08023014.webmanifest"/><script defer="defer" src="assets.js"></script><script defer="defer" src="shared.js"></script><script defer="defer" src="feature_table.js"></script></head><body><noscript>This website requires JavaScript to run</noscript><div class="headerContainer"><div class="headerContainer2"><div class="header"><div class="flexLeft"><div style="width:.5em"></div><a class="headerLink" href="index.html"><div class="headerText">D3d12infoDB</div></a><div style="width:1em"></div><a class="headerLink" href="https://github.com/Devaniti/D3d12infoGUI/releases/latest"><div class="headerText">GUI</div><img class="icon" src="download.svg"></a><div style="width:.3em"></div><a class="headerLink" href="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/Devaniti/D3d12infoGUI"><div class="headerText">Source</div><img class="icon" src="github-mark.svg"></a><div style="width:1em"></div><a class="headerLink" href="https://github.com/sawickiap/D3d12info/releases/latest"><div class="headerText">CLI</div><img class="icon" src="download.svg"></a><div style="width:.3em"></div><a class="headerLink" href="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/sawickiap/D3d12info"><div class="headerText">Source</div><img class="icon" src="github-mark.svg"></a></div><div class="flexRight"><a class="headerLink" href="CanIUse.html"><div class="headerText">Can I Use</div></a><div style="width:.3em"></div><a class="headerLink" href="FeatureTable.html"><div class="headerText">Feature Table</div></a><div style="width:.3em"></div><a class="headerLink" href="about.html"><div class="headerText">About</div></a></div><div style="width:.5em"></div></div></div></div><main><div class="FeatureTableFilterContainer"><div class="FeatureTableFilter" id="FeatureTableFilter"></div></div><div class="FeatureTable" id="FeatureTable"></div></main></body></html>
1+
<!doctype html><html lang="en"><head><meta charset="UTF-8"><title>D3D12 Feature Table - D3d12infoDB</title><meta name="description" content="Support matrix for all D3D12 features, grouped per vendor and architecture"/><meta name="robots" content="index, archive"/><meta name="keywords" content="DirectX, Direct3D, D3D12, DX12"/><meta property="og:title" content="D3D12 Feature Table"/><meta property="og:description" content="Support matrix for all D3D12 features, grouped per vendor and architecture"/><meta property="og:type" content="website"/><meta property="og:url" content="https://d3d12infodb.boolka.dev/FeatureTable.html"/><meta name="twitter:card" content="summary"/><meta name="twitter:title" content="D3D12 Feature Table"/><meta name="twitter:description" content="Support matrix for all D3D12 features, grouped per vendor and architecture"/><link rel="icon" type="image/png" href="84cce981575dbdc0fe40.png" sizes="96x96"/><link rel="icon" type="image/svg+xml" href="favicon.svg"/><link rel="shortcut icon" href="favicon.ico"/><link rel="apple-touch-icon" sizes="180x180" href="b0669e145449e7ec0cf7.png"/><link rel="manifest" href="ca84030c52cc08023014.webmanifest"/><script defer="defer" src="assets.js"></script><script defer="defer" src="shared.js"></script><script defer="defer" src="feature_table.js"></script></head><body><noscript>This website requires JavaScript to run</noscript><div class="headerContainer"><div class="headerContainer2"><div class="header"><div class="flexLeft"><div style="width:.5em"></div><a class="headerLink" href="index.html"><div class="headerText">D3d12infoDB</div></a><div style="width:1em"></div><a class="headerLink" href="https://github.com/Devaniti/D3d12infoGUI/releases/latest"><div class="headerText">GUI</div><img class="icon" src="download.svg"></a><div style="width:.3em"></div><a class="headerLink" href="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/Devaniti/D3d12infoGUI"><div class="headerText">Source</div><img class="icon" src="github-mark.svg"></a><div style="width:1em"></div><a class="headerLink" href="https://github.com/sawickiap/D3d12info/releases/latest"><div class="headerText">CLI</div><img class="icon" src="download.svg"></a><div style="width:.3em"></div><a class="headerLink" href="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/sawickiap/D3d12info"><div class="headerText">Source</div><img class="icon" src="github-mark.svg"></a></div><div class="flexRight"><a class="headerLink" href="CanIUse.html"><div class="headerText">Can I Use</div></a><div style="width:.3em"></div><a class="headerLink" href="FeatureTable.html"><div class="headerText">Feature Table</div></a><div style="width:.3em"></div><a class="headerLink" href="about.html"><div class="headerText">About</div></a></div><div style="width:.5em"></div></div></div></div><main><div class="FeatureTableFilterContainer"><div class="FeatureTableFilter" id="FeatureTableFilter"></div></div><div class="FeatureTable" id="FeatureTable"></div></main></body></html>

0 commit comments

Comments
 (0)