Merge pull request #547 from ledpup/development

ledpup · web-flow · commit 5826158ccf79 · 2026-03-14T19:16:27.000+11:00
Refactor modals and improve UI consistency across components
diff --git a/ClimateExplorer.Web.Client/Pages/Index.razor b/ClimateExplorer.Web.Client/Pages/Index.razor
@@ -90,7 +90,7 @@
         Use the suggested charts to get started quickly, or <a href="#" @onclick="ShowAddDataSetModal">add data sets</a> to build custom views. The chevron (&gt;) expands or collapses parts of the site such as the suggested charts. Click the chevron to <a href="#" @onclick="suggestedChartsCollapsible!.CollapserOnClick">see more chart presets</a>.
     </p>
     <p>
-        The <a href="regionalandglobal">regional &amp; global</a> section has charts for global data such as greenhouse gases and the global temperature anomaly. Regional views include charts for the Arctic and Antarctic, the northern and southern hemispheres, and land and ocean.
+        The <a href="regionalandglobal">regional &amp; global</a> section has charts for global data such as greenhouse gases and regional charts like the Arctic and Antarctic sea ice.
     </p>
 </InfoPanel>
 
diff --git a/ClimateExplorer.Web.Client/Services/InfoPanelDismissalService.cs b/ClimateExplorer.Web.Client/Services/InfoPanelDismissalService.cs
@@ -11,8 +11,7 @@ public interface IInfoPanelDismissalService
 public class InfoPanelDismissalService : IInfoPanelDismissalService
 {
     private const string StorageKey = "infoPanelDismissals";
-    private static readonly TimeSpan SameVersionCooldown = TimeSpan.FromDays(365);
-    private static readonly TimeSpan NewVersionCooldown = TimeSpan.FromDays(90);
+    private static readonly TimeSpan Cooldown = TimeSpan.FromDays(365);
 
     private readonly ILocalStorageService localStorage;
 
@@ -35,10 +34,10 @@ public async Task<bool> ShouldShowAsync(string panelName, string version)
 
         if (entry.Version == version)
         {
-            return elapsed >= SameVersionCooldown;
+            return elapsed >= Cooldown;
         }
 
-        return elapsed >= NewVersionCooldown;
+        return true;
     }
 
     public async Task DismissAsync(string panelName, string version)
diff --git a/ClimateExplorer.Web.Client/Shared/ChartView.razor b/ClimateExplorer.Web.Client/Shared/ChartView.razor
@@ -39,11 +39,7 @@
                             <DropdownMenu>
                                 <DropdownItem Clicked="() => OnSelectedBinGranularityChanged(BinGranularities.ByYear)">Yearly</DropdownItem>
                                 <DropdownItem Clicked="() => OnSelectedBinGranularityChanged(BinGranularities.ByYearAndMonth)">Year + Month</DropdownItem>
-                                <DropdownItem Clicked="() => OnSelectedBinGranularityChanged(BinGranularities.ByYearAndWeek)">Year + Week</DropdownItem>
-                                <DropdownItem Clicked="() => OnSelectedBinGranularityChanged(BinGranularities.ByYearAndDay)">Year + Day</DropdownItem>
                                 <DropdownItem Clicked="() => OnSelectedBinGranularityChanged(BinGranularities.ByMonthOnly)">Month (ignoring year)</DropdownItem>
-                                <DropdownItem Clicked="() => OnSelectedBinGranularityChanged(BinGranularities.BySouthernHemisphereTemperateSeasonOnly)">Southern hemisphere temperate season only (ignoring year)</DropdownItem>
-                                <DropdownItem Clicked="() => OnSelectedBinGranularityChanged(BinGranularities.BySouthernHemisphereTropicalSeasonOnly)">Southern hemisphere tropical season only (ignoring year)</DropdownItem>
                             </DropdownMenu>
                         </Dropdown>
 
@@ -128,14 +124,6 @@
     <ChartOptionsContent />
 </InfoPanel>
 
-<Modal @ref="aggregationOptionsModal">
-    <ModalContent Size="ModalSize.Large">
-        <ModalHeader Class="custom-modal-header">
-            <ModalTitle>Aggregation options information</ModalTitle>
-            <CloseButton />
-        </ModalHeader>
-        <ModalBody>
-            <AggregationOptionsContent />
-        </ModalBody>
-    </ModalContent>
-</Modal>
+<InfoPanel @ref="aggregationOptionsInfoPanel" Title="Aggregation options information" Height="60vh">
+    <AggregationOptionsContent />
+</InfoPanel>
diff --git a/ClimateExplorer.Web.Client/Shared/ChartView.razor.cs b/ClimateExplorer.Web.Client/Shared/ChartView.razor.cs
@@ -31,7 +31,7 @@ public partial class ChartView
     private BinIdentifier? chartStartBin;
     private BinIdentifier? chartEndBin;
 
-    private Modal? aggregationOptionsModal;
+    private InfoPanel? aggregationOptionsInfoPanel;
     private InfoPanel? chartOptionsInfoPanel;
 
     private string? groupingThresholdText;
@@ -968,7 +968,7 @@ private Task ShowChartOptionsInfo()
 
     private Task ShowAggregationOptionsInfo()
     {
-        return aggregationOptionsModal!.Show();
+        return aggregationOptionsInfoPanel!.ShowAsync();
     }
 
     private SourceSeriesSpecification BuildSourceSeriesSpecification(DataSetLibraryEntry.SourceSeriesSpecification sss, IEnumerable<DataSetDefinitionViewModel> dataSetDefinitions)
