minor UI improvements

DSD-DBS · Mar 5, 2024 · 32c5de1 · 32c5de1
1 parent 3b2262b
commit 32c5de1
Show file tree

Hide file tree

Showing 6 changed files with 69 additions and 24 deletions.
diff --git a/capella_model_explorer/frontend/src/App.jsx b/capella_model_explorer/frontend/src/App.jsx
@@ -4,7 +4,7 @@ import viteLogo from '/vite.svg'
 import './App.css'
 import { BrowserRouter as Router, Route, Routes } from 'react-router-dom'
 import { WiredTemplatesList } from './components/WiredTemplatesList'
-import { TemplateDetails } from './components/TemplateDetails'
+import { TemplateView } from './components/TemplateView'
 import { InstanceView } from './components/InstanceView'
 
 
@@ -15,8 +15,8 @@ function App() {
     <Router>
       <Routes>
         <Route path="/templates" element={<WiredTemplatesList endpoint="http://localhost:8000/api/templates" />} />
-        <Route path="/templates/:templateName" element={<TemplateDetails endpoint="http://localhost:8000/api/templates/" />} />
-        <Route path="/templates/:templateName/:objectID" element={<InstanceView endpoint="http://localhost:8000/api/templates/" />} />
+        <Route path="/templates/:templateName" element={<TemplateView endpoint="http://localhost:8000/api/templates/" />} />
+        <Route path="/templates/:templateName/:objectID" element={<TemplateView endpoint="http://localhost:8000/api/templates/" />} />
       </Routes>
     </Router>
   )

diff --git a/capella_model_explorer/frontend/src/components/Card.jsx b/capella_model_explorer/frontend/src/components/Card.jsx
@@ -2,7 +2,7 @@ import React from 'react';
 
 export const Card = ({children, onClick}) => (
     <div onClick={onClick}
-    className='max-w-sm bg-white rounded-lg border border-gray-200 shadow-md m-4 cursor-pointer hover:bg-gray-100 dark:hover:bg-gray-700 dark:bg-gray-800 dark:border-gray-700'>
+    className='max-w-sm bg-white rounded-lg border border-gray-200 shadow-md m-2 cursor-pointer hover:bg-gray-100 dark:hover:bg-gray-700 dark:bg-gray-800 dark:border-gray-700'>
         {children}
     </div>
     );
diff --git a/capella_model_explorer/frontend/src/components/InstanceView.jsx b/capella_model_explorer/frontend/src/components/InstanceView.jsx
@@ -1,13 +1,13 @@
-import React, {useEffect, useState} from 'react';
+import React, {useEffect, useState, useRef} from 'react';
 import { useParams } from 'react-router-dom';
 import { Spinner } from './Spinner';
 import { SVGDisplay } from './SVGDisplay';
 
 
