diff --git a/src/assets/Interactive.css b/src/assets/Interactive.css
index ecb5a25954c340a193ed0a79387a81852d91d7c8..3925cf425c36dc6b120f994df9047c576421b640 100644
--- a/src/assets/Interactive.css
+++ b/src/assets/Interactive.css
@@ -29,7 +29,7 @@
position: relative;
}
-.ida input[type=text] {
+.workflow-search {
height: 5rem;
width: 60%;
border: 2px solid black;
@@ -37,17 +37,17 @@
margin-bottom:30px;
}
-.ida input[type=text]:focus{
+.ida .workflow-search:focus{
outline: none;
border-color: blue;
}
-.ida input[type=text]:focus + .placeholder-text .text, :not(input[value=""]) + .placeholder-text .text{
+.ida .workflow-search:focus + .placeholder-text .text, :not(input[value=""]) + .placeholder-text .text{
background-color: white;
font-size: 1.1rem;
color: black;
transform: translate(0, -170%);
}
-.ida input[type=text]:focus + .placeholder-text .text{
+.ida .workflow-search:focus + .placeholder-text .text{
border-color: blueviolet;
color: blue;
}
@@ -72,7 +72,7 @@
transition: transform 0.15s ease-out, font-size 0.15s ease-out, background-color 0.2s ease-out, color 0.15s ease-out;
}
-.ida input[type=text], .placeholder-text{
+.ida .workflow-search, .placeholder-text{
font-size: 1.4rem;
padding: 0 1.2rem;
@@ -201,3 +201,43 @@
width: 60%;
margin-bottom:80px;
}
+
+.advanced-search {
+ border: 1px solid black;
+ padding-bottom: 20px;
+ border-radius: 5px;
+ padding-right:30px;
+ padding-left:30px;
+
+}
+
+.search-button {
+ float:right;
+ margin-right:20px;
+}
+
+.form {
+ display: table;
+ border-collapse: collapse;
+ padding: 0;
+ margin: 0;
+}
+.advanced-form > li {
+ display: table-row;
+}
+.advanced-form > li > div {
+ display: table-cell;
+ padding-bottom: 5px;
+}
+.advanced-form > li > div:first-child {
+ padding-right: 10px;
+}
+
+.advanced-float-right {
+ float:right;
+}
+
+.advanced-form-div {
+ width:50%;
+ margin-left:200px;
+}
diff --git a/src/components/services/Interactive.js b/src/components/services/Interactive.js
index c391fb9035e8057864b58e16e5d0ef4e1ed7a975..fb2e7f6481aafb03d9e844daffb4222645c494c0 100644
--- a/src/components/services/Interactive.js
+++ b/src/components/services/Interactive.js
@@ -11,10 +11,18 @@ export default function Interactive() {
const {idaSystemURL, setIdaSystemURL, workflowURL, setWorkflowURL, batchsystemsURL, setBatchsystemsURL, list_of_workflows, setList_of_workflows, list_of_idaSystems, setList_of_idaSystems} = useContext(IDAContext);
const {api_host } = useContext(GlobalContext);
const [searchTerm, setSearchTerm] = React.useState("");
+ const [searchType, setSearchType] = React.useState("");
+ const [searchTypeFilter, setSearchTypeFilter] = React.useState("");
+ const [searchAuthor, setSearchAuthor] = React.useState("");
+ const [searchAuthorFilter, setSearchAuthorFilter] = React.useState("");
+ const [searchPlatform, setSearchPlatform] = React.useState("");
+ const [searchPlatformFilter, setSearchPlatformFilter] = React.useState("");
const [showFacilities, setShowFacilities] = React.useState(false);
const [showNext, setShowNext] = React.useState(false);
const [showSkip, setShowSkip] = React.useState(true);
const [showBack, setShowBack] = React.useState(false);
+ const [showAdvanced, setShowAdvanced] = React.useState(false);
+ const [advancedClicked, setAdvancedClicked] = React.useState(false);
const [showMoreButton, setShowMoreButton] = React.useState(true);
const [showDeploy, setShowDeploy] = React.useState(false);
const [numberOfitemsShown, setNumberOfitemsShown] = React.useState(3)
@@ -83,15 +91,22 @@ export default function Interactive() {
};
- const workflow_results = !searchTerm
- ? list_of_workflows
+ let workflow_results = !searchTerm
+ ?
+ !advancedClicked
+ ? list_of_workflows
+ : list_of_workflows.filter(workflow =>
+ ((typeof workflow.keywords === 'string') && workflow.keywords.toLowerCase().includes(searchTypeFilter.toLocaleLowerCase())) &&
+ ((typeof workflow.runtimePlatform === 'string') && workflow.runtimePlatform.toLowerCase().includes(searchPlatformFilter.toLocaleLowerCase())) &&
+ ((typeof workflow.author === 'string') && workflow.author.toLowerCase().includes(searchAuthorFilter.toLocaleLowerCase())))
: list_of_workflows.filter(workflow =>
- (typeof workflow.name === 'string') && workflow.name.toLowerCase().includes(searchTerm.toLocaleLowerCase()) ||
+ (typeof workflow.name === 'string') && workflow.name.toLowerCase().includes(searchTerm.toLocaleLowerCase()) ||
(typeof workflow.keywords === 'string') && workflow.keywords.toLowerCase().includes(searchTerm.toLocaleLowerCase()) ||
- (typeof workflow.author === 'string') && workflow.author.toLowerCase().includes(searchTerm.toLocaleLowerCase()) ||
- (typeof workflow.runtimePlatform === 'string') && workflow.runtimePlatform.toLowerCase().includes(searchTerm.toLocaleLowerCase()) ||
+ (typeof workflow.author === 'string') && workflow.author.toLowerCase().includes(searchTerm.toLocaleLowerCase()) ||
+ (typeof workflow.runtimePlatform === 'string') && workflow.runtimePlatform.toLowerCase().includes(searchTerm.toLocaleLowerCase()) ||
(typeof workflow.description === 'string') && workflow.description.toLowerCase().includes(searchTerm.toLocaleLowerCase())
- );
+ );
+
const facility_results = !searchTerm
? list_of_idaSystems
@@ -116,8 +131,66 @@ export default function Interactive() {
setSearchTerm("");
setShowFacilities(true);
setShowBack(true);
+ setAdvancedClicked(false);
+ setSearchAuthor("");
+ setSearchAuthorFilter("");
+ setSearchPlatform("");
+ setSearchPlatformFilter("");
+ setSearchType("");
+ setSearchTypeFilter("");
};
+ const onClickAdvanced = e => {
+ e.preventDefault();
+ if (showAdvanced) {
+ setShowAdvanced(false);
+ } else {
+ setShowAdvanced(true);
+ }
+ setAdvancedClicked(false);
+ setSearchAuthor("");
+ setSearchAuthorFilter("");
+ setSearchType("");
+ setSearchTypeFilter("");
+ setSearchPlatform("");
+ setSearchPlatformFilter("");
+
+ }
+
+ const onClickAdvancedSearch = e => {
+ e.preventDefault();
+ if (searchType.toLowerCase()!="all") {
+ setSearchTypeFilter(searchType.toLowerCase());
+ }
+
+ if (searchAuthor.toLowerCase()!="") {
+ setSearchAuthorFilter(searchAuthor.toLowerCase());
+ }
+
+ if (searchAuthor.toLowerCase()!="all") {
+ setSearchPlatformFilter(searchPlatform.toLowerCase());
+ }
+
+ setAdvancedClicked(true);
+ setShowAdvanced(false);
+
+ }
+
+ const handleRecordTypeChange = e => {
+ e.preventDefault();
+ setSearchType(e.target.value);
+ }
+
+ const handleRecordAuthorChange = e => {
+ e.preventDefault();
+ setSearchAuthor(e.target.value);
+ }
+
+ const handlePlatformChange = e => {
+ e.preventDefault();
+ setSearchPlatform(e.target.value);
+ }
+
const onClickBack = e => {
e.preventDefault();
setSearchTerm("")
@@ -128,6 +201,13 @@ export default function Interactive() {
setShowMoreButton(true);
setShowSkip(true);
setWorkflowURL(defaultWorkflow);
+ setAdvancedClicked(false);
+ setSearchAuthor("");
+ setSearchAuthorFilter("");
+ setSearchType("");
+ setSearchTypeFilter("");
+ setSearchPlatform("");
+ setSearchPlatformFilter("");
};
@@ -160,12 +240,14 @@ export default function Interactive() {
<div class="search-buttons">
<input
+ className="workflow-search"
type="text"
placeholder="Search for Workflows"
value={searchTerm}
onChange={handleChange}
/>
+
{ showSkip ?
<Button className="skip-button" onClick={onClickNext}>Skip</Button>
: null }
@@ -173,10 +255,71 @@ export default function Interactive() {
{ showNext ?
<Button className="next-button" onClick={onClickNext}>Next</Button>
: null }
+ <br/>
+ <a href="" onClick={onClickAdvanced}>Advanced Search</a>
+ <br/>
+
+ { showAdvanced ?
+
+
+ <div className="advanced-search">
+
+ <Form className="advanced-form">
+
+ <br/>
+
+ <h3>Search By:</h3>
+ <hr/>
+
+ <ul className="advanced-form-ul">
+ <li>
+ <div className="advanced-form-div"><label>User Interface type:</label>
+ <select class="form-select advanced-float-right" aria-label="record-type" id="record-type" name="record-type" onChange={handleRecordTypeChange}>
+ <option value="all">All</option>
+ <option value="desktop">Desktop Software</option>
+ <option value="cli">Command Line</option>
+ <option value="jupyter-notebook">Notebook</option>
+ </select>
+ </div>
+ </li>
+ <li>
+ <div className="advanced-form-div"><label>Author:</label>
+ <input
+ type="text"
+ className="advanced-float-right"
+ placeholder="Author name"
+ value={searchAuthor}
+ onChange={handleRecordAuthorChange}
+ />
+
+ </div>
+ </li>
+ <li>
+ <div className="advanced-form-div"><label>Runtime Platform:</label>
+ <select class="form-select advanced-float-right" aria-label="record-type" id="record-type" name="record-type" onChange={handlePlatformChange}>
+ <option value="all">All</option>
+ <option value="Python">Python</option>
+ <option value="R">R</option>
+ <option value="Java">Java</option>
+ </select>
+ </div>
+ </li>
+
+ </ul>
+
+ <br/><br/>
+
+ <Button onClick={onClickAdvancedSearch} className="search-button">Search</Button>
+ <br/><br/>
+ </Form>
+ </div>
+
+ : null }
</div>
+
<ul class="workflow-ul">
{workflow_results_sliced.map(item => (
<li class="workflow-li">