From 26bd5a039fd1510bf6b703d6178a9e441cca6521 Mon Sep 17 00:00:00 2001
From: afeenster <afeenste@amazon.com>
Date: Mon, 29 Mar 2021 15:13:51 -0700
Subject: [PATCH 1/7] Allowing users to search the ModelView Ui for a model via
 name, type, and version for the model.

---
 .../main/webapp/components/ModelNavigator.jsx | 105 +++++++++++++++++-
 1 file changed, 101 insertions(+), 4 deletions(-)

diff --git a/central/src/main/webapp/components/ModelNavigator.jsx b/central/src/main/webapp/components/ModelNavigator.jsx
index 6fb3cb01c7d..bc24774b5b9 100644
--- a/central/src/main/webapp/components/ModelNavigator.jsx
+++ b/central/src/main/webapp/components/ModelNavigator.jsx
@@ -1,5 +1,7 @@
 import React, { useState, useEffect } from "react";
 import { makeStyles } from '@material-ui/core/styles';
+import Input from '@material-ui/core/Input';
+import TextField from '@material-ui/core/TextField';
 import TreeView from '@material-ui/lab/TreeView';
 import ExpandMoreIcon from '@material-ui/icons/ExpandMore';
 import ChevronRightIcon from '@material-ui/icons/ChevronRight';
