Categories hierarchy : Fix #411 (#418)

* categories hierarchy

* remove code smell

* category hierarchy style (IsAbstract and IsDeprecated)

* fix test

* code coverage

* code coverage

* css isolation

* eof

* css isolation

* change hierarchy direction

* using inside namespace

* update diagram hierarchy when a category is updated

COMETwebapp.Tests/Components/ReferenceData/CategoriesTableTestFixture.cs

@@ -47,6 +47,7 @@ namespace COMETwebapp.Tests.Components.ReferenceData
     using COMETwebapp.Components.ReferenceData;
     using COMETwebapp.Services.ShowHideDeprecatedThingsService;
     using COMETwebapp.ViewModels.Components.ReferenceData;
+    using COMETwebapp.ViewModels.Components.ReferenceData.Rows;
     using COMETwebapp.Wrappers;
 
     using DevExpress.Blazor;
@@ -160,9 +161,13 @@ public void SetUp()
 
             this.elementDefinitionCategory1 = new Category(Guid.NewGuid(), this.assembler.Cache, this.uri) { Name = "Batteries", ShortName = "BAT" };
             this.elementDefinitionCategory1.PermissibleClass.Add(ClassKind.ElementDefinition);
-            this.siteReferenceDataLibrary.DefinedCategory.Add(this.elementDefinitionCategory1);
             this.elementDefinitionCategory2 = new Category(Guid.NewGuid(), this.assembler.Cache, this.uri) { Name = "Reaction Wheels", ShortName = "RW", IsDeprecated = true };
             this.elementDefinitionCategory2.PermissibleClass.Add(ClassKind.ElementDefinition);
+
+            this.elementDefinitionCategory1.SuperCategory.Add(this.elementDefinitionCategory2);
+            this.elementDefinitionCategory2.SuperCategory.Add(this.elementDefinitionCategory1);
+
+            this.siteReferenceDataLibrary.DefinedCategory.Add(this.elementDefinitionCategory1);
             this.siteReferenceDataLibrary.DefinedCategory.Add(this.elementDefinitionCategory2);
 
             this.iteration = new Iteration(Guid.NewGuid(), this.assembler.Cache, this.uri)
@@ -406,5 +411,27 @@ public async Task VerifyAddingCategory()
             CDPMessageBus.Current.SendMessage(new ObjectChangedEvent(this.viewModel.Category, EventKind.Added));
             Assert.That(this.viewModel.Rows.Count, Is.EqualTo(2));
         }
+
+        [Test]
+        public async Task VerifyDisplayCategoryDiagram()
+        {
+            var renderer = this.context.RenderComponent<CategoriesTable>();
+
+            await renderer.InvokeAsync(() => this.viewModel.SelectCategory(new CategoryRowViewModel(this.elementDefinitionCategory1)));
+
+            await TaskHelper.WaitWhileAsync(() => this.viewModel.IsLoading);
+
+            this.viewModel.CategoryHierarchyDiagramViewModel.SelectedCategory = this.elementDefinitionCategory1;
+            this.viewModel.CategoryHierarchyDiagramViewModel.Rows = this.elementDefinitionCategory1.SuperCategory;
+            this.viewModel.CategoryHierarchyDiagramViewModel.SubCategories = this.elementDefinitionCategory1.SuperCategory;
+
+            await renderer.InvokeAsync(() => this.viewModel.CategoryHierarchyDiagramViewModel.SetupDiagram());            
+
+            Assert.Multiple(() =>
+            {
+                Assert.That(this.viewModel.CategoryHierarchyDiagramViewModel.Rows.Count, Is.EqualTo(1));
+                Assert.That(this.viewModel.CategoryHierarchyDiagramViewModel.SubCategories.Count, Is.EqualTo(1));
+            });
+        }
     }
 }

COMETwebapp/COMETwebapp.csproj

@@ -23,6 +23,7 @@
         <PackageReference Include="System.Drawing.Primitives" Version="4.3.0" />
         <PackageReference Include="Microsoft.AspNetCore.Components.WebAssembly" Version="7.0.4" />
         <PackageReference Include="Microsoft.AspNetCore.Components.WebAssembly.DevServer" Version="7.0.4" PrivateAssets="all" />
+        <PackageReference Include="Z.Blazor.Diagrams" Version="2.1.6" />
     </ItemGroup>
 
     <ItemGroup>

