From cfb9f2ac0cefd185097b74ba486b96a96c902247 Mon Sep 17 00:00:00 2001 From: Iva Utikalova Date: Thu, 9 May 2024 01:45:54 +0200 Subject: [PATCH] search bar fix --- src/geovisto_demos/api.tsx | 26 +-- .../PlaygroundBarSearchDatasets.tsx | 156 ++++++++++++------ src/geovisto_demos/playground.css | 103 +++++++++++- 3 files changed, 227 insertions(+), 58 deletions(-) diff --git a/src/geovisto_demos/api.tsx b/src/geovisto_demos/api.tsx index 3b2d0ed..3c0083d 100644 --- a/src/geovisto_demos/api.tsx +++ b/src/geovisto_demos/api.tsx @@ -11,7 +11,6 @@ export const files = async function fetch_github_files() { } export const datasets_search = async function datasets_search(name) { - console.log(name); const response = await fetch('https://avi278.pythonanywhere.com/search/' + name, { method: 'GET', headers: { @@ -22,15 +21,22 @@ export const datasets_search = async function datasets_search(name) { return json; } -export const datasets_download = async function datasets_download(id) { - const response = await fetch('https://avi278.pythonanywhere.com/download/' + id, { - method: 'GET', - headers: { - 'Content-Type': 'application/json', - }, - }) - const json = await response.json(); - return json; +export const datasets_download = async function datasets_download(id, abortController) { + try { + const response = await fetch('https://avi278.pythonanywhere.com/download/' + id, { + method: 'GET', + headers: { + 'Content-Type': 'application/json', + }, + signal: abortController.signal + }) + const json = await response.json(); + return json; + } catch (error) { + if (error.name === 'AbortError') { + return "ABORT"; + } + } } export const file = async function fetch_github_file(path) { diff --git a/src/geovisto_demos/components/PlaygroundBarSearchDatasets.tsx b/src/geovisto_demos/components/PlaygroundBarSearchDatasets.tsx index fba9c80..888c186 100644 --- a/src/geovisto_demos/components/PlaygroundBarSearchDatasets.tsx +++ b/src/geovisto_demos/components/PlaygroundBarSearchDatasets.tsx @@ -1,51 +1,54 @@ import React, { useState, useRef} from "react"; import {datasets_search, datasets_download} from "../api"; -import Select from "react-select"; const PlaygroundBarSearchDatasets = (props) => { const [isLoading, setIsLoading] = useState(false); const [search, setSearch] = useState({ - options: [], + options: [] }); - const [menuIsOpen, setMenuIsOpen] = useState(false); const [inputText, setInputText] = useState(''); - const [choosen, setChoosen] = useState(''); + const [abortController, setAbortController] = useState(null); - const clearChoosen = (e) => { - setChoosen(''); - } + + window.onclick = function(event) { + if (!event.target.matches('.dataset')) { + if (document.getElementsByClassName("dropdown").length > 0) { + document.getElementsByClassName("dropdown")[0].classList.add("dropdown-hidden") + } + } + } const handleInputChange = (e) => { - console.log(e); - setInputText(e); + setInputText(e.target.value); } - const handleChoose = async (e) => { + const handleChoose = async (e, label) => { if (e != null) { - console.log("choose: " + e.value) - setChoosen(e); - setIsLoading(true); - const response = (await datasets_download(e.value)); - setInputText(e.label); - props.callback(response.data, response.geo, e.label); - - setIsLoading(false); - setInputText(''); + document.getElementsByClassName("search-symbol")[0].classList.add("search-symbol-hidden") + document.getElementsByClassName("search-close")[0].classList.remove("close-hidden") + setInputText(label); setSearch({options: []}); + document.getElementsByClassName("dropdown")[0].classList.add("dropdown-hidden") + const controller = new AbortController(); + setAbortController(controller); + + const response = (await datasets_download(e.target.id, controller)); + if (response != "ABORT") { + props.callback(response.data, response.geo, label); + } + document.getElementsByClassName("search-symbol")[0].classList.remove("search-symbol-hidden") + document.getElementsByClassName("search-close")[0].classList.add("close-hidden") } } const handleSearchSubmit = async (e) => { + e.preventDefault(); - setMenuIsOpen(true); let options = []; - console.log(e); - console.log("submit: "+ inputText) if (inputText != "" ) { - setIsLoading(true); const response = (await datasets_search(inputText)).data; response.map((option) => { const newOption = { @@ -54,37 +57,96 @@ const PlaygroundBarSearchDatasets = (props) => { }; options.push(newOption); }); - setIsLoading(false); - setSearch({ - options: options, - }); + + if (response.length == 0) { + alert("Nothing found") + } else { + setSearch({options: options}); + document.getElementsByClassName("dropdown")[0].classList.remove("dropdown-hidden") + } } } + const handleAbort = () => { + if (abortController) { + abortController.abort(); + setAbortController(null); // Reset abort controller after aborting + } + } + return ( -
-
-
- + +
+ + +
+
+
+ {search.options?.map((option) => ( +
handleChoose(e, option.label)} + key={option.value} + id={option.value} + + >{option.label}
+ ))} +
+
+ + {/* +
+ +
+
+ handleInputChange(e.target.value)} + value={inputText} + /> +
+
+ {search.options.map(user => { + return
  • {user.label}
    • + })} +
    + */}
    diff --git a/src/geovisto_demos/playground.css b/src/geovisto_demos/playground.css index ed2e6e2..58acd8a 100644 --- a/src/geovisto_demos/playground.css +++ b/src/geovisto_demos/playground.css @@ -51,6 +51,7 @@ .data-container .btn-export { padding: 8px !important; height: max-content; + justify-content: center; } .data-container .custom-file-upload { @@ -171,13 +172,113 @@ input[type="file"] { -.search-dataset { +.search-row { display: flex; flex-direction: row; + width: 100%; } +.search { + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; +} + +.search-form { + width: 100%; +} .search-container { padding-bottom: 30px; + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + width: 50%; } + +.search-dataset { + display: flex; + flex-direction: row; + justify-content: center; + align-items: center; +} + +.search-input { + color: hsl(0, 0%, 20%); + transition: all 100ms; + background-color: hsl(0, 0%, 100%); + border-color: hsl(0, 0%, 80%); + border-radius: 4px; + border-style: solid; + border-width: 1px; + box-sizing: border-box; + min-height: 38px; + font-size: 1rem; + width: 100%; + padding-left: 10px; + padding-right: 10px; + padding-top: 3px; + justify-self: center; + +} + +.dropdown { + position: absolute; + display: flex; + flex-direction: column; + width: max-content; + z-index: 1; + background-color: var(--ifm-color-primary); + width: 100%; + max-height: 190px; + overflow-x: hidden; + overflow-y: scroll; + background-color: hsl(0, 0%, 100%); + border-color: hsl(0, 0%, 80%); + border-radius: 4px; + border-style: solid; + border-width: 1px; + box-sizing: border-box; + min-height: 38px; + font-size: 1rem; + width: 100%; + + +} + +.datasets-dropdown { + position: relative; + width: 100%; +} + +.dataset { + cursor: pointer; + padding-left: 8px; + padding-right: 8px; + padding-top: 5px; + padding-bottom: 5px; + + width: 100%; + color: black ; + + +} + +.dataset:hover { + background-color: #deebff; +} + +.loader-hidden, .search-symbol-hidden, .dropdown-hidden, .close-hidden { + display: none; +} + + + +.btn-search { + min-height: 38px; +} + +