From 32c5de1d3a341d9b6a7f0978a49020e73f0c1ac6 Mon Sep 17 00:00:00 2001 From: vik378 Date: Tue, 5 Mar 2024 20:53:47 +0100 Subject: [PATCH] minor UI improvements --- capella_model_explorer/frontend/src/App.jsx | 6 ++-- .../frontend/src/components/Card.jsx | 2 +- .../frontend/src/components/InstanceView.jsx | 11 +++--- .../src/components/TemplateDetails.jsx | 36 ++++++++++++------- .../frontend/src/components/TemplateView.jsx | 31 ++++++++++++++++ .../frontend/tailwind.config.js | 7 ++-- 6 files changed, 69 insertions(+), 24 deletions(-) create mode 100644 capella_model_explorer/frontend/src/components/TemplateView.jsx diff --git a/capella_model_explorer/frontend/src/App.jsx b/capella_model_explorer/frontend/src/App.jsx index 351bd54..17480b1 100644 --- 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() { } /> - } /> - } /> + } /> + } /> ) diff --git a/capella_model_explorer/frontend/src/components/Card.jsx b/capella_model_explorer/frontend/src/components/Card.jsx index ab9a62d..0d99a1f 100644 --- 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}) => (
+ 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}
); diff --git a/capella_model_explorer/frontend/src/components/InstanceView.jsx b/capella_model_explorer/frontend/src/components/InstanceView.jsx index b2d4499..9defd31 100644 --- 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 (
;
) return ( -
+
{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 index 9ae9a50..0da9cd4 100644 --- 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 ( -
+
+ Back to template selection
{details.name}

{details.description}

+ setFilterText(e.target.value)} + placeholder="Filter objects" + className="mb-3 p-2 border rounded" + />
-
+
{details.objects && details.objects.length === 0 &&

No objects found

} - {details.objects && details.objects.length > 0 && details.objects.map(object => ( - navigate(`/templates/${template_id}/${object.idx}`)} + {details.objects && details.objects.length > 0 && details.objects.filter(object => object.name.toLowerCase().includes(filterText.toLowerCase())).map(object => ( +
{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'} > -
-
+
+
{object.name}
- +
))}
diff --git a/capella_model_explorer/frontend/src/components/TemplateView.jsx b/capella_model_explorer/frontend/src/components/TemplateView.jsx new file mode 100644 index 0000000..3fc16da --- /dev/null +++ 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 ( +
+
+ +
+
+ { !!!objectID &&

Select an Instance

} + { objectID && } + +
+
+ ) +} \ No newline at end of file diff --git a/capella_model_explorer/frontend/tailwind.config.js b/capella_model_explorer/frontend/tailwind.config.js index 7d5b24a..780e065 100644 --- 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: [], } -