COMETwebapp/Components/ReferenceData/CategoriesTable.razor

@@ -25,8 +25,10 @@ Copyright (c) 2023 RHEA System S.A.
 @inherits DisposableComponent
 
 <LoadingComponent IsVisible="@this.ViewModel.IsLoading">
+<div style="display: flex; justify-content: space-between; background-color: rgb(176,176,176)" >
 <DxGrid @ref="Grid"
         Data="this.ViewModel.Rows.Items"
+        ColumnResizeMode="GridColumnResizeMode.ColumnsContainer"
         ShowSearchBox="true"
         ShowAllRows="true"
         SearchBoxNullText="Search for a category..."
@@ -35,6 +37,9 @@ Copyright (c) 2023 RHEA System S.A.
         PopupEditFormHeaderText="Create Category"
         EditMode="GridEditMode.PopupEditForm"
         EditModelSaving="this.ViewModel.AddingCategory"
+        RowClick="((e) =>this.ViewModel.SelectCategory((CategoryRowViewModel)e.Grid.GetDataItem(e.VisibleIndex)))"
+        AllowSelectRowByClick="true"
+        SelectionMode="GridSelectionMode.Single"
         CustomizeElement="DisableDeprecatedCategories">
     <Columns>
         <DxGridDataColumn FieldName="@nameof(CategoryRowViewModel.Name)" MinWidth="150" />
@@ -101,6 +106,12 @@ Copyright (c) 2023 RHEA System S.A.
         </DxFormLayout>
     </EditFormTemplate>
 </DxGrid>
+
+    </div>
+    <div style="width:100%; height:100%;">
+        <h4>Categories Hierarchy</h4>
+        <CategoryHierarchyDiagram ViewModel="this.ViewModel.CategoryHierarchyDiagramViewModel" />
+    </div>
 <DxPopup @bind-Visible="@this.ViewModel.IsOnDeprecationMode" HeaderText="Please confirm" Width="auto" CloseOnOutsideClick="false">
     @this.ViewModel.ConfirmationMessageDialog
     <div class="dxbl-grid-confirm-dialog-buttons">

COMETwebapp/Components/ReferenceData/CategoryHierarchyDiagram.razor

@@ -0,0 +1,25 @@
+<!------------------------------------------------------------------------------
+Copyright (c) 2023 RHEA System S.A.
+
+    Authors: Justine Veirier d'aiguebonne, Sam Gerené, Alex Vorobiev, Alexander van Delft, Nabil Abbar
+
+    This file is part of COMET WEB Community Edition
+     The COMET WEB Community Edition is the RHEA Web Application implementation of ECSS-E-TM-10-25 Annex A and Annex C.
+
+    The COMET WEB Community Edition is free software; you can redistribute it and/or
+    modify it under the terms of the GNU Affero General Public
+    License as published by the Free Software Foundation; either
+    version 3 of the License, or (at your option) any later version.
+
+    The COMET WEB Community Edition is distributed in the hope that it will be useful,
+    but WITHOUT ANY WARRANTY; without even the implied warranty of
+    MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU
+    Affero General Public License for more details.
+
+    You should have received a copy of the GNU Affero General Public License
+    along with this program. If not, see http://www.gnu.org/licenses/.
+------------------------------------------------------------------------------->
+
+<CascadingValue Value="this.ViewModel.Diagram">
+        <DiagramCanvas></DiagramCanvas>
+</CascadingValue>

COMETwebapp/Components/ReferenceData/CategoryHierarchyDiagram.razor.cs

