fix: viewer layout and bugs (#70)

* fix: default show when first loading * fix: viewer page layout * fix: infinite render loop in FLuentCheckBox
kahojyun · Sep 20, 2023 · 3cc0f08 · 3cc0f08
1 parent e703e82
commit 3cc0f08
Show file tree

Hide file tree

Showing 7 changed files with 71 additions and 28 deletions.
diff --git a/src/Qynit.PulseGen.Server/Pages/Index.razor b/src/Qynit.PulseGen.Server/Pages/Index.razor
@@ -1,10 +1,12 @@
 @page "/"
 
-<div class="box">
-    <div class="aside">
+<div class="container">
+    <div class="settings">
         <FluentButton @onclick="ClearPlots">Clear</FluentButton>
         <FluentSwitch @bind-Value="DefaultShow">Default Show</FluentSwitch>
-        <FluentDataGrid Items="@FilteredTraces">
+    </div>
+    <div class="list">
+        <FluentDataGrid Items="@FilteredTraces" GenerateHeader="GenerateHeaderOption.Sticky" Virtualize>
             <PropertyColumn Property="@(p => p.Name)" Sortable="true">
                 <ColumnOptions>
                     <FluentSearch @bind-Value="_nameFilter" />
@@ -15,12 +17,12 @@
                     <TriCheckbox @bind-Value="AnyVisible" Indeterminate="IsIndeterminate">Show</TriCheckbox>
                 </HeaderCellItemTemplate>
                 <ChildContent>
-                    <FluentCheckbox @bind-Value="@context.Visible" />
+                    <input type="checkbox" @bind="context.Visible" />
                 </ChildContent>
             </TemplateColumn>
         </FluentDataGrid>
     </div>
-    <div class="plot">
+    <div class="viewer">
         <WaveformViewer Names="VisibleTraceNames" PlotService="PlotService" />
     </div>
 </div>
diff --git a/src/Qynit.PulseGen.Server/Pages/Index.razor.cs b/src/Qynit.PulseGen.Server/Pages/Index.razor.cs
@@ -40,7 +40,7 @@ private bool AnyVisible
     protected override void OnInitialized()
     {
         var names = PlotService.GetNames();
-        Traces = names.Select(x => new Trace { Name = x, Visible = true }).ToList();
+        Traces = names.Select(x => new Trace { Name = x, Visible = DefaultShow }).ToList();
         PlotService.PlotUpdate += OnPlotUpdate;
     }
 

diff --git a/src/Qynit.PulseGen.Server/Pages/Index.razor.css b/src/Qynit.PulseGen.Server/Pages/Index.razor.css
@@ -1,16 +1,40 @@
-.box {
-  display: flex;
-  flex-flow: row;
+/* From designer */
+
+.container {
+  display: grid;
+  grid-template-columns: auto 1fr;
+  grid-template-rows: auto 1fr;
+  gap: 0px 0px;
+  grid-auto-flow: row;
+  grid-template-areas:
+    "settings viewer"
+    "list viewer";
+}
+
+.list {
+  grid-area: list;
+}
+
+.viewer {
+  grid-area: viewer;
+}
+
+.settings {
+  grid-area: settings;
+}
+
+/* Additional */
+
+.container {
   height: 100%;
 }
 
-.aside {
-  flex: 0 1 auto;
+.settings {
   display: flex;
   flex-flow: column;
   align-items: flex-start;
 }
 
-.plot {
-  flex: 1 1 auto;
+.list {
+  overflow: auto;
 }
diff --git a/src/Qynit.PulseGen.Server/Shared/MainLayout.razor b/src/Qynit.PulseGen.Server/Shared/MainLayout.razor
@@ -7,7 +7,7 @@
         <FluentAnchor Href="/" Appearance="Appearance.Neutral">Waveform Viewer</FluentAnchor>
         <FluentAnchor Href="/license" Appearance="Appearance.Hypertext">License</FluentAnchor>
     </div>
-    <main>
+    <main class="contents">
         <ErrorBoundary>
             <ChildContent>
                 @Body

diff --git a/src/Qynit.PulseGen.Server/Shared/MainLayout.razor.css b/src/Qynit.PulseGen.Server/Shared/MainLayout.razor.css
@@ -1,25 +1,28 @@
 .page {
-  display: flex;
-  flex-direction: column;
   height: 100vh;
+  display: grid;
+  grid-template-columns: 1fr;
+  grid-template-rows: 3.5rem calc(100vh - 3.5rem);
+  gap: 0px 0px;
+  grid-auto-flow: row;
+  grid-template-areas:
+    "siteheader"
+    "contents";
 }
 
 .siteheader {
-  flex: 0 1 auto;
+  grid-area: siteheader;
   background-color: var(--neutral-layer-4);
   border-bottom: calc(var(--stroke-width) * 3px) solid var(--accent-fill-rest);
   justify-content: flex-start;
-  height: 3.5rem;
   display: flex;
   align-items: center;
   white-space: nowrap;
   padding-left: 1.5rem;
   gap: 10px;
 }
 
-main {
-  height: 100%;
-  flex: 1 1 auto;
-  /*    background-color: var(--neutral-layer-1);
-    color: var(--neutral-foreground-rest);*/
+.contents {
+  grid-area: contents;
+  overflow: auto;
 }
diff --git a/src/Qynit.PulseGen.Server/Shared/TriCheckbox.razor b/src/Qynit.PulseGen.Server/Shared/TriCheckbox.razor
@@ -1 +1,4 @@
-<FluentCheckbox @bind-Value:get="Value" @bind-Value:set="ValueChanged" @ref="_checkbox">@ChildContent</FluentCheckbox>
+<label>
+    <input type="checkbox" @bind="CurrentValue" @ref="_checkbox" />
+    @ChildContent
+</label>
diff --git a/src/Qynit.PulseGen.Server/Shared/TriCheckbox.razor.cs b/src/Qynit.PulseGen.Server/Shared/TriCheckbox.razor.cs
@@ -1,6 +1,4 @@
 using Microsoft.AspNetCore.Components;
-
-using Microsoft.Fast.Components.FluentUI;
 using Microsoft.JSInterop;
 
 namespace Qynit.PulseGen.Server.Shared;
@@ -22,16 +20,29 @@ public sealed partial class TriCheckbox : IAsyncDisposable
     [Inject]
     private IJSRuntime JS { get; set; } = default!;
 
+    private bool CurrentValue
+    {
+        get => Value;
+        set
+        {
+            if (value != Value)
+            {
+                Value = value;
+                _ = ValueChanged.InvokeAsync(value);
+            }
+        }
+    }
+
     private IJSObjectReference? _module;
-    private FluentCheckbox? _checkbox;
+    private ElementReference? _checkbox;
     protected override async Task OnAfterRenderAsync(bool firstRender)
     {
         if (firstRender)
         {
             _module = await JS.ImportComponentModule<TriCheckbox>();
         }
 
-        var checkbox = _checkbox?.Element;
+        var checkbox = _checkbox;
         if (_module is not null && checkbox is not null)
         {
             await _module.InvokeVoidAsync("setIndeterminate", checkbox, Indeterminate);