@@ -26,7 +28,19 @@ const useStyles = makeStyles({
 		overflowY: "auto",
 
 	},
-
+	inputComponent: {
+        height: '15%',
+        width:  '33%',
+        backgroundColor: 'white',
+        boxShadow: '0 1px 0 0 rgba(170,170,170,0.01)'
+    },
+    inputText: {
+        color: '#D3D4D0',
+        fontSize: '16px',
+        letterSpacing: '0.5px',
+        lineHeight: '28px',
+        textAlign: 'center',
+    },
 	model_root: {
 		order: 0,
 		flex: "2 1 auto",
@@ -37,8 +51,6 @@ const useStyles = makeStyles({
 });
 
 
-
-
 const useFetch = (url) => {
 	const [data, setData] = useState([]);
 
@@ -86,14 +98,99 @@ export default function ModelNavigator(props) {
 	const modelZooData = useFetch(URL);
 
 	const [model, setModel] = useState(null);
+	const [modelList, setModelList] = useState([]);
+	const [nameValue, setNameValue] = useState('');
+	const [typeValue, setTypeValue] = useState('');
+	const [versionValue, setVersionValue] = useState('');
+
+    const nameFilteredModels =
+        modelZooData.map((application) => (
+            application.models.filter((model) => {
+                if ((versionValue == '') || (versionValue == model.version)){
+                    if ((typeValue == '') || (typeValue == application.key)){
+                        return model.name.toLowerCase().includes(nameValue.toLowerCase());
+                    }
+                }
+            })
+        ))
+
+	const modelNameFilterOnChange = (event) => {
+        setNameValue(event.target.value);
+        setModelList(nameFilteredModels)
+
+    };
+
+    const modelTypeFilterOnChange = (event) => {
+        setTypeValue(event.target.value);
+    };
+
+    const modelVersionFilterOnChange = (event) => {
+        setVersionValue(event.target.value);
+    };
 
 	return (
 		<>
+           <div className={classes.view_root}>
+                <div className={classes.navigator_root}>
+                    <TreeView
+                        defaultCollapseIcon={<ExpandMoreIcon />}
+                        defaultExpandIcon={<ChevronRightIcon />}
+                    >
+                        <TreeItem nodeId="Model Searching" label="Model Search">
+                            <TreeView
+                                defaultCollapseIcon={<ExpandMoreIcon />}
+                                defaultExpandIcon={<ChevronRightIcon />}
+                            >
+                                <TreeItem nodeId="Name" label="Name">
+                                    <TextField
+                                        id="name-search"
+                                        label="Enter Name"
+                                        value={nameValue}
+                                        onChange={modelNameFilterOnChange}
+                                        inputProps={{style: { backgroundColor:"white"},}}
+                                    />
+                                </TreeItem>
+                                <TreeItem nodeId="Version" label="Version">
+                                    <div onChange={modelVersionFilterOnChange}>
+                                        <button disabled={versionValue=="0.0.1"} value="0.0.1" onClick={modelVersionFilterOnChange} > 0.0.1 </button>
+                                        <button disabled={versionValue=="0.0.2"} value="0.0.2" onClick={modelVersionFilterOnChange} > 0.0.2 </button>
+                                        <button disabled={versionValue=="0.0.3"} value="0.0.3" onClick={modelVersionFilterOnChange} > 0.0.3 </button>
+                                        <button value="" onClick={modelVersionFilterOnChange} > Clear </button>
+                                    </div>
+                                </TreeItem>
+                                <TreeItem nodeId="Type" label="Type">
+                                    <div onChange={modelVersionFilterOnChange}>
+                                       <button disabled={typeValue=='CV.ACTION_RECOGNITION'} value= 'CV.ACTION_RECOGNITION' onClick={modelTypeFilterOnChange} > action_recognition </button>
+                                       <button disabled={typeValue=='CV.IMAGE_CLASSIFICATION'} value= 'CV.IMAGE_CLASSIFICATION' onClick={modelTypeFilterOnChange} > image_classification </button>
+                                       <button disabled={typeValue=='CV.INSTANCE_SEGMENTATION'} value= 'CV.INSTANCE_SEGMENTATION' onClick={modelTypeFilterOnChange} > instance_segmentation </button>
+                                       <button disabled={typeValue=='CV.OBJECT_DETECTION'} value= 'CV.OBJECT_DETECTION' onClick={modelTypeFilterOnChange} > object_detection </button>
+                                       <button disabled={typeValue=='CV.POSE_ESTIMATION'} value='CV.POSE_ESTIMATION' onClick={modelTypeFilterOnChange} > pose_estimation </button>
+                                       <button disabled={typeValue=='NLP.QUESTION_ANSWER'} value='NLP.QUESTION_ANSWER' onClick={modelTypeFilterOnChange} > question_answer </button>
+                                       <button disabled={typeValue=='NLP.SENTIMENT_ANALYSIS'} value='NLP.SENTIMENT_ANALYSIS' onClick={modelTypeFilterOnChange} > sentiment_analysis </button>
+                                       <button disabled={typeValue=='NLP.WORD_EMBEDDING'} value='NLP.WORD_EMBEDDING' onClick={modelTypeFilterOnChange} > word_embedding </button>
+                                       <button value='' onClick={modelTypeFilterOnChange} > Clear </button>
+                                    </div>
+                                </TreeItem>
+                            </TreeView>
+                            <TreeItem nodeId="Models" label="Models">
+                                <div>
+                                    <button onClick={modelNameFilterOnChange} > Search </button>
+                                    {modelList.map(application => (
+                                      application.map((model) => (
+                                          <TreeItem nodeId={model.name} label={model.name} onLabelClick={() => setModel(model)}>
+                                          </TreeItem>
+                                    ))))}
+                                </div>
+                            </TreeItem>
+                        </TreeItem>
+                    </TreeView>
+                </div>
+           </div>
 
 			<div className={classes.view_root}>
 				<div className={classes.navigator_root}>
 				<TreeView
-					
+
 					defaultCollapseIcon={<ExpandMoreIcon />}
 					defaultExpandIcon={<ChevronRightIcon />}
 				>

From 4db7e577d9fcc2df05ab9a028922a9e5cb0eafa0 Mon Sep 17 00:00:00 2001
From: afeenster <afeenste@amazon.com>
Date: Mon, 29 Mar 2021 15:19:16 -0700
Subject: [PATCH 2/7] Using better variable names.

---
 central/src/main/webapp/components/ModelNavigator.jsx | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/central/src/main/webapp/components/ModelNavigator.jsx b/central/src/main/webapp/components/ModelNavigator.jsx
index bc24774b5b9..c7e72a13da5 100644
--- a/central/src/main/webapp/components/ModelNavigator.jsx
+++ b/central/src/main/webapp/components/ModelNavigator.jsx
@@ -103,7 +103,7 @@ export default function ModelNavigator(props) {
 	const [typeValue, setTypeValue] = useState('');
 	const [versionValue, setVersionValue] = useState('');
 
-    const nameFilteredModels =
+    const filteredModels =
         modelZooData.map((application) => (
             application.models.filter((model) => {
                 if ((versionValue == '') || (versionValue == model.version)){
@@ -114,9 +114,9 @@ export default function ModelNavigator(props) {
             })
         ))
 
-	const modelNameFilterOnChange = (event) => {
+	const modelFilterOnChange = (event) => {
         setNameValue(event.target.value);
-        setModelList(nameFilteredModels)
+        setModelList(filteredModels)
 
     };
 
@@ -146,7 +146,7 @@ export default function ModelNavigator(props) {
                                         id="name-search"
                                         label="Enter Name"
                                         value={nameValue}
-                                        onChange={modelNameFilterOnChange}
+                                        onChange={modelFilterOnChange}
                                         inputProps={{style: { backgroundColor:"white"},}}
                                     />
                                 </TreeItem>
@@ -174,7 +174,7 @@ export default function ModelNavigator(props) {
                             </TreeView>
                             <TreeItem nodeId="Models" label="Models">
                                 <div>
-                                    <button onClick={modelNameFilterOnChange} > Search </button>
+                                    <button onClick={modelFilterOnChange} > Search </button>
                                     {modelList.map(application => (
                                       application.map((model) => (
                                           <TreeItem nodeId={model.name} label={model.name} onLabelClick={() => setModel(model)}>

From d0c2f8a33ea88b49013b72b7ea94d8700973e070 Mon Sep 17 00:00:00 2001
From: afeenster <afeenste@amazon.com>
Date: Wed, 31 Mar 2021 09:34:51 -0700
Subject: [PATCH 3/7] Changing type to application to match DJL terminology.

---
 .../main/webapp/components/ModelNavigator.jsx | 30 +++++++++----------
 1 file changed, 15 insertions(+), 15 deletions(-)

diff --git a/central/src/main/webapp/components/ModelNavigator.jsx b/central/src/main/webapp/components/ModelNavigator.jsx
index c7e72a13da5..af152c75d5d 100644
--- a/central/src/main/webapp/components/ModelNavigator.jsx
+++ b/central/src/main/webapp/components/ModelNavigator.jsx
@@ -100,14 +100,14 @@ export default function ModelNavigator(props) {
 	const [model, setModel] = useState(null);
 	const [modelList, setModelList] = useState([]);
 	const [nameValue, setNameValue] = useState('');
-	const [typeValue, setTypeValue] = useState('');
+	const [applicationValue, setApplicationValue] = useState('');
 	const [versionValue, setVersionValue] = useState('');
 
     const filteredModels =
         modelZooData.map((application) => (
             application.models.filter((model) => {
                 if ((versionValue == '') || (versionValue == model.version)){
-                    if ((typeValue == '') || (typeValue == application.key)){
+                    if ((applicationValue == '') || (applicationValue == application.key)){
                         return model.name.toLowerCase().includes(nameValue.toLowerCase());
                     }
                 }
@@ -120,8 +120,8 @@ export default function ModelNavigator(props) {
 
     };
 
-    const modelTypeFilterOnChange = (event) => {
-        setTypeValue(event.target.value);
+    const modelApplicationFilterOnChange = (event) => {
+        setApplicationValue(event.target.value);
     };
 
     const modelVersionFilterOnChange = (event) => {
@@ -158,17 +158,17 @@ export default function ModelNavigator(props) {
                                         <button value="" onClick={modelVersionFilterOnChange} > Clear </button>
                                     </div>
                                 </TreeItem>
-                                <TreeItem nodeId="Type" label="Type">
-                                    <div onChange={modelVersionFilterOnChange}>
-                                       <button disabled={typeValue=='CV.ACTION_RECOGNITION'} value= 'CV.ACTION_RECOGNITION' onClick={modelTypeFilterOnChange} > action_recognition </button>
-                                       <button disabled={typeValue=='CV.IMAGE_CLASSIFICATION'} value= 'CV.IMAGE_CLASSIFICATION' onClick={modelTypeFilterOnChange} > image_classification </button>
-                                       <button disabled={typeValue=='CV.INSTANCE_SEGMENTATION'} value= 'CV.INSTANCE_SEGMENTATION' onClick={modelTypeFilterOnChange} > instance_segmentation </button>
-                                       <button disabled={typeValue=='CV.OBJECT_DETECTION'} value= 'CV.OBJECT_DETECTION' onClick={modelTypeFilterOnChange} > object_detection </button>
-                                       <button disabled={typeValue=='CV.POSE_ESTIMATION'} value='CV.POSE_ESTIMATION' onClick={modelTypeFilterOnChange} > pose_estimation </button>
-                                       <button disabled={typeValue=='NLP.QUESTION_ANSWER'} value='NLP.QUESTION_ANSWER' onClick={modelTypeFilterOnChange} > question_answer </button>
-                                       <button disabled={typeValue=='NLP.SENTIMENT_ANALYSIS'} value='NLP.SENTIMENT_ANALYSIS' onClick={modelTypeFilterOnChange} > sentiment_analysis </button>
-                                       <button disabled={typeValue=='NLP.WORD_EMBEDDING'} value='NLP.WORD_EMBEDDING' onClick={modelTypeFilterOnChange} > word_embedding </button>
-                                       <button value='' onClick={modelTypeFilterOnChange} > Clear </button>
+                                <TreeItem nodeId="Application" label="Application">
+                                    <div onChange={modelApplicationFilterOnChange}>
+                                       <button disabled={applicationValue=='CV.ACTION_RECOGNITION'} value= 'CV.ACTION_RECOGNITION' onClick={modelApplicationFilterOnChange} > action_recognition </button>
+                                       <button disabled={applicationValue=='CV.IMAGE_CLASSIFICATION'} value= 'CV.IMAGE_CLASSIFICATION' onClick={modelApplicationFilterOnChange} > image_classification </button>
+                                       <button disabled={applicationValue=='CV.INSTANCE_SEGMENTATION'} value= 'CV.INSTANCE_SEGMENTATION' onClick={modelApplicationFilterOnChange} > instance_segmentation </button>
+                                       <button disabled={applicationValue=='CV.OBJECT_DETECTION'} value= 'CV.OBJECT_DETECTION' onClick={modelApplicationFilterOnChange} > object_detection </button>
+                                       <button disabled={applicationValue=='CV.POSE_ESTIMATION'} value='CV.POSE_ESTIMATION' onClick={modelApplicationFilterOnChange} > pose_estimation </button>
+                                       <button disabled={applicationValue=='NLP.QUESTION_ANSWER'} value='NLP.QUESTION_ANSWER' onClick={modelApplicationFilterOnChange} > question_answer </button>
+                                       <button disabled={applicationValue=='NLP.SENTIMENT_ANALYSIS'} value='NLP.SENTIMENT_ANALYSIS' onClick={modelApplicationFilterOnChange} > sentiment_analysis </button>
+                                       <button disabled={applicationValue=='NLP.WORD_EMBEDDING'} value='NLP.WORD_EMBEDDING' onClick={modelApplicationFilterOnChange} > word_embedding </button>
+                                       <button value='' onClick={modelApplicationFilterOnChange} > Clear </button>
                                     </div>
                                 </TreeItem>
                             </TreeView>

From e2dcf1b72614cd12ea3b515a30b56369d9f4be1a Mon Sep 17 00:00:00 2001
From: afeenster <afeenste@amazon.com>
Date: Wed, 31 Mar 2021 09:48:43 -0700
Subject: [PATCH 4/7] Loading the list of applications through the model zoo
 data.

---
 .../main/webapp/components/ModelNavigator.jsx | 19 +++++++++++--------
 1 file changed, 11 insertions(+), 8 deletions(-)

diff --git a/central/src/main/webapp/components/ModelNavigator.jsx b/central/src/main/webapp/components/ModelNavigator.jsx
index af152c75d5d..d238e46aed5 100644
--- a/central/src/main/webapp/components/ModelNavigator.jsx
+++ b/central/src/main/webapp/components/ModelNavigator.jsx
@@ -160,14 +160,17 @@ export default function ModelNavigator(props) {
                                 </TreeItem>
                                 <TreeItem nodeId="Application" label="Application">
                                     <div onChange={modelApplicationFilterOnChange}>
-                                       <button disabled={applicationValue=='CV.ACTION_RECOGNITION'} value= 'CV.ACTION_RECOGNITION' onClick={modelApplicationFilterOnChange} > action_recognition </button>
-                                       <button disabled={applicationValue=='CV.IMAGE_CLASSIFICATION'} value= 'CV.IMAGE_CLASSIFICATION' onClick={modelApplicationFilterOnChange} > image_classification </button>
-                                       <button disabled={applicationValue=='CV.INSTANCE_SEGMENTATION'} value= 'CV.INSTANCE_SEGMENTATION' onClick={modelApplicationFilterOnChange} > instance_segmentation </button>
-                                       <button disabled={applicationValue=='CV.OBJECT_DETECTION'} value= 'CV.OBJECT_DETECTION' onClick={modelApplicationFilterOnChange} > object_detection </button>
-                                       <button disabled={applicationValue=='CV.POSE_ESTIMATION'} value='CV.POSE_ESTIMATION' onClick={modelApplicationFilterOnChange} > pose_estimation </button>
-                                       <button disabled={applicationValue=='NLP.QUESTION_ANSWER'} value='NLP.QUESTION_ANSWER' onClick={modelApplicationFilterOnChange} > question_answer </button>
-                                       <button disabled={applicationValue=='NLP.SENTIMENT_ANALYSIS'} value='NLP.SENTIMENT_ANALYSIS' onClick={modelApplicationFilterOnChange} > sentiment_analysis </button>
-                                       <button disabled={applicationValue=='NLP.WORD_EMBEDDING'} value='NLP.WORD_EMBEDDING' onClick={modelApplicationFilterOnChange} > word_embedding </button>
+                                        {modelZooData.map((application) => (
+                                            <button
+                                                disabled={applicationValue == application.title}
+                                                value={application.title}
+                                                onClick={modelApplicationFilterOnChange}
+                                            >
+
+                                                {application.title}
+
+                                            </button>
+                                        ))}
                                        <button value='' onClick={modelApplicationFilterOnChange} > Clear </button>
                                     </div>
                                 </TreeItem>

From 13c2b4a7564be1f45ab390fe01de4a49901558de Mon Sep 17 00:00:00 2001
From: afeenster <afeenste@amazon.com>
Date: Thu, 1 Apr 2021 10:38:49 -0700
Subject: [PATCH 5/7] Loading the list of versions through the model zoo data.

---
 .../main/webapp/components/ModelNavigator.jsx | 20 ++++++++++++++++---
 1 file changed, 17 insertions(+), 3 deletions(-)

diff --git a/central/src/main/webapp/components/ModelNavigator.jsx b/central/src/main/webapp/components/ModelNavigator.jsx
index d238e46aed5..f8e0c01102b 100644
--- a/central/src/main/webapp/components/ModelNavigator.jsx
+++ b/central/src/main/webapp/components/ModelNavigator.jsx
@@ -102,6 +102,7 @@ export default function ModelNavigator(props) {
 	const [nameValue, setNameValue] = useState('');
 	const [applicationValue, setApplicationValue] = useState('');
 	const [versionValue, setVersionValue] = useState('');
+	const [versionList, setVersionList] = useState([]);
 
     const filteredModels =
         modelZooData.map((application) => (
@@ -128,6 +129,13 @@ export default function ModelNavigator(props) {
         setVersionValue(event.target.value);
     };
 
+    function handleAdd(version) {
+        if (versionList.includes(version) == false){
+            const newList = versionList;
+            setVersionList(newList.concat(version));
+        }
+      }
+
 	return (
 		<>
            <div className={classes.view_root}>
@@ -152,9 +160,15 @@ export default function ModelNavigator(props) {
                                 </TreeItem>
                                 <TreeItem nodeId="Version" label="Version">
                                     <div onChange={modelVersionFilterOnChange}>
-                                        <button disabled={versionValue=="0.0.1"} value="0.0.1" onClick={modelVersionFilterOnChange} > 0.0.1 </button>
-                                        <button disabled={versionValue=="0.0.2"} value="0.0.2" onClick={modelVersionFilterOnChange} > 0.0.2 </button>
-                                        <button disabled={versionValue=="0.0.3"} value="0.0.3" onClick={modelVersionFilterOnChange} > 0.0.3 </button>
+                                        {modelZooData.map((application) => (
+                                            application.models.map((model) => (
+                                                    handleAdd(model.version)
+                                            ))
+                                        ))}
+
+                                        {versionList.map((version) => (
+                                            <button disabled={versionValue==version} value={version} onClick={modelVersionFilterOnChange} > {version} </button>
+                                        ))}
                                         <button value="" onClick={modelVersionFilterOnChange} > Clear </button>
                                     </div>
                                 </TreeItem>

From 7c7286d180c6aeb074656df5151b797984331824 Mon Sep 17 00:00:00 2001
From: afeenster <afeenste@amazon.com>
Date: Thu, 1 Apr 2021 13:42:43 -0700
Subject: [PATCH 6/7] Using the Model Search tool as the main navigator for
 finding a model.

---
 .../main/webapp/components/ModelNavigator.jsx | 34 +++++++------------
 1 file changed, 12 insertions(+), 22 deletions(-)

diff --git a/central/src/main/webapp/components/ModelNavigator.jsx b/central/src/main/webapp/components/ModelNavigator.jsx
index f8e0c01102b..c4a26426343 100644
--- a/central/src/main/webapp/components/ModelNavigator.jsx
+++ b/central/src/main/webapp/components/ModelNavigator.jsx
@@ -141,6 +141,7 @@ export default function ModelNavigator(props) {
            <div className={classes.view_root}>
                 <div className={classes.navigator_root}>
                     <TreeView
+                        defaultExpanded={['Model Searching']}
                         defaultCollapseIcon={<ExpandMoreIcon />}
                         defaultExpandIcon={<ChevronRightIcon />}
                     >
@@ -189,36 +190,25 @@ export default function ModelNavigator(props) {
                                     </div>
                                 </TreeItem>
                             </TreeView>
-                            <TreeItem nodeId="Models" label="Models">
-                                <div>
-                                    <button onClick={modelFilterOnChange} > Search </button>
-                                    {modelList.map(application => (
-                                      application.map((model) => (
-                                          <TreeItem nodeId={model.name} label={model.name} onLabelClick={() => setModel(model)}>
-                                          </TreeItem>
-                                    ))))}
-                                </div>
-                            </TreeItem>
+                            <button onClick={modelFilterOnChange} > Search </button>
                         </TreeItem>
                     </TreeView>
-                </div>
-           </div>
 
-			<div className={classes.view_root}>
-				<div className={classes.navigator_root}>
 				<TreeView
 
 					defaultCollapseIcon={<ExpandMoreIcon />}
 					defaultExpandIcon={<ChevronRightIcon />}
 				>
-					{modelZooData.map((application) => (
-						<TreeItem nodeId={application.key} label={application.title}>
-							{application.models.map((model) => (
-								<TreeItem nodeId={model.name} label={model.name} onLabelClick={() => setModel(model)}>
-								</TreeItem>
-							))}
-						</TreeItem>
-					))}
+				    <TreeItem nodeId={'Models'} label={'Models'}></TreeItem>
+					<div>
+                        {modelList.map(application => (
+                            console.log(application),
+                            application.map((model) => (
+                                <TreeItem nodeId={model.name} label={model.name} onLabelClick={() => setModel(model)}>
+                                </TreeItem>
+                            ))
+                        ))}
+                    </div>
 
 				</TreeView>
 				</div>

From 356c83865bdf60d294fed05528d1496ddac5e774 Mon Sep 17 00:00:00 2001
From: afeenster <afeenste@amazon.com>
Date: Fri, 2 Apr 2021 12:29:42 -0700
Subject: [PATCH 7/7] Simple improvements acknowledging comments.

---
 .../main/webapp/components/ModelNavigator.jsx | 34 ++++++++++++-------
 1 file changed, 22 insertions(+), 12 deletions(-)

diff --git a/central/src/main/webapp/components/ModelNavigator.jsx b/central/src/main/webapp/components/ModelNavigator.jsx
index c4a26426343..f5b43078c8b 100644
--- a/central/src/main/webapp/components/ModelNavigator.jsx
+++ b/central/src/main/webapp/components/ModelNavigator.jsx
@@ -98,7 +98,7 @@ export default function ModelNavigator(props) {
 	const modelZooData = useFetch(URL);
 
 	const [model, setModel] = useState(null);
-	const [modelList, setModelList] = useState([]);
+	const [modelList, setModelList] = useState(modelZooData);
 	const [nameValue, setNameValue] = useState('');
 	const [applicationValue, setApplicationValue] = useState('');
 	const [versionValue, setVersionValue] = useState('');
@@ -190,7 +190,7 @@ export default function ModelNavigator(props) {
                                     </div>
                                 </TreeItem>
                             </TreeView>
-                            <button onClick={modelFilterOnChange} > Search </button>
+                            <button onClick={modelFilterOnChange} value={nameValue} > Search </button>
                         </TreeItem>
                     </TreeView>
 
@@ -199,16 +199,26 @@ export default function ModelNavigator(props) {
 					defaultCollapseIcon={<ExpandMoreIcon />}
 					defaultExpandIcon={<ChevronRightIcon />}
 				>
-				    <TreeItem nodeId={'Models'} label={'Models'}></TreeItem>
-					<div>
-                        {modelList.map(application => (
-                            console.log(application),
-                            application.map((model) => (
-                                <TreeItem nodeId={model.name} label={model.name} onLabelClick={() => setModel(model)}>
-                                </TreeItem>
-                            ))
-                        ))}
-                    </div>
+                    {nameValue != '' || versionValue!='' || applicationValue!=''
+                        ?<div>
+                           {
+                            modelList.map(application => (
+                                application.map((model) => (
+                                    <TreeItem nodeId={model.name} label={model.name} onLabelClick={() => setModel(model)}>
+                                    </TreeItem>
+                                ))
+                            ))}
+                        </div>
+                        :
+                          modelZooData.map((application) => (
+                            <TreeItem nodeId={application.key} label={application.title}>
+                                {application.models.map((model) => (
+                                    <TreeItem nodeId={model.name} label={model.name} onLabelClick={() => setModel(model)}>
+                                    </TreeItem>
+                                ))}
+                            </TreeItem>
+                          ))
+                    }
 
 				</TreeView>
 				</div>