search bar fix

geovisto · May 8, 2024 · cfb9f2a · cfb9f2a
1 parent a466470
commit cfb9f2a
Show file tree

Hide file tree

Showing 3 changed files with 227 additions and 58 deletions.
diff --git 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
@@ -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<string>('');
-    const [choosen, setChoosen] = useState<string>('');
+    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 (
-        <div className="demo-toolbar">
-            <div className="data-container">
-                <form onSubmit={handleSearchSubmit} className="search-form" title="Download dataset from ArcGIS HUB">
-                <Select 
-                    id={"C_ID_select_geojson"}
-                    value={choosen}
-                    isLoading={isLoading}
-                    options={search.options}
-                    onInputChange={handleInputChange}
-                    placeholder="Search and download dataset on ArcGIS HUB..."
-                    onChange={handleChoose}
-                    isClearable={true}
-                    noOptionsMessage={() => 'No Datasets Found'}
-                    components={{ DropdownIndicator: () => null, IndicatorSeparator: () => null }}
-                    menuIsOpen={menuIsOpen}
-                    onFocus={clearChoosen}
-                    onMenuClose={() => setMenuIsOpen(false)}
-                    onMenuOpen={() => setMenuIsOpen(true)}
-                    className="select"
-                />
+        <div className="search demo-toolbar">
+            <div className="data-container search-container">
+                <div className="search-row">
+                    <form onSubmit={handleSearchSubmit} className="search-form search-dataset" title="Download dataset from ArcGIS HUB">
+                        <input
+                            type="text"
+                            placeholder="Search and download dataset on ArcGIS HUB..."
+                            onChange={handleInputChange}
+                            value={inputText} 
+                            className="search-input"
+
+                        />
+
+                    </form>
+                    <button onClick={handleSearchSubmit} value="Search" className="btn btn-search search-symbol">
+                        <i className="fa fa-search"></i>
+                    </button>
+                    <button onClick={handleAbort} value="Search" className="btn btn-search search-close close-hidden">
+                        <i className="fa fa-times" aria-hidden="true"></i>
+                    </button>
+                </div>
+                <div className="datasets-dropdown">
+                    <div className="dropdown dropdown-hidden">
+                            {search.options?.map((option) => (
+                                <div className="dataset" 
+                                    onClick={(e) => handleChoose(e, option.label)}    
+                                    key={option.value} 
+                                    id={option.value}
+
+                                >{option.label}</div> 
+                            ))}
+                    </div>
+                </div>
+
+                {/*
+                <form onSubmit={handleSearchSubmit} className="search-form search-dataset" title="Download dataset from ArcGIS HUB">
+                    <Select 
+                        id={"C_ID_select_geojson"}
+                        value={choosen}
+                        isLoading={isLoading}
+                        options={search.options}
+                        onInputChange={handleInputChange}
+                        placeholder="Search and download dataset on ArcGIS HUB..."
+                        onChange={handleChoose}
+                        isClearable={true}
+                        components={{ DropdownIndicator: () => null, IndicatorSeparator: () => null }}
+                        menuIsOpen={menuIsOpen}
+                        onFocus={clearChoosen}
+                        onMenuClose={() => setMenuIsOpen(false)}
+                        onMenuOpen={() => setMenuIsOpen(true)}
+                        className="select"
+                    />
+                    <input type="submit" value="Submit" className="btn btn-search"/>
+                </form>
 
+                <form onSubmit={handleSearchSubmit}>
+                    <input 
+                        type="text" 
+                        placeholder="type something"
+                        className="search-bar__input"
+                        onChange={e => handleInputChange(e.target.value)} 
+                        value={inputText} 
+                    />
+                    <button type="submit" className="search-bar__btn">Search</button>
                 </form>
+                <div>
+                {search.options.map(user => {
+                    return <li key={user.id}>{user.label}</li>
+                    })}
+                </div>
+                                */}
             </div>
         </div>
 

diff --git 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;
+}
+
+