@@ -0,0 +1,77 @@
+// --------------------------------------------------------------------------------------------------------------------
+// <copyright file="CategoryHierarchyDiagram.razor.cs" company="RHEA System S.A.">
+//    Copyright (c) 2023 RHEA System S.A.
+//
+//    Authors: Sam Gerené, Alex Vorobiev, Alexander van Delft, Jaime Bernar, Nabil Abbar
+//
+//    This file is part of COMET WEB Community Edition
+//    The COMET WEB Community Edition is the RHEA Web Application implementation of ECSS-E-TM-10-25 Annex A and Annex C.
+//
+//    The COMET WEB Community Edition is free software; you can redistribute it and/or
+//    modify it under the terms of the GNU Affero General Public
+//    License as published by the Free Software Foundation; either
+//    version 3 of the License, or (at your option) any later version.
+//
+//    The COMET WEB Community Edition is distributed in the hope that it will be useful,
+//    but WITHOUT ANY WARRANTY; without even the implied warranty of
+//    MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the GNU
+//    Affero General Public License for more details.
+//
+//    You should have received a copy of the GNU Affero General Public License
+//    along with this program.  If not, see <http://www.gnu.org/licenses/>.
+// </copyright>
+// --------------------------------------------------------------------------------------------------------------------
+
+namespace COMETwebapp.Components.ReferenceData
+{
+    using COMETwebapp.ViewModels.Components.ReferenceData;
+
+    using Blazor.Diagrams.Core;
+    using Blazor.Diagrams.Core.Models;
+
+    using Microsoft.AspNetCore.Components;
+
+    /// <summary>
+    ///     Support class for the <see cref="ParameterTypeTable"/>
+    /// </summary>
+    public partial class CategoryHierarchyDiagram
+    {
+        /// <summary>
+        ///     The <see cref="ICategoryHierarchyDiagramViewModel" /> for the component
+        /// </summary>
+        [Parameter]
+        public ICategoryHierarchyDiagramViewModel ViewModel { get; set; }
+
+        /// <summary>
+        /// Method invoked when the component is ready to start, having received its
+        /// initial parameters from its parent in the render tree.
+        /// </summary>
+        protected override void OnInitialized()
+        {
+            base.OnInitialized();
+
+            var options = new DiagramOptions
+            {
+                DefaultNodeComponent = null, // Default component for nodes
+                AllowMultiSelection = false,
+                Links = new DiagramLinkOptions
+                {
+                    Factory = (diagram, sourcePort) =>
+                    {
+                        return new LinkModel(sourcePort, null)
+                        {
+                            Router = Routers.Orthogonal,
+                            PathGenerator = PathGenerators.Straight,
+                        };
+                    }
+                },
+                Zoom = new DiagramZoomOptions
+                {
+                    Enabled = false,
+                },
+            };
+            this.ViewModel.Diagram = new Diagram(options);
+            this.ViewModel.Diagram.RegisterModelComponent<CategoryNode, CategoryNodeComponent>();
+        }
+    }
+}

COMETwebapp/Components/ReferenceData/CategoryNode.cs

@@ -0,0 +1,52 @@
+// --------------------------------------------------------------------------------------------------------------------
+// <copyright file="CategoryNode.cs" company="RHEA System S.A.">
+//    Copyright (c) 2023 RHEA System S.A.
+//
+//    Authors: Sam Gerené, Alex Vorobiev, Alexander van Delft, Jaime Bernar, Nabil Abbar
+//
+//    This file is part of COMET WEB Community Edition
+//    The COMET WEB Community Edition is the RHEA Web Application implementation of ECSS-E-TM-10-25 Annex A and Annex C.
+//
+//    The COMET WEB Community Edition is free software; you can redistribute it and/or
+//    modify it under the terms of the GNU Affero General Public
+//    License as published by the Free Software Foundation; either
+//    version 3 of the License, or (at your option) any later version.
+//
+//    The COMET WEB Community Edition is distributed in the hope that it will be useful,
+//    but WITHOUT ANY WARRANTY; without even the implied warranty of
+//    MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the GNU
+//    Affero General Public License for more details.
+//
+//    You should have received a copy of the GNU Affero General Public License
+//    along with this program.  If not, see <http://www.gnu.org/licenses/>.
+// </copyright>
+// --------------------------------------------------------------------------------------------------------------------
+using Blazor.Diagrams.Core.Geometry;
+using Blazor.Diagrams.Core.Models;
+
+using CDP4Common.SiteDirectoryData;
+
+
+namespace COMETwebapp.Components.ReferenceData
+{
+    /// <summary>
+    ///     represent the Category diagram node
+    /// </summary>
+    public class CategoryNode : NodeModel
+    {
+        /// <summary>
+        /// Initializes a new instance of the <see cref="CategoryNode" /> class.
+        /// </summary>
+        /// <param name="category">The <see cref="Category" /></param>
+        /// <param name="position">The <see cref="Point" /></param>
+        public CategoryNode(Category category, Point position = null) : base(position, RenderLayer.HTML)
+        {
+            this.Category = category;
+        }
+
+        /// <summary>
+        /// Get or set the <see cref="Category" />
+        /// </summary>
+        public Category Category { get; set; }
+    }
+}

