Frontend search UI #12
Open
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
- add bootstrap close attribute so the dropdown collapses when clicking outside of it
- remove class from dataset row - remove title container and title tags from index
- add function to initialize bootstrap tooltips - remove duplicated condition featureKey == "assets" - move featureKey == "properties" condition to below "assets" - add tooltips to links and icons that are supposed to copy the link to the clipboard - add css classes to icons, icon container - add function setClipboard() to allow writing the dataset link to the clipboard on click - add function hideTooltip() to hide the tooltip after 2 seconds
Remove unneeded parameter
- Added radial gradient hover effect on hover of download icon as defined in design - added additional width attributes for asset links -added styling for tooltips (Not working)
- removed commented code - add "properties" object definition to JSON that will be sent in search query - add code to dynamically add collection name to search results - change condition for code that displays assets to use current stac collection json from redoak and not the testing server - add hover tooltips to let user know to click links and icons to copy the url link or download the file - add Variables and Dimensions sections - add function to build the header template of each section - add testing function that passes the string representation of the stac json from redoak
- add styles for Variables and Dimensions sections
- Add section for collection name - remove spaces from html tags
- Added production version of populateSearchResults() function that creates links from the live redoak stac search json - removed function that makes table header for the default search results when the page first loads - Add code to build Metadata section
Add classes for metadata section header
-Add header for node information section - add function to explicitly hide the hover tooltip and show the click tooltip when clicking on a link or clicking on the copy icon - Add comments to denote different sections of the page they populate - remove commented code - add Marble section - add function to show tooltip
- add styles for node section
- change map styles to a class instead of targeting an ID
- move bottom border styles to their own classes - add border styles for ul lists - add border styles for div lists - add border styles for tables
- add container for leaflet map - add leaflet function files
- add classes for borders to sections
- change the createMap() function so it targets a passed ID
- create the leaflet map in the element with the passed ID
Capitalize text for Variable types
- Add styles for redesigned metadata section (as per meeting 2025-04-02)
- Redo functionality to output metadata (properties information) so that the properties output are now subsections under the general Metadata section
- code for Metadata removed from under 'if(featureKey == "properties)' on line 772 and rewritten so it depends on 'stac_extensions' being a key in the features on line 478
- add BBox section
Add option to not include widgets in leaflet map when loading a new map
Add option to not include widgets in leaflet map when loading a new map
Add BBox template
- change condition so it adds different classes according to property type - add classes so borders can be added differently to different property types - change how metadataValueCellDiv is added to the section body so it doesn't append an empty div in the Dimensions section
-Add styles for Dimension section
Remove initialization of map on page load
- add functionality to process geometry stac node if it exists - move map creation for STAC search here and make it dependent on existence of geometry node - add polygon to map if polygon coordinates exists
- change initialization function for map to include parameter for polygon coordinates
- change parameters of createMap() function to include parameter for polygon coordinates - add function to add polygon from stac if it exists.
Add padding to search 'plus' icon
fix alignment of search bar elements
ONGOING - find out why dropdown list does not collapse when clicking out of it
- remove underscore from queryable dropdown names - remove unneeded variables from addKeyword() function - add condition to check for null or empty string values in addKeyword() function
Remove testing console log
- Add div for non-enum entries from STAC - remove call for buildFrequencyFilterDropdown function - Add TODO to clean up frequency dropdown function calls and ID use
- add conditions to populate queryables that don't have a prefix/extension name but still have an enum entry into the dropdowns on the left side -> will be put under Location - add conditions to remove underscore from queryable name and format as needed - add conditions to format 'id' and 'url' in the queryable name as all caps - remove the previous methods of styling queryable names with underscores - add conditions in the buildQueryables() function to populate the 'Frequency' queryables under the 'Frequency' area instead of the 'Other' area - add conditions in the buildQueryables() function to remove items added under the 'Frequency' area
Comment out the Frequency dropdown template for cleanup
change name of function to be less generic
change name of function to be less generic
change name of function to be less generic
Added call to function to reset search bar dropdown to default title text
Remove Frequency dropdown template
Remove unneeded functions used to build Frequency dropdown
Remove unused function and function calls
Remove unused function
Comment out spin button function for now and leave explanation comment
-Rename getShapeLatLng() function to getMarkerLatLng() - remove unneeded functionality -> functionality done by 'Review' button / taken over by formatGeoJSON() function
Use existing function to set modal
Comment out solution for error "Map container is already initialized." for now. This solution interferes with coordinates being added to Point field
Put variable for 'Map container is already initialized.' solution inside commented area
Functions for repeated time frames separated out of main code and saved for later when issues with faking repetition query filters are resolved
Add functionality to close the keyword search result list when clicking the list item
Checkbox width changes with text width
Update functionality to build filter dropdowns on left side to include ability to build dropdowns from the /collections endpoint summaries as well.
Remove unneeded functions (grouping of collections and queryables endpoint json handled by one function now)
Remove call to old build queryables filter dropdown function
remove comment
mishaschwartz
requested changes
Jun 19, 2025
Collaborator
mishaschwartz
left a comment
mishaschwartz
left a comment
There was a problem hiding this comment.
This is an initial review that is only looking at the style and how things are presented on the page. I will do another review later looking at the code itself.
The main takeaways are:
- The style is not consistent with what is presented in Figma. I know that we chose to add/remove some elements but the styling should be the same
- the map component needs work, by fixing it in the modal you broke it on the dataset page... it needs to work in both cases.
| z-index: -99; | ||
| } | ||
|
|
||
| .banner-image-node{ |
| z-index: -99; | ||
| } | ||
|
|
||
| .banner-image-about{ |
| z-index: -99; | ||
| } | ||
|
|
||
| #banner-video{ |
| {% set banner_background_class= "banner-image-home" %} | ||
| {% set banner_large_background_class = "banner-image-home-large" %} | ||
| {% set banner_title_class = "banner-title-home" %} | ||
| {% set banner_video = "video/banner-video.mp4" %} |
| {% set banner_large_background_class = "banner-image-home-large" %} | ||
| {% set banner_title_class = "banner-title-home" %} | ||
| {% set banner_video = "video/banner-video.mp4" %} | ||
| {% set page_title = "Data Analytics for Canadian Climate Services, STAC API" %} |
Collaborator
There was a problem hiding this comment.
These should all come from the STAC catalog. Not hardcoded
| sensor type, let you further customize your results to meet quality and relevance standards. | ||
| </p> | ||
| </div> | ||
| <div id="searchFilterContainer" class="div-search-filter-container"> |
Collaborator
There was a problem hiding this comment.
This does not match the design. This should be in a box and the buttons should be formatted differently.
| </div> | ||
| </div> | ||
|
|
||
| <div id="searchResultsNavigation" class="search-results-nav"> |
Collaborator
There was a problem hiding this comment.
Does not match the design in too many ways to list them... just go look at Figma again please.
|
|
||
| <div id="nonEnumQueryables" class="div-queryable-filters"></div> | ||
|
|
||
| <div id="dropdownQueryables" class="div-queryable-filters"></div> |
Collaborator
There was a problem hiding this comment.
Why are some labels left aligned and some centred?
Checkbox should be vertically aligned to the centre of the label.
Contributor
Author
There was a problem hiding this comment.
This is a mystery to me as well because they all have the same text styling classes.
| <h6 class="title-advanced-filters">Advanced Filters</h6> | ||
| </div> | ||
|
|
||
| {% with %} |
Collaborator
There was a problem hiding this comment.
Why does the time frame dropdown have a box shadow but none of the others do?
| <div id="datasetGeneralContainer"></div> | ||
|
|
||
| <div id="datasetGeometryContainer"> | ||
| <div id="datasetMapContainer" class="map"></div> |
Collaborator
There was a problem hiding this comment.
Header gets added multiple times if you choose different items without reloading the page:
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Details about a particular search result are displayed as depicted in the FIgma design, with some changes as discussed in meetings
-> removing BBox section, adding a map to display BBox and geometry, displaying metadata in a nested fashion, etc.
Filter functions added for Catalog dropdown, and partially to the Time Frame selection.
Search results for the Catalog filter seem correct.
Search results for the Time Frame filter don't seem correct.
Edit 2025-06-18: