Skip to content

Commit 2bbf3c3

Browse files
dave-dotydave-doty
committed
added hover to domain name mismatch warning star to describe domains, as well as description of how domain name mismatch is defined, to both tooltip and menu enabling the warnings
1 parent 1735862 commit 2bbf3c3

File tree

5 files changed

+75
-35
lines changed

5 files changed

+75
-35
lines changed

‎lib/src/state/domain.dart‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -393,8 +393,8 @@ abstract class Domain
393393

394394
int get visual_length => (this.end - this.start);
395395

396-
// String toString() =>
397-
// 'Domain(helix=${this.helix}, forward=${this.forward}, start=${this.start}, end=${this.end})';
396+
String toString() =>
397+
'${this.name ?? "Domain"}(helix=${this.helix}, forward=${this.forward}, start=${this.start}, end=${this.end})';
398398

399399
/// Indicates if `offset` is the offset of a base on this substrand. (The end index should be false.)
400400
/// Note that offsets refer to visual portions of the displayed grid for the Helix.

‎lib/src/view/design_main_domain_name_mismatches.dart‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -65,6 +65,7 @@ class DesignMainDomainNameMismatchesComponent extends UiComponent2<DesignMainDom
6565
..geometry = geometry
6666
..forward = domain.forward
6767
..color = 'blue'
68+
..domain_name_mismatch = domain_name_mismatch
6869
..key = key)();
6970
mismatch_components.add(mismatch_component);
7071
}

‎lib/src/view/design_main_warning_star.dart‎

Lines changed: 17 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,8 @@ import 'dart:math';
33
import 'package:over_react/over_react.dart';
44
import 'package:scadnano/src/state/geometry.dart';
55

6+
import '../state/domain_name_mismatch.dart';
7+
68
part 'design_main_warning_star.over_react.g.dart';
79

810
UiFactory<DesignMainWarningStarProps> DesignMainWarningStar = _$DesignMainWarningStar;
@@ -12,6 +14,7 @@ mixin DesignMainWarningStarProps on UiProps {
1214
late bool forward;
1315
late Geometry geometry;
1416
late String color;
17+
late DomainNameMismatch domain_name_mismatch;
1518
}
1619

1720
class DesignMainWarningStarComponent extends UiComponent2<DesignMainWarningStarProps> {
@@ -38,11 +41,24 @@ class DesignMainWarningStarComponent extends UiComponent2<DesignMainWarningStarP
3841
points.add('${xs[i].toStringAsFixed(2)},${ys[i].toStringAsFixed(2)}');
3942
}
4043

44+
var tooltip_text = '''\
45+
Domain name mismatch:
46+
${props.domain_name_mismatch.forward_domain.toString()} vs.
47+
${props.domain_name_mismatch.reverse_domain.toString()}
48+
49+
Domain names are considered mismatched if they are not the same string, with one ending in *,
50+
or if the domains overlap partially but not totally (do not have identical start and end
51+
positions on the helix they share).''';
52+
53+
print('transform: rotate(${rotate_degrees} ${props.base_svg_pos.x} ${props.base_svg_pos.y})');
54+
// for SVG need nested title element, rather than title attribute
4155
return (Dom.polygon()
4256
..className = 'warning-star'
4357
..points = points.join(' ')
4458
..style = {"stroke": "${props.color}", "fill": "${props.color}"}
45-
..transform = 'rotate(${rotate_degrees} ${props.base_svg_pos.x} ${props.base_svg_pos.y})')();
59+
..transform = 'rotate(${rotate_degrees} ${props.base_svg_pos.x} ${props.base_svg_pos.y})')(
60+
(Dom.title()..key = 'title')(tooltip_text),
61+
);
4662
}
4763