COMETwebapp/Components/ReferenceData/CategoryNodeComponent.razor

@@ -0,0 +1,44 @@
+<!------------------------------------------------------------------------------
+Copyright (c) 2023 RHEA System S.A.
+
+    Authors: Justine Veirier d'aiguebonne, Sam Gerené, Alex Vorobiev, Alexander van Delft, Nabil Abbar
+
+    This file is part of COMET WEB Community Edition
+     The COMET WEB Community Edition is the RHEA Web Application implementation of ECSS-E-TM-10-25 Annex A and Annex C.
+
+    The COMET WEB Community Edition is free software; you can redistribute it and/or
+    modify it under the terms of the GNU Affero General Public
+    License as published by the Free Software Foundation; either
+    version 3 of the License, or (at your option) any later version.
+
+    The COMET WEB Community Edition is distributed in the hope that it will be useful,
+    but WITHOUT ANY WARRANTY; without even the implied warranty of
+    MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU
+    Affero General Public License for more details.
+
+    You should have received a copy of the GNU Affero General Public License
+    along with this program. If not, see http://www.gnu.org/licenses/.
+------------------------------------------------------------------------------->
+@using Blazor.Diagrams.Components.Renderers;
+
+<div class="card @(Node.Category.IsDeprecated ? "dotted" : "")" style="width: auto; text-align:center;">
+    <div class="card-body">
+        @if (Node.Category.IsAbstract)
+        {
+            <h5 class="card-title">
+                <i>@Node.Category.Name</i>
+            </h5>
+        }
+        else
+        {
+            <h5 class="card-title">
+                <b>@Node.Category.Name</b>
+            </h5>
+        }
+    </div>
+
+    @foreach (var port in Node.Ports)
+    {
+        <PortRenderer Port="port" />
+    }
+</div>

COMETwebapp/Components/ReferenceData/CategoryNodeComponent.razor.cs

@@ -0,0 +1,39 @@
+// --------------------------------------------------------------------------------------------------------------------
+// <copyright file="CategoryNodeComponent.razor.cs" company="RHEA System S.A.">
+//    Copyright (c) 2023 RHEA System S.A.
+//
+//    Authors: Sam Gerené, Alex Vorobiev, Alexander van Delft, Jaime Bernar, Nabil Abbar
+//
+//    This file is part of COMET WEB Community Edition
+//    The COMET WEB Community Edition is the RHEA Web Application implementation of ECSS-E-TM-10-25 Annex A and Annex C.
+//
+//    The COMET WEB Community Edition is free software; you can redistribute it and/or
+//    modify it under the terms of the GNU Affero General Public
+//    License as published by the Free Software Foundation; either
+//    version 3 of the License, or (at your option) any later version.
+//
+//    The COMET WEB Community Edition is distributed in the hope that it will be useful,
+//    but WITHOUT ANY WARRANTY; without even the implied warranty of
+//    MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the GNU
+//    Affero General Public License for more details.
+//
+//    You should have received a copy of the GNU Affero General Public License
+//    along with this program.  If not, see <http://www.gnu.org/licenses/>.
+// </copyright>
+// --------------------------------------------------------------------------------------------------------------------
+namespace COMETwebapp.Components.ReferenceData
+{
+    using Microsoft.AspNetCore.Components;
+
+    /// <summary>
+    ///     Support class for the <see cref="CategoryNodeComponent"/>
+    /// </summary>
+    public partial class CategoryNodeComponent
+    {
+        /// <summary>
+        ///     The <see cref="CategoryNode" /> for the component
+        /// </summary>
+        [Parameter]
+        public CategoryNode Node { get; set; }
+    }
+}

COMETwebapp/Components/ReferenceData/CategoryNodeComponent.razor.css

@@ -0,0 +1,3 @@
+.card.dotted {
+    border: 2px dotted #000;
+}

COMETwebapp/Components/ReferenceData/ParameterTypeTable.razor

@@ -20,6 +20,7 @@ Copyright (c) 2023 RHEA System S.A.
 <LoadingComponent IsVisible="@this.ViewModel.IsLoading">
     <DxGrid @ref="Grid"
             Data="this.ViewModel.Rows.Items"
+            ColumnResizeMode="GridColumnResizeMode.ColumnsContainer"
             ShowSearchBox="true"
             ShowAllRows="true"
             SearchBoxNullText="Search for a parameter type..."