fixes #1060: domain name mismatch warning stars shown in incorrect position

Author: dave-doty

lib/src/util.dart

@@ -1387,6 +1387,8 @@ pprint(Map map) {
   print('}');
 }
 
+String id_helix(Helix helix) => 'helix-H${helix.idx}';
+
 String id_domain(Domain domain) =>
     'domain-H${domain.helix}-S${domain.start}-E${domain.end}-${domain.forward ? 'forward' : 'reverse'}';
 

lib/src/view/design_main.dart

@@ -105,7 +105,9 @@ class DesignMainComponent extends UiComponent2<DesignMainProps> {
           ..design = design
           ..only_display_selected_helices = ui_state.only_display_selected_helices
           ..side_selected_helix_idxs = ui_state.side_selected_helix_idxs
-          ..helix_idx_to_svg_position_map = state.helix_idx_to_svg_position_map
+          ..helix_idx_to_svg_position_y_map = state.helix_idx_to_svg_position_map.map(
+            (helix_idx, svg_position) => MapEntry(helix_idx, svg_position.y),
+          )
           ..key = 'domain-name-mismatches')(),
 
       if (ui_state.show_unpaired_insertion_deletions)

lib/src/view/design_main_dna_mismatches.dart

@@ -37,16 +37,17 @@ class DesignMainDNAMismatchesComponent extends UiComponent2<DesignMainDNAMismatc
       for (Domain domain in strand.domains) {
         BuiltList<Mismatch> mismatches = props.design.dna_mismatches_on_domain(domain);
 
-        List<ReactElement> domain_components = [];
+        List<ReactElement> untransformed_mismatch_components = [];
         for (Mismatch mismatch in mismatches) {
           var helix = props.design.helices[domain.helix]!;
           if (!props.only_display_selected_helices || props.side_selected_helix_idxs.contains(helix.idx)) {
             var group = props.design.groups[helix.group]!;
             var geometry = group.geometry ?? props.design.geometry;
+            var svg_position_y = props.helix_idx_to_svg_position_y_map[helix.idx]!;
             var base_svg_pos = helix.svg_base_pos(
               mismatch.offset,
               domain.forward,
-              props.helix_idx_to_svg_position_y_map[helix.idx]!,
+              svg_position_y,
               geometry,
             );
             // For now, if there is a mismatch in an insertion we simply display it for the whole insertion,
@@ -63,7 +64,7 @@ class DesignMainDNAMismatchesComponent extends UiComponent2<DesignMainDNAMismatc
                     ..forward = domain.forward
                     ..color = 'red'
                     ..key = key)();
-              domain_components.add(mismatch_component);
+              untransformed_mismatch_components.add(mismatch_component);
             }
           }
         }
@@ -72,12 +73,12 @@ class DesignMainDNAMismatchesComponent extends UiComponent2<DesignMainDNAMismatc
         HelixGroup group = props.design.groups[helix.group]!;
         String transform_str = group.transform_str(props.design.geometry);
 
-        if (domain_components.isNotEmpty) {
+        if (untransformed_mismatch_components.isNotEmpty) {
           mismatch_components.add(
             (Dom.g()
               ..transform = transform_str
               ..className = 'mismatch-components-in-domain mismatch-${strand.id}'
-              ..key = util.id_domain(domain))(domain_components),
+              ..key = util.id_domain(domain))(untransformed_mismatch_components),
           );
         }
       }

lib/src/view/design_main_domain_name_mismatches.dart

@@ -6,6 +6,8 @@ import 'package:built_collection/built_collection.dart';
 import '../state/domain_name_mismatch.dart';
 import '../state/design.dart';
 import '../state/domain.dart';
+import '../state/helix.dart';
+import '../state/group.dart';
 import 'pure_component.dart';
 import 'design_main_warning_star.dart';
 import '../util.dart' as util;
@@ -19,7 +21,7 @@ mixin DesignMainDomainNameMismatchesProps on UiProps {
   late Design design;
   late bool only_display_selected_helices;
   late BuiltSet<int> side_selected_helix_idxs;
-  late BuiltMap<int, Point<double>> helix_idx_to_svg_position_map;
+  late BuiltMap<int, num> helix_idx_to_svg_position_y_map;
 }
 
 class DesignMainDomainNameMismatchesComponent extends UiComponent2<DesignMainDomainNameMismatchesProps>
