Skip to content

Commit 981b9ee

Browse files
devanshkdevanshk
committed
show properties selector, improved responsiveness, added/removed clickable filters
1 parent fb60ce6 commit 981b9ee

12 files changed

+228
-96
lines changed

‎src/components/CollectionView.jsx

+27-12
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
1-
import React, { useEffect, useState } from "react";
2-
import { useNavigate, Link, useSearchParams } from "react-router-dom";
1+
import React, { useState } from "react";
2+
import { useNavigate, Link } from "react-router-dom";
33
import { useMephistoReview } from "../shims/mephisto-review-hook";
44
import {
55
Button,
@@ -27,14 +27,15 @@ import "./CollectionView.scss"
2727
import FileUploadButton from "./PredictionsUpload/PredictionsUploadButton";
2828
import Footer from "../Footer";
2929
import SearchBox from "./SearchBox/SearchBox";
30+
import { benchmark_values } from "./FilterBox/filterData";
3031

3132

3233
function CollectionView({
3334
itemRenderer = JSONItem,
3435
collectionRenderer: CollectionRenderer = GridCollection,
3536
}) {
36-
const [searchParams,] = useSearchParams();
37-
const [page, setPage] = useStateWithUrlParam('p', '1', parseInt);
37+
const [query, setQueryAndURL, setQuery, setQueryURL] = useStateWithUrlParam('q', '');
38+
const [page, setPage] = useStateWithUrlParam('p', 1);
3839
const [filteredData, setFilteredData] = useState([]);
3940
const [selectedTab, setSelectedTab] = useStateWithUrlParam('t', 'browse');
4041
const navigate = useNavigate();
@@ -54,10 +55,6 @@ function CollectionView({
5455
'analyze': 'Analyzing',
5556
}
5657

57-
const onImFeelingLuckyClick = () => {
58-
navigate(`/${filteredData[Math.floor(Math.random() * filteredData.length)].video_uid}?${searchParams.toString()}`)
59-
}
60-
6158
return (
6259
<>
6360
<VersionHeader />
@@ -74,10 +71,10 @@ function CollectionView({
7471
</NavbarGroup>
7572
<NavbarGroup align={Alignment.CENTER}>
7673
{/* <SearchBox /> */}
77-
<FilterBox filterData={filterData} setFilteredData={setFilteredData} />
78-
<CSVLink data={gen_export_csv(filteredData)} target="_blank" filename={'ego4d_viz_filtered_videos'} >
74+
<FilterBox filterData={filterData} setFilteredData={setFilteredData} {...{ query, setQueryAndURL, setQuery, setQueryURL }} />
75+
{/* <CSVLink data={gen_export_csv(filteredData)} target="_blank" filename={'ego4d_viz_filtered_videos'} >
7976
<Button align={ALIGN_RIGHT} style={{ flex: '1 1 auto', margin: '7px' }}>Export Video UIDs</Button>
80-
</CSVLink>
77+
</CSVLink> */}
8178
{/* <FileUploadButton /> */}
8279
</NavbarGroup>
8380
</div>
@@ -89,7 +86,25 @@ function CollectionView({
8986
total_duration_seconds + ' seconds'
9087
}</span>.
9188

92-
{/* <Button intent={Intent.PRIMARY} align={ALIGN_RIGHT} style={{ flex: '1 1 auto', margin: '7px' }} onClick={onImFeelingLuckyClick}>Random Video</Button> */}
89+
{false &&
90+
benchmark_values.map((benchmark) => {
91+
let snippet = `benchmarks include ${benchmark}`;
92+
return <span
93+
className={'nav-benchmark-opt' + (query.includes(snippet) ? ` tag-${benchmark} active` : '')}
94+
onClick={() => {
95+
let new_query = query.includes(snippet)
96+
? query.replace(new RegExp(`(( AND| OR)\\s*${snippet}|${snippet}\\s*(AND |OR )|\\s*${snippet}\\s*)`), '')
97+
: query.trim().length > 0
98+
? `${query} ${query.includes('benchmarks include') ? 'OR' : 'AND'} ${snippet}`
99+
: snippet;
100+
101+
setQueryAndURL(new_query.replace(new RegExp('\\s+', 'g'), ' '));
102+
}}
103+
onKeyDown={(e) => e.preventDefault()}
104+
role='button'
105+
tabIndex={-1}>{benchmark}</span>
106+
})
107+
}
93108
</div>
94109
</Navbar>
95110
<main id="all-item-view-wrapper">

‎src/components/CollectionView.scss

+21
Original file line numberDiff line numberDiff line change
@@ -18,3 +18,24 @@
1818
.bp3-tab-indicator-wrapper .bp3-tab-indicator {
1919
background-color: rgb(110, 83, 220) !important;
2020
}
21+
22+
.nav-benchmark-opt {
23+
padding: 2px 5px;
24+
margin: 0 2px;
25+
border: solid 1px #182026;
26+
border-radius: 50px;
27+
cursor: pointer;
28+
user-select: none;
29+
opacity: 0.7;
30+
31+
&:hover:not(.active) {
32+
background: #ddd;
33+
opacity: 1;
34+
}
35+
36+
&.active {
37+
border: none;
38+
padding:3px 6px;
39+
opacity: 1;
40+
}
41+
}

‎src/components/SearchBox/SearchBox.scss

+5
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,8 @@
1+
.searchbox {
2+
flex-basis: 50% !important;
3+
padding-right: 10px;
4+
}
5+
16
.searchbox input {
27
height: 38px;
38
padding: 0 10px 0 50px;

‎src/components/filterbox/FilterBox.jsx

+4-5
Original file line numberDiff line numberDiff line change
@@ -61,8 +61,7 @@ class CustomResultProcessing extends SimpleResultProcessing {
6161
}
6262
}
6363

64-
export default function FilterBox({ filterData, setFilteredData }) {
65-
const [query, setQueryAndURL, setQuery, setQueryURL] = useStateWithUrlParam('q', '');
64+
export default function FilterBox({ filterData, setFilteredData, query, setQuery, setQueryURL }) {
6665

6766
const autoCompleteHandler = new CustomAutoComplete([], filter_options);
6867
const parser = new FilterQueryParser();
@@ -77,10 +76,10 @@ export default function FilterBox({ filterData, setFilteredData }) {
7776
useEffect(() => {
7877
var result = parser.parse(query);
7978
if (result.isError) { return }
80-
onParseOk(result);
81-
}, [filterData]); // Run pre-loaded url query when the page first loads
79+
new CustomResultProcessing(filter_options).process(filterData, result).length > 0 && onParseOk(result);
80+
}, [filterData, query]); // Run pre-loaded url query when the page first loads
8281

83-
return <div style={{ display: 'flex', width: '100%' }}>
82+
return <div style={{ display: 'flex', flexBasis: '100%', maxWidth: '100%'}}>
8483
<Icon icon={'filter'} className='filterbox-icon' />
8584
<ReactFilterBox
8685
data={[]}

‎src/components/filterbox/FilterBox.scss

+1
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
.react-filter-box {
2+
width: 100%;
23
height: 38px;
34
margin-bottom: 0;
45
flex: 10 1 auto;

‎src/custom/NarrationsThumbnail.jsx

+34-31
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,15 @@
11
/* eslint-disable no-unused-expressions */
22

33
import React from "react";
4-
import { Card, Elevation } from "@blueprintjs/core";
4+
import { Card, Elevation, HTMLTable } from "@blueprintjs/core";
55
import { getHostname } from "../utils";
6-
import { getAllObjectValWordCounts } from "../renderers/WordCloudItem/WordCloud";
76

87
import "./NarrationsThumbnail.scss";
98
import { formatVideoSeconds } from "./Utility/Formatters";
109

11-
function NarrationsThumbnail({ item, setDetailIDs, mode }) {
10+
const CUSTOM_FIELDS = ['video_uid', 'benchmarks']
11+
12+
function NarrationsThumbnail({ item, setDetailIDs, mode, selectedFields }) {
1213
const [isError, setError] = React.useState(false);
1314

1415
if (mode === 'mini') {
@@ -41,13 +42,12 @@ function NarrationsThumbnail({ item, setDetailIDs, mode }) {
4142
className="json-item-card"
4243
>
4344
<p style={{ fontSize: 12 }}>
44-
{item.video_uid}
45+
{selectedFields.includes('video_uid') && item.video_uid}
4546
</p>
4647
<img
4748
role="presentation"
4849
onError={(e) => {
4950
e.target.onerror = null;
50-
// e.target.src = "image_path_here";
5151
setError(true);
5252
}}
5353
src={
@@ -59,33 +59,36 @@ function NarrationsThumbnail({ item, setDetailIDs, mode }) {
5959
style={{ width: item._img ? "100%" : "1px", height: "25vh", 'objectFit': 'cover' }}
6060
/>
6161
<span>
62-
<br />
63-
{
64-
getBenchmarks(item).map(({ tag, subtag }) => (
65-
subtag !== '' ?
66-
<div className={"thumbnail-tag-with-subtag"} key={tag + subtag}>
67-
<span className={"pillbox-left tag-" + tag}> {tag} </span>
68-
<span className={"pillbox-right subtag-" + tag}> {subtag} </span>
69-
</div> :
70-
<span
71-
className={"thumbnail-tag tag-" + tag}
72-
key={tag}>
73-
{tag}
74-
</span>
75-
))
76-
}
77-
<br />
78-
{
79-
getTags(item).map((tag) => (
80-
<span
81-
className={"thumbnail-tag tag-" + tag}
82-
key={tag}>
83-
{tag}
84-
</span>
85-
))
62+
{selectedFields.includes('benchmarks') &&
63+
<>
64+
<br />
65+
{
66+
getBenchmarks(item).map(({ tag, subtag }) => (
67+
subtag !== '' ?
68+
<div className={"thumbnail-tag-with-subtag"} key={tag + subtag}>
69+
<span className={"pillbox-left tag-" + tag}> {tag} </span>
70+
<span className={"pillbox-right subtag-" + tag}> {subtag} </span>
71+
</div> :
72+
<span
73+
className={"thumbnail-tag tag-" + tag}
74+
key={tag}>
75+
{tag}
76+
</span>
77+
))
78+
}
79+
</>
8680
}
87-
<br />
88-
{item.summaries}
81+
<HTMLTable condensed={true} bordered={true} className='thumbnail-detail'>
82+
<tbody>
83+
{selectedFields.filter(x => !CUSTOM_FIELDS.includes(x)).map(f =>
84+
<tr>
85+
<th className='thumbnail-detail-label'>{f}:</th>
86+
{/* <th>{item[f] && item[f].constructor.name}</th> */}
87+
<td className='thumbnail-detail-info'>{item[f] && item[f].constructor == Array ? item[f].map(x => <>{String(x)}<div className='separator'/></>) : item[f]}</td>
88+
</tr>
89+
)}
90+
</tbody>
91+
</HTMLTable>
8992
</span>
9093
</Card>
9194
</div>

‎src/custom/NarrationsThumbnail.scss

+18-10
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,7 @@
99
margin: 4px 2px;
1010
cursor: pointer;
1111
border-radius: 16px;
12+
font-size:1rem;
1213
}
1314

1415
.thumbnail-tag-with-subtag {
@@ -89,16 +90,6 @@
8990
border-radius: 3px;
9091
overflow: hidden;
9192

92-
// .mini-info {
93-
// color: white;
94-
// position:absolute;
95-
// bottom:0;
96-
// right: 0;
97-
// z-index: 1;
98-
// transition: ease all 0.5;
99-
// bottom: -500;
100-
// }
101-
10293
&:hover {
10394
box-shadow: 0 0 0 1px rgb(16 22 26 / 10%), 0 2px 4px rgb(16 22 26 / 20%), 0 8px 24px rgb(16 22 26 / 20%);
10495
cursor: pointer;
@@ -109,3 +100,20 @@
109100
}
110101
}
111102
}
103+
104+
.thumbnail-detail {
105+
width: 100%;
106+
table-layout: fixed;
107+
margin-top:6px;
108+
109+
.thumbnail-detail-info {
110+
word-wrap: break-word;
111+
112+
.separator {
113+
height: 1px;
114+
width: 100%;
115+
margin: 2px 0;
116+
background: rgba(0,0,0,.04);
117+
}
118+
}
119+
}

0 commit comments

Comments
 (0)