4864
(List<double>, List<double>) _star_at_origin() {

‎lib/src/view/menu.dart‎

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -705,7 +705,11 @@ helix with the opposite orientation.'''
705705
..display = 'Show domain name mismatches'
706706
..tooltip = '''\
707707
Show mismatches between domain names assigned to one strand and the strand on the same
708-
helix with the opposite orientation.'''
708+
helix with the opposite orientation.
709+
710+
Domain names are considered mismatched if they are not the same string, with one ending in *,
711+
or if the domains overlap partially but not totally (do not have identical start and end
712+
positions on the helix they share).'''
709713
..on_change = (_) {
710714
app.dispatch(
711715
actions.ShowDomainNameMismatchesSet(!props.state.ui_state.show_domain_name_mismatches),

‎web/scadnano-styles.css‎

Lines changed: 50 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,7 @@ input[type=checkbox] {
1919
margin-right: 4px;
2020
}
2121

22-
label + select {
22+
label+select {
2323
margin-left: 4px;
2424
}
2525

@@ -47,7 +47,8 @@ label + select {
4747
overflow: hidden;
4848
}
4949

50-
#top-container, #oxview-frame {
50+
#top-container,
51+
#oxview-frame {
5152
display: flex;
5253
height: 100%;
5354
overflow: hidden;
@@ -97,7 +98,8 @@ label + select {
9798
min-width: 0;
9899
}
99100

100-
#design, #nonmenu-panes-container {
101+
#design,
102+
#nonmenu-panes-container {
101103
display: flex;
102104
height: 100%;
103105
flex-grow: 1;
@@ -222,14 +224,16 @@ label + select {
222224
.dialog-form-item div:has(> .radio-left) {
223225
display: flex;
224226
gap: 10px;
225-
align-items: center; /* Align items vertically */
227+
align-items: center;
228+
/* Align items vertically */
226229
}
227230

228231
/* Only affect specific inputs/classes that are part of the dialog form item. */
229232
.dialog-form-item input[type="number"],
230233
.dialog-form-item input[type="text"],
231234
.dialog-form-item .radio-left {
232-
margin-left: auto; /* Force label input toward the right. */
235+
margin-left: auto;
236+
/* Force label input toward the right. */
233237
}
234238

235239
.dialog-button {
@@ -317,7 +321,7 @@ label + select {
317321
top: 0;
318322
}
319323

320-
.has-submenu:hover > .context-menu {
324+
.has-submenu:hover>.context-menu {
321325
visibility: visible;
322326
}
323327

@@ -333,7 +337,7 @@ label + select {
333337
pointer-events: none;
334338
}
335339

336-
.has-submenu > .context-menu-item::after {
340+
.has-submenu>.context-menu-item::after {
337341
content: '';
338342
position: absolute;
339343
top: 50%;
@@ -346,7 +350,7 @@ label + select {
346350
}
347351

348352
.context-menu-item:hover,
349-
.has-submenu:hover > .context-menu-item {
353+
.has-submenu:hover>.context-menu-item {
350354
color: white;
351355
background: #284570;
352356
border-radius: 2px;
@@ -505,7 +509,7 @@ label + select {
505509
border-top: 1px solid black;
506510
}
507511

508-
.mode-button > img {
512+
.mode-button>img {
509513
width: 25px;
510514
pointer-events: none;
511515
}
@@ -565,7 +569,7 @@ label + select {
565569

566570
/* show open hand when cursor is over SVG background itself */
567571
.panzoomable {
568-
cursor: move;
572+
cursor: grab;
569573
/* fallback: no `url()` support or images disabled */
570574
cursor: url(images/grab.png), auto;
571575
/* fallback: Internet Explorer */
@@ -608,10 +612,15 @@ label + select {
608612
text-anchor: middle;
609613
pointer-events: none;
610614
dominant-baseline: ideographic;
611-
text-shadow: /*-1px -1px 0 #fff,*/ /*1px -1px 0 #fff,*/ /*-1px 1px 0 #fff,*/ /*1px 1px 0 #fff;*/ -0.7px -0.7px 0 #fff,
612-
0.7px -0.7px 0 #fff,
613-
-0.7px 0.7px 0 #fff,
614-
0.7px 0.7px 0 #fff;
615+
text-shadow:
616+
/*-1px -1px 0 #fff,*/
617+
/*1px -1px 0 #fff,*/
618+
/*-1px 1px 0 #fff,*/
619+
/*1px 1px 0 #fff;*/
620+
-0.7px -0.7px 0 #fff,
621+
0.7px -0.7px 0 #fff,
622+
-0.7px 0.7px 0 #fff,
623+
0.7px 0.7px 0 #fff;
615624
text-rendering: optimizeSpeed;
616625
/* doesn't seem to do much to improve rendering speed */
617626
white-space: pre;
@@ -878,10 +887,15 @@ label + select {
878887
.modification-text {
879888
text-anchor: middle;
880889
font-weight: bold;
881-
text-shadow: /*-1px -1px 0 #fff,*/ /*1px -1px 0 #fff,*/ /*-1px 1px 0 #fff,*/ /*1px 1px 0 #fff;*/ -0.7px -0.7px 0 #fff,
882-
0.7px -0.7px 0 #fff,
883-
-0.7px 0.7px 0 #fff,
884-
0.7px 0.7px 0 #fff;
890+
text-shadow:
891+
/*-1px -1px 0 #fff,*/
892+
/*1px -1px 0 #fff,*/
893+
/*-1px 1px 0 #fff,*/
894+
/*1px 1px 0 #fff;*/
895+
-0.7px -0.7px 0 #fff,
896+
0.7px -0.7px 0 #fff,
897+
-0.7px 0.7px 0 #fff,
898+
0.7px 0.7px 0 #fff;
885899
}
886900

887901
.dna-seq {
@@ -891,10 +905,15 @@ label + select {
891905
text-anchor: start;
892906
pointer-events: none;
893907
dominant-baseline: ideographic;
894-
text-shadow: /*-1px -1px 0 #fff,*/ /*1px -1px 0 #fff,*/ /*-1px 1px 0 #fff,*/ /*1px 1px 0 #fff;*/ -0.7px -0.7px 0 #fff,
895-
0.7px -0.7px 0 #fff,
896-
-0.7px 0.7px 0 #fff,
897-
0.7px 0.7px 0 #fff;
908+
text-shadow:
909+
/*-1px -1px 0 #fff,*/
910+
/*1px -1px 0 #fff,*/
911+
/*-1px 1px 0 #fff,*/
912+
/*1px 1px 0 #fff;*/
913+
-0.7px -0.7px 0 #fff,
914+
0.7px -0.7px 0 #fff,
915+
-0.7px 0.7px 0 #fff,
916+
0.7px 0.7px 0 #fff;
898917
text-rendering: optimizeSpeed;
899918
/* doesn't seem to do much to improve rendering speed */
900919
white-space: pre;
@@ -910,9 +929,9 @@ label + select {
910929
text-anchor: middle;
911930
pointer-events: none;
912931
text-shadow: -0.7px -0.7px 0 #fff,
913-
0.7px -0.7px 0 #fff,
914-
-0.7px 0.7px 0 #fff,
915-
0.7px 0.7px 0 #fff;
932+
0.7px -0.7px 0 #fff,
933+
-0.7px 0.7px 0 #fff,
934+
0.7px 0.7px 0 #fff;
916935
text-rendering: optimizeSpeed;
917936
/* doesn't seem to do much to improve rendering speed */
918937
white-space: pre;
@@ -1025,12 +1044,12 @@ https://stackoverflow.com/questions/15138801/rotate-rectangle-around-its-own-cen
10251044
}
10261045

10271046
/* File checkmarks appear on one line */
1028-
#file-nav-dropdown + .dropdown-menu label {
1047+
#file-nav-dropdown+.dropdown-menu label {
10291048
white-space: nowrap;
10301049
}
10311050

10321051
/* View checkmarks appear on one line */
1033-
#view-nav-dropdown + .dropdown-menu label {
1052+
#view-nav-dropdown+.dropdown-menu label {
10341053
white-space: nowrap;
10351054
}
10361055

@@ -1092,7 +1111,7 @@ https://stackoverflow.com/questions/15138801/rotate-rectangle-around-its-own-cen
10921111
************************************************/
10931112

10941113
/* Style dropdown item of selected grid as well as newly clicked on grid */
1095-
#grid-nav-dropdown + .dropdown-menu .dropdown-item.disabled,
1114+
#grid-nav-dropdown+.dropdown-menu .dropdown-item.disabled,
10961115
.dropdown-item:active {
10971116
color: #fff;
10981117
text-decoration: none;
@@ -1105,7 +1124,7 @@ https://stackoverflow.com/questions/15138801/rotate-rectangle-around-its-own-cen
11051124
}
11061125

11071126
/* Styles the label like a DropdownItem */
1108-
.form-file-dropdown .custom-file-input + .custom-file-label {
1127+
.form-file-dropdown .custom-file-input+.custom-file-label {
11091128
display: block;
11101129
width: 100%;
11111130
padding: 0;
@@ -1121,14 +1140,14 @@ https://stackoverflow.com/questions/15138801/rotate-rectangle-around-its-own-cen
11211140
}
11221141

11231142
/* Styles the label like a DropdownItem (on hover) */
1124-
.form-file-dropdown .custom-file-input + .custom-file-label:hover {
1143+
.form-file-dropdown .custom-file-input+.custom-file-label:hover {
11251144
color: #16181b;
11261145
text-decoration: none;
11271146
background-color: #f8f9fa;
11281147
}
11291148

11301149
/* Hides the data-browse psuedo-element. */
1131-
.form-file-dropdown .custom-file-input + .custom-file-label::after {
1150+
.form-file-dropdown .custom-file-input+.custom-file-label::after {
11321151
content: none;
11331152
}
11341153

0 commit comments

Comments
 (0)