@@ -33,13 +35,14 @@ class DesignMainDomainNameMismatchesComponent extends UiComponent2<DesignMainDom
   List<ReactElement> _create_mismatch_components() {
     List<ReactElement> mismatch_components = [];
 
-    for (var helix in props.design.helices.values) {
+    for (Helix helix in props.design.helices.values) {
       if (props.only_display_selected_helices && !props.side_selected_helix_idxs.contains(helix.idx)) {
         continue;
       }
 
       BuiltList<DomainNameMismatch> domain_name_mismatches = props.design.domain_name_mismatches[helix.idx]!;
 
+      List<ReactElement> untransformed_mismatch_components = [];
       for (var domain_name_mismatch in domain_name_mismatches) {
         Domain forward_domain = domain_name_mismatch.forward_domain;
         Domain reverse_domain = domain_name_mismatch.reverse_domain;
@@ -52,12 +55,8 @@ class DesignMainDomainNameMismatchesComponent extends UiComponent2<DesignMainDom
           var helix = props.design.helices[domain.helix]!;
           var group = props.design.groups[helix.group]!;
           var geometry = group.geometry ?? props.design.geometry;
-          var base_svg_pos = helix.svg_base_pos(
-            mid,
-            domain.forward,
-            props.helix_idx_to_svg_position_map[helix.idx]!.y,
-            geometry,
-          );
+          var svg_position_y = props.helix_idx_to_svg_position_y_map[helix.idx]!;
+          var base_svg_pos = helix.svg_base_pos(mid, domain.forward, svg_position_y, geometry);
           String key = '${domain.helix};${domain.forward};${domain.start};${mid};${domain.end}';
           var mismatch_component =
               (DesignMainWarningStar()
@@ -67,9 +66,21 @@ class DesignMainDomainNameMismatchesComponent extends UiComponent2<DesignMainDom
                 ..color = 'blue'
                 ..domain_name_mismatch = domain_name_mismatch
                 ..key = key)();
-          mismatch_components.add(mismatch_component);
+          untransformed_mismatch_components.add(mismatch_component);
         }
       }
+
+      HelixGroup group = props.design.groups[helix.group]!;
+      String transform_str = group.transform_str(props.design.geometry);
+
+      if (untransformed_mismatch_components.isNotEmpty) {
+        mismatch_components.add(
+          (Dom.g()
+            ..transform = transform_str
+            ..className = 'mismatch-domain-names-group'
+            ..key = util.id_helix(helix))(untransformed_mismatch_components),
+        );
+      }
     }
     return mismatch_components;
   }

lib/src/view/design_main_warning_star.dart

@@ -14,7 +14,7 @@ mixin DesignMainWarningStarProps on UiProps {
   late bool forward;
   late Geometry geometry;
   late String color;
-  late DomainNameMismatch domain_name_mismatch;
+  DomainNameMismatch? domain_name_mismatch;
 }
 
 class DesignMainWarningStarComponent extends UiComponent2<DesignMainWarningStarProps> {
@@ -41,14 +41,20 @@ class DesignMainWarningStarComponent extends UiComponent2<DesignMainWarningStarP
       points.add('${xs[i].toStringAsFixed(2)},${ys[i].toStringAsFixed(2)}');
     }
 
-    var tooltip_text = '''\
+    String tooltip_text;
+    DomainNameMismatch? domain_name_mismatch = props.domain_name_mismatch;
+    if (domain_name_mismatch != null) {
+      tooltip_text = '''\
 Domain name mismatch:
-${props.domain_name_mismatch.forward_domain.toString()} vs.
-${props.domain_name_mismatch.reverse_domain.toString()}
+${domain_name_mismatch.forward_domain.toString()} vs.
+${domain_name_mismatch.reverse_domain.toString()}
 
 Domain names are considered mismatched if they are not the same string, with one ending in *,
 or if the domains overlap partially but not totally (do not have identical start and end
 positions on the helix they share).''';
+    } else {
+      tooltip_text = '';
+    }
 
     // for SVG need nested title element, rather than title attribute
     return (Dom.polygon()