diff --git a/ClimateExplorer.Web.Client/Shared/ChartView.razor.css b/ClimateExplorer.Web.Client/Shared/ChartView.razor.css
@@ -51,8 +51,7 @@
 
 ::deep .chart-controls .dropdown {
     text-decoration: none;
-    margin-bottom: 16px;
-    margin-right: 16px;
+    margin: 8px 16px 16px 8px;
     display: inline-block;
     top: -1px;
     border-radius: 8px;
@@ -79,10 +78,10 @@
     background-color: #f8f8f8;
     border-radius: 8px;
     margin-right: 16px;
+    margin-bottom: 16px;
     text-decoration: none;
     color: #425f59;
     cursor: pointer;
-    margin-bottom: 16px;
     display: inline-block;
     box-shadow: rgb(0 0 0 / 20%) 0px 0px 4px;
     vertical-align: baseline;
diff --git a/ClimateExplorer.Web.Client/Shared/LocationComponents/ChangeLocation.razor b/ClimateExplorer.Web.Client/Shared/LocationComponents/ChangeLocation.razor
@@ -5,8 +5,8 @@
 @using ClimateExplorer.WebApiClient.Services
 @using GeoCoordinatePortable
 
-<Modal @ref="modal">
-    <ModalContent Size="ModalSize.Large">
+<Modal @ref="modal" Size="ModalSize.Large">
+    <ModalContent>
         <ModalHeader Class="custom-modal-header">
             <ModalTitle>Change location</ModalTitle>
             <CloseButton />
diff --git a/ClimateExplorer.Web.Client/Shared/LocationComponents/ClimateStripe.razor b/ClimateExplorer.Web.Client/Shared/LocationComponents/ClimateStripe.razor
@@ -27,8 +27,8 @@
 
     @if (ShowInfo)
     {
-        <Modal @ref="popup">
-            <ModalContent Size="ModalSize.Large">
+        <Modal @ref="popup" Size="ModalSize.Large">
+            <ModalContent>
                 <ModalHeader Class="custom-modal-header">
                     <ModalTitle>Climate stripe</ModalTitle>
                     <CloseButton />
diff --git a/ClimateExplorer.Web.Client/Shared/OverviewField.razor b/ClimateExplorer.Web.Client/Shared/OverviewField.razor
@@ -18,8 +18,8 @@
 
 @if (PopupContent != null)
 {
-    <Modal @ref="popup" Closing="@OnModalClosing">
-        <ModalContent Size="ModalSize.Large">
+    <Modal @ref="popup" Closing="@OnModalClosing" Size="ModalSize.Large">
+        <ModalContent>
             <ModalHeader Class="custom-modal-header">
                 <ModalTitle>
                     @(string.IsNullOrWhiteSpace(PopupTitle) ? Label : PopupTitle)

Original file line number	Diff line number	Diff line change
`@@ -11,8 +11,7 @@ public interface IInfoPanelDismissalService`
`11`	`11`	`public class InfoPanelDismissalService : IInfoPanelDismissalService`
`12`	`12`	`{`
`13`	`13`	`private const string StorageKey = "infoPanelDismissals";`
`14`		`- private static readonly TimeSpan SameVersionCooldown = TimeSpan.FromDays(365);`
`15`		`- private static readonly TimeSpan NewVersionCooldown = TimeSpan.FromDays(90);`
	`14`	`+ private static readonly TimeSpan Cooldown = TimeSpan.FromDays(365);`
`16`	`15`
`17`	`16`	`private readonly ILocalStorageService localStorage;`
`18`	`17`
`@@ -35,10 +34,10 @@ public async Task<bool> ShouldShowAsync(string panelName, string version)`
`35`	`34`
`36`	`35`	`if (entry.Version == version)`
`37`	`36`	`{`
`38`		`- return elapsed >= SameVersionCooldown;`
	`37`	`+ return elapsed >= Cooldown;`
`39`	`38`	`}`
`40`	`39`
`41`		`- return elapsed >= NewVersionCooldown;`
	`40`	`+ return true;`
`42`	`41`	`}`
`43`	`42`
`44`	`43`	`public async Task DismissAsync(string panelName, string version)`
Original file line number	Diff line number	Diff line change
`@@ -31,7 +31,7 @@ public partial class ChartView`
`31`	`31`	`private BinIdentifier? chartStartBin;`
`32`	`32`	`private BinIdentifier? chartEndBin;`
`33`	`33`
`34`		`- private Modal? aggregationOptionsModal;`
	`34`	`+ private InfoPanel? aggregationOptionsInfoPanel;`
`35`	`35`	`private InfoPanel? chartOptionsInfoPanel;`
`36`	`36`
`37`	`37`	`private string? groupingThresholdText;`
`@@ -968,7 +968,7 @@ private Task ShowChartOptionsInfo()`
`968`	`968`
`969`	`969`	`private Task ShowAggregationOptionsInfo()`
`970`	`970`	`{`
`971`		`- return aggregationOptionsModal!.Show();`
	`971`	`+ return aggregationOptionsInfoPanel!.ShowAsync();`
`972`	`972`	`}`
`973`	`973`
`974`	`974`	`private SourceSeriesSpecification BuildSourceSeriesSpecification(DataSetLibraryEntry.SourceSeriesSpecification sss, IEnumerable<DataSetDefinitionViewModel> dataSetDefinitions)`