-export const InstanceView = ({endpoint}) => {
-    let { templateName, objectID } = useParams();
+export const InstanceView = ({templateName, objectID, endpoint}) => {
     const [details, setDetails] = useState([]);
     const [loading, setLoading] = useState(true);
+    const contentRef = useRef(null);
 
     useEffect(() => {
         const url = endpoint + `${templateName}/${objectID}`;
@@ -33,15 +33,16 @@ export const InstanceView = ({endpoint}) => {
             });
             setDetails(contentItems);
             setLoading(false);
+            if (contentRef.current) contentRef.current.scrollIntoView();
         })
         .catch((error) => {
             setLoading(false);
             setDetails("Error fetching data ", error);
         });
-    }, [endpoint]);
+    }, [endpoint, objectID, templateName]);
     if (loading) return (<div><Spinner />;</div>)
     return (
-    <div className='html-content bg-white shadow-lg mx-auto my-8 p-8 w-[210mm] max-w-full overflow-auto print:shadow-none print:m-0 print:p-0 print:bg-transparent'>
+    <div ref={contentRef} className='html-content bg-white shadow-lg dark:shadow-white dark:text-gray-700 mx-auto my-8 p-8 w-[210mm] max-w-full overflow-auto print:shadow-none print:m-0 print:p-0 print:bg-transparent'>
         {details.map((item, idx) => {
             if (item.type === "SVGDisplay") {
                 return (

diff --git a/capella_model_explorer/frontend/src/components/TemplateDetails.jsx b/capella_model_explorer/frontend/src/components/TemplateDetails.jsx
@@ -1,18 +1,18 @@
 import React, {useEffect, useState} from 'react';
-import { useLocation } from 'react-router-dom';
+import { useParams } from 'react-router-dom';
 import { useNavigate } from 'react-router-dom';
 import { Card } from './Card';
 
 export const TemplateDetails = ({endpoint}) => {
-    const location = useLocation();
-    const template_id = location.state.idx;
+    let { templateName, objectID } = useParams();
     const [details, setDetails] = useState([]);
     const navigate = useNavigate();
+    const [filterText, setFilterText] = useState('');
 
     useEffect(() => {
         const fetchDetails = async () => {
             try {
-                const response = await fetch(endpoint + template_id, {
+                const response = await fetch(endpoint + templateName, {
                     method: 'GET',
                     headers: {
                         'Content-Type': 'application/json'
@@ -25,28 +25,38 @@ export const TemplateDetails = ({endpoint}) => {
             finally {}
         };
         fetchDetails();
-    }, [endpoint]);
+        console.log(objectID)
+    }, [endpoint, objectID]);
 
     return (
-    <div>
+    <div className='flex flex-col h-screen'>
+        <a href='/templates' className='flex-initial p-4'>Back to template selection</a>
         <div className='p-5'>
             <h5 className='mb-2 text-2xl font-bold text-gray-900 dark:text-white'>
                 {details.name}
             </h5>
             <p className='mb-3 font-normal text-gray-700 dark:text-white'>{details.description}</p>
+            <input
+                type="text"
+                value={filterText}
+                onChange={(e) => setFilterText(e.target.value)}
+                placeholder="Filter objects"
+                className="mb-3 p-2 border rounded"
+            />
         </div>
-        <div className='flex flex-wrap justify-center items-center'>
+        <div className='flex flex-wrap justify-center items-center overflow-auto'>
             {details.objects && details.objects.length === 0 && <p>No objects found</p>}
-            {details.objects && details.objects.length > 0 && details.objects.map(object => (
-                <Card key={object.idx}
-                    onClick={() => navigate(`/templates/${template_id}/${object.idx}`)}
+            {details.objects && details.objects.length > 0 && details.objects.filter(object => object.name.toLowerCase().includes(filterText.toLowerCase())).map(object => (
+                <div key={object.idx}
+                    onClick={() => {navigate(`/templates/${templateName}/${object.idx}`);}}
+                    className={'bg-white dark:bg-gray-800 ' + (objectID && object.idx === objectID ? 'bg-blue-800 dark:bg-blue-800 text-white' : '') + ' max-w-sm  rounded-lg border border-gray-200 shadow-md m-2 cursor-pointer hover:bg-gray-100 dark:hover:bg-gray-700 dark:border-gray-700'}
                 >
-                    <div className='p-4'>
-                        <h5 className='text-lg font-bold text-gray-900 dark:text-white'>
+                    <div className='p-2'>
+                        <h5 className='text-md font-bold text-gray-900 dark:text-white'>
                             {object.name}
                         </h5>
                     </div>
-                </Card>
+                </div>
             ))}
         </div>
     </div>

diff --git a/capella_model_explorer/frontend/src/components/TemplateView.jsx b/capella_model_explorer/frontend/src/components/TemplateView.jsx
@@ -0,0 +1,31 @@
+/*
+
+In this component we show list of template instances, and when we click on a template, we show the rendered instance next to the list. If no imnstance is selected we show a hint to select one.
+
+*/
+
+import React, {useEffect, useState} from 'react';
+import { TemplateDetails } from './TemplateDetails';
+import { useLocation, useParams, Navigate } from 'react-router-dom';
+import { InstanceView } from './InstanceView';
+
+export const TemplateView = ({endpoint}) => {
+    let { templateName, objectID } = useParams();
+    const location = useLocation();
+
+    useEffect(() => {
+    }, [endpoint, templateName, objectID, location]);
+
+    return (
+        <div className='flex flex-row h-screen'>
+            <div className='flex-initial p-4' style={{ flexBasis: '24%'}}>
+                <TemplateDetails endpoint={endpoint} />
+            </div>
+            <div className='flex-auto p-4 overflow-auto h-full' style={{minWidth: 0}}>
+                { !!!objectID && <p>Select an Instance</p>}
+                { objectID && <InstanceView endpoint={endpoint} objectID={objectID} templateName={templateName} /> }
+
+            </div>
+        </div>
+    )
+}
diff --git a/capella_model_explorer/frontend/tailwind.config.js b/capella_model_explorer/frontend/tailwind.config.js
@@ -4,8 +4,11 @@ export default {
     './src/**/*.{html,js,jsx}'
   ],
   theme: {
-    extend: {},
+    extend: {
+      boxShadow: {
+        white: '0 0 15px rgba(255, 255, 255, 0.1)',
+      }
+    }
   },
   plugins: [],
 }
-