Update layout and naming within traceview

dfuchss · dfuchss · commit b74f7df3b450 · 2025-10-07T22:05:38.000+02:00
diff --git a/LICENSE b/LICENSE
@@ -1,6 +1,6 @@
 MIT License
 
-Copyright (c) 2024 ArDoCo
+Copyright (c) 2024 - 2025 ardoco
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -17,6 +17,7 @@
     "next": "^15.3.3",
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
+    "react-icons": "^5.5.0",
     "react-resizable-panels": "^2.1.7",
     "uuid": "^11.1.0"
   },
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
@@ -13,8 +13,8 @@ const inter = Inter({subsets: ['latin']});
 
 
 export const metadata: Metadata = { // those metadatas are the ones that are used for every page in the application. They can be overridden on a page by page basis.
-    title: ' ArDoCo TraceView 2',
-    description: 'Is a web application for ARDoCo to visualize tracelinks and inconsistencies between software architecture models and documentation.',
+    title: ' ARDoCo TraceView',
+    description: 'Is a web application for ardoco to visualize tracelinks and inconsistencies between software architecture models and documentation.',
     icons: {
         icon: '/ardoco-logo.png',
     }
diff --git a/src/app/page.tsx b/src/app/page.tsx
@@ -30,7 +30,7 @@ function HeroContent() {
     return (
         <div className="text-center">
             <h1 className="text-balance text-5xl font-semibold tracking-tight text-gray-900 sm:text-7xl">
-                ArDoCo Trace View
+                ARDoCo Trace View
             </h1>
             <div className="mt-10 flex items-center justify-center gap-x-6">
                 <Link
@@ -40,7 +40,7 @@ function HeroContent() {
                     Start
                 </Link>
                 <Link href="https://ardoco.de/" className=" font-semibold text-black-600 hover:text-black">
-                    About ArDoCo <span>→</span>
+                    About <span>→</span>
                 </Link>
             </div>
         </div>
@@ -50,33 +50,37 @@ function HeroContent() {
 // About Section Component
 function AboutSection() {
     return (
-        <div className="flex items-center justify-center gap-x-6 dark:text-white px-12 pb-12 lg:px-16 flex-col">
-            <h2 className="text-left py-4 text-xl self-start">ArDoCo - Architecture Documentation Consistency</h2>
-            <p className="py-2">
-                In this research project, we aim to provide consistency analyses between different kinds of
-                documentation, namely formal models and informal (textual) documentation.
-            </p>
-            <p className="py-2">
-                Documenting the architecture of a software system is important, especially to capture reasoning
-                and design decisions. A lot of tacit knowledge is easily lost when the documentation is
-                incomplete, resulting in threats for the software system’s success and increased costs. However,
-                software architecture documentation is often missing or outdated. One explanation for this
-                phenomenon is the tedious and costly process of creating documentation in comparison to
-                (perceived) low beneﬁts. With our project, we want to step forward in our long-term vision,
-                where we plan to persist information from any sources, e.g., from whiteboard discussions, to
-                avoid losing crucial information about a system. A core problem in this vision is the possible
-                inconsistency of information from different sources. A major challenge of ensuring consistency
-                is the consistency between formal artefacts, i.e., models, and informal documentation. We plan to
-                address consistency analyses between models and textual natural language artefacts using natural
-                language understanding and plan to include knowledge bases to improve these analyses. After
-                extracting information out of the natural language documents, we plan to create traceability
-                links and check whether statements within the textual documentation are consistent with the
-                software architecture models.
-            </p>
-            <p className="py-2">
-                ArDoCo is actively developed by researchers of the Modelling for Continuous Software Engineering
-                (MCSE) group of KASTEL - Institute of Information Security and Dependability at the KIT.
-            </p>
+        <div className="flex justify-center dark:text-white px-6 sm:px-12 pb-12 lg:px-16">
+            <div className="w-full max-w-5xl text-left bg-gray-100/70 dark:bg-gray-800/60 rounded-lg p-6 sm:p-8 shadow-sm">
+                <h2 className="py-4 text-xl">ARDoCo - Automating Requirements and Documentation Comprehension</h2>
+                <p className="py-2">
+                    In this research project, we aim to provide consistency analyses between different kinds of
+                    documentation, namely formal models and informal (textual) documentation.
+                </p>
+                <p className="py-2">
+                    Documenting the architecture of a software system is important, especially to capture reasoning
+                    and design decisions. A lot of tacit knowledge is easily lost when the documentation is
+                    incomplete, resulting in threats for the software system’s success and increased costs. However,
+                    software architecture documentation is often missing or outdated. One explanation for this
+                    phenomenon is the tedious and costly process of creating documentation in comparison to
+                    (perceived) low beneﬁts. With our project, we want to step forward in our long-term vision,
+                    where we plan to persist information from any sources, e.g., from whiteboard discussions, to
+                    avoid losing crucial information about a system. A core problem in this vision is the possible
+                    inconsistency of information from different sources. A major challenge of ensuring consistency
+                    is the consistency between formal artefacts, i.e., models, and informal documentation. We plan to
+                    address consistency analyses between models and textual natural language artefacts using natural
+                    language understanding and plan to include knowledge bases to improve these analyses. After
+                    extracting information out of the natural language documents, we plan to create traceability
+                    links and check whether statements within the textual documentation are consistent with the
+                    software architecture models.
+                </p>
+                <p className="py-2">
+                    ARDoCo is actively developed by researchers of the{' '}
+                    <Link href="https://mcse.kastel.kit.edu/" className="underline underline-offset-2 hover:opacity-80">Modelling for Continuous Software Engineering</Link>
+                    {' '}group of KASTEL - Institute of Information Security and Dependability at the{' '}
+                    <Link href="https://www.kit.edu/" className="underline underline-offset-2 hover:opacity-80">KIT</Link>.
+                </p>
+            </div>
         </div>
     );
 }
diff --git a/src/app/view/[id]/page.tsx b/src/app/view/[id]/page.tsx
@@ -39,7 +39,7 @@ const pollForResult = async (apiAddress: string, id: string, signal: AbortSignal
             return data;
         } else if (data.status !== "ACCEPTED") {
             // Throw an error with the message from the server
-            throw new Error("An error occurred while running the pipeline in ArDoCo: \n" + data.message);
+            throw new Error("An error occurred while running the pipeline in ardoco: \n" + data.message);
         }
 
         // Keep polling
diff --git a/src/components/EditApiAddressModal.tsx b/src/components/EditApiAddressModal.tsx
@@ -59,7 +59,7 @@ export default function EditApiAddressModal({isOpen, onClose}: EditApiAddressMod
                         </DialogTitle>
                         <div className="mt-4">
                             <p className="text-sm text-gray-600">
-                                Enter the base URL for the ArDoCo REST API.
+                                Enter the base URL for the ardoco REST API.
                             </p>
                             <input
                                 type="url"
diff --git a/src/components/NavBar.tsx b/src/components/NavBar.tsx
@@ -8,20 +8,21 @@ import {useApiAddressContext} from "@/contexts/ApiAddressContext";
 import EditApiAddressModal from "@/components/EditApiAddressModal";
 import {useNavigation} from "@/contexts/NavigationContext";
 import clsx from "clsx";
+import { FaGithub, FaRegQuestionCircle } from "react-icons/fa";
 
-// Navigation menu items
+// Navigation menu items (icons can be defined per item)
 const navigation = [
     {name: 'New Project', href: '/new-project'},
     {name: 'Load Project', href: '/load-project'},
-    {name: 'About', href: 'https://ardoco.de/'},
-    {name: 'GitHub', href: 'https://github.com/ArDoCo'},
+    {name: 'About', href: 'https://ardoco.de/', icon: FaRegQuestionCircle},
+    {name: 'GitHub', href: 'https://github.com/ardoco', icon: FaGithub},
 ];
 
-interface ArDoCoLogoProps {
+interface ArdocoLogoProps {
     onClick: (href: string, event: any) => void;
 }
 
-export function ArDoCoLogo({onClick}: ArDoCoLogoProps) {
+export function ArdocoLogo({onClick}: ArdocoLogoProps) {
     const href = "/";
 
     const handleClick = (event: any) => {
@@ -35,7 +36,7 @@ export function ArDoCoLogo({onClick}: ArDoCoLogoProps) {
             onClick={handleClick}
         >
             <img
-                alt="ArDoCo Logo"
+                alt="ARDoCo logo"
                 src="/ardoco-logo.png"
                 className={clsx(`w-auto h-3/4`)}
             />
@@ -60,7 +61,7 @@ export default function NavBar() {
                 <nav aria-label="Global" className="flex items-center justify-between p-3 lg:px-8 h-24">
                     {/* Logo */}
                     <div className="flex lg:flex-1">
-                        <ArDoCoLogo onClick={onClickNavigation}/>
+                        <ArdocoLogo onClick={onClickNavigation}/>
                     </div>
 
                     {/* Mobile Menu Button */}
@@ -76,7 +77,7 @@ export default function NavBar() {
                     </div>
 
                     {/* Desktop Navigation */}
-                    <div className="hidden lg:flex lg:gap-x-12">
+                    <div className="hidden lg:flex lg:gap-x-6">
 
                         {/* Styled API Address Display */}
                         <div
@@ -90,14 +91,26 @@ export default function NavBar() {
                             </button>
                         </div>
 
-                        {navigation.map((item) => (
-                            <a key={item.name}
-                               href={item.href}
-                               onClick={(e) => onClickNavigation(item.href, e)}
-                               className="py-2 text-sm font-semibold text-white">
-                                {item.name}
-                            </a>
-                        ))}
+                        {navigation.map((item) => {
+                            const Icon = (item as any).icon;
+                            return (
+                                <a
+                                    key={item.name}
+                                    href={item.href}
+                                    onClick={(e) => onClickNavigation(item.href, e)}
+                                    className="py-2 text-sm font-semibold text-white hover:opacity-90"
+                                >
+                                    {Icon ? (
+                                        <>
+                                            <Icon className="h-5 w-5" aria-hidden="true" />
+                                            <span className="sr-only">{item.name}</span>
+                                        </>
+                                    ) : (
+                                        item.name
+                                    )}
+                                </a>
+                            );
+                        })}
                     </div>
                 </nav>
 
@@ -114,7 +127,7 @@ export default function NavBar() {
                     <DialogPanel
                         className="fixed inset-y-0 right-0 z-50 w-full max-w-sm bg-white px-6 py-6 sm:ring-1 sm:ring-gray-900/10">
                         <div className="flex items-center justify-between">
-                            <ArDoCoLogo onClick={onClickNavigation}/>
+                            <ArdocoLogo onClick={onClickNavigation}/>
                             <button
                                 type="button"
                                 onClick={() => setMobileMenuOpen(false)}
@@ -126,15 +139,19 @@ export default function NavBar() {
                         </div>
                         <div className="mt-6">
                             <div className="space-y-2">
-                                {navigation.map((item) => (
-                                    <a
-                                        key={item.name}
-                                        href={item.href}
-                                        className="block rounded-lg px-3 py-2 text-base font-semibold text-gray-900 hover:bg-gray-50"
-                                    >
-                                        {item.name}
-                                    </a>
-                                ))}
+                                {navigation.map((item) => {
+                                    const Icon = (item as any).icon;
+                                    return (
+                                        <a
+                                            key={item.name}
+                                            href={item.href}
+                                            className="block rounded-lg px-3 py-2 text-base font-semibold text-gray-900 hover:bg-gray-50"
+                                        >
+                                            {Icon && <Icon className="h-5 w-5 inline-block mr-2" aria-hidden="true" />}
+                                            <span>{item.name}</span>
+                                        </a>
+                                    );
+                                })}
                             </div>
                         </div>
                     </DialogPanel>
diff --git a/src/components/dataTypes/TraceLinkTypes.tsx b/src/components/dataTypes/TraceLinkTypes.tsx
@@ -29,7 +29,7 @@ export const TraceLinkTypes: Record<string, TraceLinkType> = {
         name: "SWATTR",
         alternative_name: "sad-sam",
         api_name: "SWATTR",
-        info: "Finds traceLinks between the Software Architecture Documentation (SAD) and the uploaded Software Architecture Model (SAM)",
+        info: "Finds trace links between the Software Architecture Documentation (SAD) and the uploaded Software Architecture Model (SAM)",
         checkCondition: (uploadedFiles: UploadedFile[]) =>
             hasArchitectureDocumentation(uploadedFiles) && hasArchitectureModel(uploadedFiles),
         providedFiles: [FileType.DOCUMENTATION, FileType.ARCHITECTURE_MODEL_PCM, FileType.ARCHITECTURE_MODEL_UML],
@@ -39,7 +39,7 @@ export const TraceLinkTypes: Record<string, TraceLinkType> = {
         name: "ArDoCode",
         alternative_name: "sad-code",
         api_name: "ArDoCode",
-        info: "Finds traceLinks between the Software Architecture Documentation (SAD) and the uploaded code",
+        info: "Finds trace links between the Software Architecture Documentation (SAD) and the uploaded code",
         checkCondition: (uploadedFiles: UploadedFile[]) =>
             hasArchitectureDocumentation(uploadedFiles) && hasCodeModel(uploadedFiles),
         providedFiles: [FileType.DOCUMENTATION, FileType.CODE_MODEL],
@@ -49,7 +49,7 @@ export const TraceLinkTypes: Record<string, TraceLinkType> = {
         name: "ArCoTL",
         alternative_name: "sam-code",
         api_name: "ArCoTL",
-        info: "Finds traceLinks between the Software Architecture Model (SAM) and the uploaded code",
+        info: "Finds trace links between the Software Architecture Model (SAM) and the uploaded code",
         checkCondition: (uploadedFiles: UploadedFile[]) =>
             hasArchitectureModel(uploadedFiles) && hasCodeModel(uploadedFiles),
         providedFiles: [FileType.ARCHITECTURE_MODEL_PCM, FileType.ARCHITECTURE_MODEL_UML, FileType.CODE_MODEL],
diff --git a/src/components/inputComponents/InconsistencyCheckbox.tsx b/src/components/inputComponents/InconsistencyCheckbox.tsx
@@ -36,7 +36,7 @@ export default function InconsistencyCheckbox({checked, onChange, disabled}: Inc
                 title={"Inconsistencies"}
                 descriptionToRender={
                     <div>
-                        <p>When selected, ArDoCo additionally finds inconsistencies between the documentation and the
+                        <p>When selected, ardoco additionally finds inconsistencies between the documentation and the
                             architecture model.</p>
                         <p className="mt-2">An inconsistency can be:</p>
                         <ul className="list-disc list-inside pl-2">
diff --git a/src/components/multiStepForm/MultiStepFormLoadProject.tsx b/src/components/multiStepForm/MultiStepFormLoadProject.tsx
@@ -20,7 +20,7 @@ function MultiStepFormLoadProject() {
     const steps: Step[] = [{
         stepperLabel: "Upload Files",
         title: "Upload the Project Files and TraceLinks",
-        description: "Upload your existing project files and the JSON file containing the traceLinks.",
+        description: "Upload your existing project files and the JSON file containing the trace links.",
         validation: () => FormValidation.validateExistingProject(formData.projectName, formData.selectedTraceLinkType?.name || null, formData.files),
     },];
 
diff --git a/src/components/multiStepForm/MultiStepFormNewProject.tsx b/src/components/multiStepForm/MultiStepFormNewProject.tsx
diff --git a/src/components/traceLinksResultViewer/views/tracelinks/TracelinkViewer.tsx b/src/components/traceLinksResultViewer/views/tracelinks/TracelinkViewer.tsx
diff --git a/src/components/traceLinksResultViewer/views/tracelinks/parser/TraceLinkParser.tsx b/src/components/traceLinksResultViewer/views/tracelinks/parser/TraceLinkParser.tsx
diff --git a/src/util/ArdocoApi.tsx b/src/util/ArdocoApi.tsx

Original file line number	Diff line number	Diff line change
`@@ -13,8 +13,8 @@ const inter = Inter({subsets: ['latin']});`
`13`	`13`
`14`	`14`
`15`	`15`	`export const metadata: Metadata = { // those metadatas are the ones that are used for every page in the application. They can be overridden on a page by page basis.`
`16`		`- title: ' ArDoCo TraceView 2',`
`17`		`- description: 'Is a web application for ARDoCo to visualize tracelinks and inconsistencies between software architecture models and documentation.',`
	`16`	`+ title: ' ARDoCo TraceView',`
	`17`	`+ description: 'Is a web application for ardoco to visualize tracelinks and inconsistencies between software architecture models and documentation.',`
`18`	`18`	`icons: {`
`19`	`19`	`icon: '/ardoco-logo.png',`
`20`	`20`	`}`
Original file line number	Diff line number	Diff line change
`@@ -39,7 +39,7 @@ const pollForResult = async (apiAddress: string, id: string, signal: AbortSignal`
`39`	`39`	`return data;`
`40`	`40`	`} else if (data.status !== "ACCEPTED") {`
`41`	`41`	`// Throw an error with the message from the server`
`42`		`- throw new Error("An error occurred while running the pipeline in ArDoCo: \n" + data.message);`
	`42`	`+ throw new Error("An error occurred while running the pipeline in ardoco: \n" + data.message);`
`43`	`43`	`}`
`44`	`44`
`45`	`45`	`// Keep polling`