Render units of parameters in upstanding latex

Fixes issue #856

Author: jbtronics

assets/controllers/pages/latex_preview_controller.js

@@ -25,9 +25,20 @@ import "katex/dist/katex.css";
 export default class extends Controller {
     static targets = ["input", "preview"];
 
+    static values = {
+        unit: {type: Boolean, default: false} //Render as upstanding (non-italic) text, useful for units
+    }
+
     updatePreview()
     {
-        katex.render(this.inputTarget.value, this.previewTarget, {
+        let value = "";
+        if (this.unitValue) {
+            value = "\\mathrm{" + this.inputTarget.value + "}";
+        } else {
+            value = this.inputTarget.value;
+        }
+
+        katex.render(value, this.previewTarget, {
             throwOnError: false,
         });
     }

assets/css/app/helpers.css

@@ -111,4 +111,11 @@ ul.structural_link li a:hover {
 .permission-checkbox:checked {
     background-color: var(--bs-success);
     border-color: var(--bs-success);
+}
+
+/***********************************************
+ * Katex rendering with same height as text
+ ***********************************************/
+.katex-same-height-as-text .katex {
+    font-size: 1.0em;
 }

src/Entity/Parameters/AbstractParameter.php

@@ -208,7 +208,7 @@ public function getElement(): ?AbstractDBElement
      */
     #[Groups(['parameter:read', 'full'])]
     #[SerializedName('formatted')]
-    public function getFormattedValue(): string
+    public function getFormattedValue(bool $latex_formatted = false): string
     {
         //If we just only have text value, return early
         if (null === $this->value_typical && null === $this->value_min && null === $this->value_max) {
@@ -218,19 +218,19 @@ public function getFormattedValue(): string
         $str = '';
         $bracket_opened = false;
         if ($this->value_typical) {
-            $str .= $this->getValueTypicalWithUnit();
+            $str .= $this->getValueTypicalWithUnit($latex_formatted);
             if ($this->value_min || $this->value_max) {
                 $bracket_opened = true;
                 $str .= ' (';
             }
         }
 
         if ($this->value_max && $this->value_min) {
-            $str .= $this->getValueMinWithUnit().' ... '.$this->getValueMaxWithUnit();
+            $str .= $this->getValueMinWithUnit($latex_formatted).' ... '.$this->getValueMaxWithUnit($latex_formatted);
         } elseif ($this->value_max) {
-            $str .= 'max. '.$this->getValueMaxWithUnit();
+            $str .= 'max. '.$this->getValueMaxWithUnit($latex_formatted);
         } elseif ($this->value_min) {
-            $str .= 'min. '.$this->getValueMinWithUnit();
+            $str .= 'min. '.$this->getValueMinWithUnit($latex_formatted);
         }
 
         //Add closing bracket
@@ -344,25 +344,25 @@ public function getValueTypical(): ?float
     /**
      * Return a formatted version with the minimum value with the unit of this parameter.
      */
-    public function getValueTypicalWithUnit(): string
+    public function getValueTypicalWithUnit(bool $with_latex = false): string
     {
-        return $this->formatWithUnit($this->value_typical);
+        return $this->formatWithUnit($this->value_typical, with_latex: $with_latex);
     }
 
     /**
      * Return a formatted version with the maximum value with the unit of this parameter.
      */
-    public function getValueMaxWithUnit(): string
+    public function getValueMaxWithUnit(bool $with_latex = false): string
     {
-        return $this->formatWithUnit($this->value_max);
+        return $this->formatWithUnit($this->value_max, with_latex: $with_latex);
     }
 
     /**
      * Return a formatted version with the typical value with the unit of this parameter.
      */
-    public function getValueMinWithUnit(): string
+    public function getValueMinWithUnit(bool $with_latex = false): string
     {
-        return $this->formatWithUnit($this->value_min);
+        return $this->formatWithUnit($this->value_min, with_latex: $with_latex);
     }
 
     /**
@@ -441,11 +441,18 @@ public function setValueText(string $value_text): self
     /**
      * Return a string representation and (if possible) with its unit.
      */
-    protected function formatWithUnit(float $value, string $format = '%g'): string
+    protected function formatWithUnit(float $value, string $format = '%g', bool $with_latex = false): string
     {
         $str = sprintf($format, $value);
         if ($this->unit !== '') {
-            return $str.' '.$this->unit;
+
+            if (!$with_latex) {
+                $unit = $this->unit;
+            } else {
+                $unit = '$\mathrm{'.$this->unit.'}$';
+            }
+
+            return $str.' '.$unit;
         }
 
         return $str;

templates/form/filter_types_layout.html.twig

@@ -54,7 +54,7 @@
         <td class="col-sm-2">{{ form_widget(form.name, {"attr": {"data-pages--parameters-autocomplete-target": "name"}}) }}</td>
         <td {{ stimulus_controller('pages/latex_preview') }}>{{ form_widget(form.symbol, {"attr": {"data-pages--parameters-autocomplete-target": "symbol", "data-pages--latex-preview-target": "input"}}) }}<span {{ stimulus_target('pages/latex_preview', 'preview') }}></span></td>
         <td>{{ form_widget(form.value) }}</td>
-        <td {{ stimulus_controller('pages/latex_preview') }}>{{ form_widget(form.unit, {"attr": {"data-pages--parameters-autocomplete-target": "unit", "data-pages--latex-preview-target": "input"}}) }}<span {{ stimulus_target('pages/latex_preview', 'preview') }}></span></td>
+        <td {{ stimulus_controller('pages/latex_preview', {"unit": true}) }}>{{ form_widget(form.unit, {"attr": {"data-pages--parameters-autocomplete-target": "unit", "data-pages--latex-preview-target": "input"}}) }}<span {{ stimulus_target('pages/latex_preview', 'preview') }}></span></td>
         <td>{{ form_widget(form.value_text) }}</td>
         <td>
             <button type="button" class="btn btn-danger btn-sm" {{ collection.delete_btn() }} title="{% trans %}orderdetail.delete{% endtrans %}">

templates/helper.twig

@@ -218,14 +218,16 @@
         <thead>
         <tr>
             <th>{% trans %}specifications.property{% endtrans %}</th>
+            <th>{% trans %}specifications.symbol{% endtrans %}</th>
             <th>{% trans %}specifications.value{% endtrans %}</th>
         </tr>
         </thead>
         <tbody>
         {% for param in parameters %}
             <tr>
-                <td>{{ param.name }} {% if param.symbol is not empty %}<span class="latex" data-controller="common--latex">${{ param.symbol }}$</span>{% endif %}</td>
-                <td>{{ param.formattedValue }}</td>
+                <td>{{ param.name }}</td>
+                <td>{% if param.symbol is not empty %}<span class="latex" {{ stimulus_controller('common/latex') }}>${{ param.symbol }}$</span>{% endif %}</td>
+                <td {{ stimulus_controller('common/latex') }} class="katex-same-height-as-text">{{ param.formattedValue(true) }}</td>
             </tr>
         {% endfor %}
         </tbody>

templates/parts/edit/edit_form_styles.html.twig

@@ -75,7 +75,7 @@
         <td>{{ form_widget(form.value_min) }}{{ form_errors(form.value_min) }}</td>
         <td>{{ form_widget(form.value_typical) }}{{ form_errors(form.value_typical) }}</td>
         <td>{{ form_widget(form.value_max) }}{{ form_errors(form.value_max) }}</td>
-        <td {{ stimulus_controller('pages/latex_preview') }}>{{ form_widget(form.unit, {"attr": {"data-pages--parameters-autocomplete-target": "unit", "data-pages--latex-preview-target": "input"}}) }}{{ form_errors(form.unit) }}<span {{ stimulus_target('pages/latex_preview', 'preview') }}></span></td>
+        <td {{ stimulus_controller('pages/latex_preview', {"unit": true}) }}>{{ form_widget(form.unit, {"attr": {"data-pages--parameters-autocomplete-target": "unit", "data-pages--latex-preview-target": "input"}}) }}{{ form_errors(form.unit) }}<span {{ stimulus_target('pages/latex_preview', 'preview') }}></span></td>
         <td>{{ form_widget(form.value_text) }}{{ form_errors(form.value_text) }}</td>
         <td>{{ form_widget(form.group) }}{{ form_errors(form.group) }}</td>
         <td>