Improve gas analyzer interface (#22779)

Content.Client/Atmos/UI/GasAnalyzerWindow.xaml.cs

@@ -241,6 +241,10 @@ namespace Content.Client.Atmos.UI
             {
                 Orientation = BoxContainer.LayoutOrientation.Vertical
             };
+            var tablePercent = new BoxContainer
+            {
+                Orientation = BoxContainer.LayoutOrientation.Vertical
+            };
             dataContainer.AddChild(new BoxContainer
             {
                 Orientation = BoxContainer.LayoutOrientation.Horizontal,
@@ -252,7 +256,13 @@ namespace Content.Client.Atmos.UI
                         MinSize = new Vector2(10, 0),
                         HorizontalExpand = true
                     },
-                    tableVal
+                    tableVal,
+                    new Control
+                    {
+                        MinSize = new Vector2(10, 0),
+                        HorizontalExpand = true
+                    },
+                    tablePercent
                 }
             });
             // This is the gas bar thingy
@@ -260,6 +270,7 @@ namespace Content.Client.Atmos.UI
             var gasBar = new SplitBar
             {
                 MinHeight = height,
+                MinBarSize = new Vector2(12, 0)
             };
             // Separator
             dataContainer.AddChild(new Control
@@ -274,6 +285,17 @@ namespace Content.Client.Atmos.UI
                 totalGasAmount += gas.Amount;
             }
 
+            tableKey.AddChild(new Label
+                { Text = Loc.GetString("gas-analyzer-window-gas-column-name"), Align = Label.AlignMode.Center });
+            tableVal.AddChild(new Label
+                { Text = Loc.GetString("gas-analyzer-window-molarity-column-name"), Align = Label.AlignMode.Center });
+            tablePercent.AddChild(new Label
+                { Text = Loc.GetString("gas-analyzer-window-percentage-column-name"), Align = Label.AlignMode.Center });
+
+            tableKey.AddChild(new StripeBack());
+            tableVal.AddChild(new StripeBack());
+            tablePercent.AddChild(new StripeBack());
+
             for (var j = 0; j < gasMix.Gases.Length; j++)
             {
                 var gas = gasMix.Gases[j];
@@ -286,10 +308,14 @@ namespace Content.Client.Atmos.UI
                 tableVal.AddChild(new Label
                 {
                     Text = Loc.GetString("gas-analyzer-window-molarity-text",
-                        ("mol", $"{gas.Amount:0.##}"),
+                        ("mol", $"{gas.Amount:0.00}")),
-                        ("percentage", $"{(gas.Amount / totalGasAmount * 100):0.#}")),
                     Align = Label.AlignMode.Right,
-                    HorizontalExpand = true
+                });
+                tablePercent.AddChild(new Label
+                {
+                    Text = Loc.GetString("gas-analyzer-window-percentage-text",
+                        ("percentage", $"{(gas.Amount / totalGasAmount * 100):0.0}")),
+                    Align = Label.AlignMode.Right
                 });
 
                 // Add to the gas bar //TODO: highlight the currently hover one

Content.Client/UserInterface/Controls/SplitBar.xaml.cs

@@ -9,6 +9,8 @@ namespace Content.Client.UserInterface.Controls
     [GenerateTypedNameReferences]
     public partial class SplitBar : BoxContainer
     {
+        public Vector2 MinBarSize = new(24, 0);
+
         public SplitBar()
         {
             RobustXamlLoader.Load(this);
@@ -33,7 +35,7 @@ namespace Content.Client.UserInterface.Controls
                     PaddingLeft = 2f,
                     PaddingRight = 2f,
                 },
-                MinSize = new Vector2(24, 0)
+                MinSize = MinBarSize
             });
         }
     }

Content.Server/Atmos/EntitySystems/GasAnalyzerSystem.cs

@@ -1,3 +1,4 @@
+using System.Linq;
 using Content.Server.Atmos;
 using Content.Server.Atmos.Components;
 using Content.Server.NodeContainer;
@@ -23,6 +24,11 @@ namespace Content.Server.Atmos.EntitySystems
         [Dependency] private readonly UserInterfaceSystem _userInterface = default!;
         [Dependency] private readonly TransformSystem _transform = default!;
 
+        /// <summary>
+        /// Minimum moles of a gas to be sent to the client.
+        /// </summary>
+        private const float UIMinMoles = 0.01f;
+
         public override void Initialize()
         {
             base.Initialize();
@@ -254,7 +260,7 @@ namespace Content.Server.Atmos.EntitySystems
             {
                 var gas = _atmo.GetGas(i);
 
-                if (mixture?.Moles[i] <= Atmospherics.GasMinMoles)
+                if (mixture?.Moles[i] <= UIMinMoles)
                     continue;
 
                 if (mixture != null)
@@ -264,7 +270,9 @@ namespace Content.Server.Atmos.EntitySystems
                 }
             }
 
-            return gases.ToArray();
+            var gasesOrdered = gases.OrderByDescending(gas => gas.Amount);
+
+            return gasesOrdered.ToArray();
         }
     }
 }

Resources/Locale/en-US/atmos/gas-analyzer-component.ftl

@@ -16,7 +16,11 @@ gas-analyzer-window-pressure-text = Pressure:
 gas-analyzer-window-pressure-val-text = {$pressure} kPa
 gas-analyzer-window-temperature-text = Temperature:
 gas-analyzer-window-temperature-val-text = {$tempK}K ({$tempC}°C)
-gas-analyzer-window-molarity-text = {$mol} mol ({$percentage}%)
+gas-analyzer-window-gas-column-name = Gas
+gas-analyzer-window-molarity-column-name = mol
+gas-analyzer-window-percentage-column-name = %
+gas-analyzer-window-molarity-text = {$mol}
+gas-analyzer-window-percentage-text = {$percentage}
 gas-analyzer-window-molarity-percentage-text = {$gasName}: {$amount} mol ({$percentage}%)
 
 # Used for GasEntry.ToString()