gramene-search 1.2.38 → 1.2.39

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/dist/index.css CHANGED
@@ -1,1188 +1,1239 @@
1
1
  .gramene-sidebar {
2
- position: fixed;
3
- background-color: dimgray;
4
- padding-left: 8px;
5
- padding-right: 8px;
6
- padding-bottom: 8px;
7
- max-width: 16.67%;
2
+ max-width: 16.67%;
3
+ background-color: #696969;
4
+ padding-bottom: 8px;
5
+ padding-left: 8px;
6
+ padding-right: 8px;
7
+ position: fixed;
8
8
  }
9
+
9
10
  .gramene-filter-container {
10
- background-color: #cfb5e6;
11
- padding-left: 4px;
11
+ background-color: #cfb5e6;
12
+ padding-left: 4px;
12
13
  }
14
+
13
15
  .gramene-filter {
14
- padding-left: 4px;
15
- padding-right: 4px;
16
- padding-bottom: 4px;
17
- background-color: white;
18
- font-size: small;
16
+ background-color: #fff;
17
+ padding-bottom: 4px;
18
+ padding-left: 4px;
19
+ padding-right: 4px;
20
+ font-size: small;
19
21
  }
22
+
20
23
  .gramene-filter span:hover {
21
- font-weight:bolder;
24
+ font-weight: bolder;
22
25
  }
26
+
23
27
  .gramene-filter-AND {
24
- background-color: #ffcd82;
28
+ background-color: #ffcd82;
25
29
  }
30
+
26
31
  .gramene-filter-OR {
27
- background-color: #c5eeb9;
32
+ background-color: #c5eeb9;
28
33
  }
34
+
29
35
  .gramene-filter-NOT {
30
- border-left-color: #ff5354;
31
- border-left-style: inset;
32
- border-left-width: 4px;
33
- padding-left: 4px;
36
+ border-left: 4px inset #ff5354;
37
+ padding-left: 4px;
34
38
  }
39
+
35
40
  .gramene-filter-operation {
36
- text-align: center;
37
- font-style: italic;
41
+ text-align: center;
42
+ font-style: italic;
38
43
  }
44
+
39
45
  .gramene-filter-marked {
40
- font-weight: bolder;
41
- /*background-color: #feff96;*/
46
+ font-weight: bolder;
42
47
  }
48
+
43
49
  .gramene-filter-menu ul {
44
- border-top-style: solid;
45
- border-top-width: 2px;
46
- padding-left: 0;
50
+ border-top-style: solid;
51
+ border-top-width: 2px;
52
+ padding-left: 0;
47
53
  }
54
+
48
55
  .gramene-filter-menu li {
49
- display: block;
50
- cursor: pointer;
51
- padding-left: 15px;
56
+ cursor: pointer;
57
+ padding-left: 15px;
58
+ display: block;
52
59
  }
60
+
53
61
  .gramene-filter-menu li:hover {
54
- background-color: #feff96;
62
+ background-color: #feff96;
55
63
  }
56
64
 
57
65
  .gramene-view-container {
58
- background-color: lightblue;
59
- padding-left: 10px;
66
+ background-color: #add8e6;
67
+ padding-left: 10px;
60
68
  }
69
+
61
70
  .gramene-view {
62
- padding-left: 5px;
63
- margin: 4px;
64
- background-color: white;
71
+ background-color: #fff;
72
+ margin: 4px;
73
+ padding-left: 5px;
65
74
  }
75
+
66
76
  .gramene-view li {
67
- display: block;
68
- cursor: pointer;
69
- padding-left: 5px;
70
- border-left-style: inset;
71
- border-left-width: 4px;
72
- margin-bottom: 2px;
77
+ cursor: pointer;
78
+ border-left-style: inset;
79
+ border-left-width: 4px;
80
+ margin-bottom: 2px;
81
+ padding-left: 5px;
82
+ display: block;
73
83
  }
74
84
 
75
85
  .gramene-view-on {
76
- border-left-color: #40a0ff;
86
+ border-left-color: #40a0ff;
77
87
  }
88
+
78
89
  .gramene-view-off {
79
- border-left-color: #ff6d68;
90
+ border-left-color: #ff6d68;
80
91
  }
92
+
81
93
  .gramene-view-disabled {
82
- color: darkgray;
83
- border-left-color: #efefef;
94
+ color: #a9a9a9;
95
+ border-left-color: #efefef;
84
96
  }
97
+
85
98
  #gramene-suggestion button {
86
- border-radius: .6rem;
87
- line-height: 1;
99
+ border-radius: .6rem;
100
+ line-height: 1;
88
101
  }
102
+
89
103
  #gramene-suggestion button:focus {
90
- color: #fff;
91
- background-color: #6c757d;
92
- border-color: #6c757d;
104
+ color: #fff;
105
+ background-color: #6c757d;
106
+ border-color: #6c757d;
93
107
  }
94
- .visible-detail {
95
- border: 1px solid #557B74;
96
- padding: 6px 12px;
108
+
109
+ .taxogenomic-vis .gramene-search-vis {
110
+ -webkit-user-select: none;
111
+ cursor: pointer;
97
112
  }
98
- .detail {
99
- margin-right: auto;
100
- margin-left: auto;
101
- padding-left: 15px;
102
- padding-right: 15px;
113
+
114
+ .taxogenomic-vis .gramene-search-vis canvas {
115
+ position: absolute;
103
116
  }
104
- .table {
105
- width: 100%;
106
- max-width: 100%;
117
+
118
+ .taxogenomic-vis .gramene-search-vis > * {
119
+ display: inline;
107
120
  }
108
- .xrefs {
109
- border-collapse: collapse;
110
- border-spacing: 0;
111
- border-color: grey;
112
- table-layout: fixed;
121
+
122
+ .taxogenomic-vis .gramene-search-vis text {
123
+ fill: gray;
124
+ stroke: #557b74;
125
+ stroke-opacity: 0;
126
+ stroke-width: .5px;
127
+ -webkit-user-select: none;
128
+ user-select: none;
129
+ font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
130
+ font-size: 12px;
113
131
  }
114
- .xref-name-col {
115
- width: 20%;
132
+
133
+ .taxogenomic-vis .gramene-search-vis text::selection {
134
+ background: none;
116
135
  }
117
- .xref-value-col {
118
- width: 80%;
136
+
137
+ .taxogenomic-vis .gramene-search-vis .taxonomy * {
138
+ transition: fill .2s ease-in-out, stroke-opacity .2s ease-in-out;
119
139
  }
120
- .xref-id-list {
121
- padding-left: 0;
122
- list-style: none;
140
+
141
+ .taxogenomic-vis .gramene-search-vis .clade .results-count {
142
+ font-size: 10px;
123
143
  }
124
- .result-gene {
125
- padding: 0.2em;
126
- border: 5px solid white;
144
+
145
+ .taxogenomic-vis .gramene-search-vis .clade .node circle {
146
+ stroke: #557b74;
147
+ stroke-width: 1px;
148
+ fill: #f6f6f6;
127
149
  }
128
- .result-gene:hover {
129
- border-color: antiquewhite;
150
+
151
+ .taxogenomic-vis .gramene-search-vis .clade .edge rect {
152
+ fill: #ccc;
130
153
  }
131
- .gene-title {
132
- padding-top:0.5em;
154
+
155
+ .taxogenomic-vis .gramene-search-vis .clade .clade.highlight > .node > circle, .taxogenomic-vis .gramene-search-vis .clade .clade.highlight > .edge > rect {
156
+ fill: #f0b866;
133
157
  }
134
- .gene-id {
135
- white-space: nowrap;
158
+
159
+ .taxogenomic-vis .gramene-search-vis .clade .clade.highlight > .node-label text {
160
+ fill: #557b74;
161
+ stroke-opacity: 1;
136
162
  }
137
- .gene-name {
138
- color: #557B74;
163
+
164
+ .taxogenomic-vis .gramene-search-vis .clade .node:hover > circle, .taxogenomic-vis .gramene-search-vis .clade .edge:hover > circle, .taxogenomic-vis .gramene-search-vis .clade .node:hover > rect, .taxogenomic-vis .gramene-search-vis .clade .edge:hover > rect, .taxogenomic-vis .gramene-search-vis .clade .node:hover ~ .node > circle, .taxogenomic-vis .gramene-search-vis .clade .edge:hover ~ .node > circle, .taxogenomic-vis .gramene-search-vis .clade .node:hover ~ .clade .edge > rect, .taxogenomic-vis .gramene-search-vis .clade .edge:hover ~ .clade .edge > rect, .taxogenomic-vis .gramene-search-vis .clade .node:hover ~ .clade .node > circle, .taxogenomic-vis .gramene-search-vis .clade .edge:hover ~ .clade .node > circle {
165
+ fill: #f0b866;
139
166
  }
140
- .gene-description {
141
- margin-bottom: 0;
167
+
168
+ .taxogenomic-vis .gramene-search-vis .clade .node:hover ~ .node-label text, .taxogenomic-vis .gramene-search-vis .clade .edge:hover ~ .node-label text, .taxogenomic-vis .gramene-search-vis .clade .node:hover ~ .clade text, .taxogenomic-vis .gramene-search-vis .clade .edge:hover ~ .clade text, .taxogenomic-vis .gramene-search-vis .clade .node-label:hover text {
169
+ fill: #557b74;
170
+ stroke-opacity: 1;
142
171
  }
143
- .gene-species {
144
- white-space: nowrap;
145
- font-style: italic;
146
- padding-left: 1em;
172
+
173
+ .taxogenomic-vis .gramene-search-vis .clade .bin, .taxogenomic-vis .gramene-search-vis .clade .full-region {
174
+ stroke: #557b74;
175
+ stroke-width: 0;
176
+ shape-rendering: crispedges;
177
+ transition: none;
147
178
  }
148
- .gene-synonyms {
149
- white-space: nowrap;
150
- font-size: small;
179
+
180
+ .taxogenomic-vis .gramene-search-vis .clade .bin.selected {
181
+ fill: #ea8e75;
151
182
  }
152
- .gene-extras {
153
- float: right;
154
- border: dashed 1px blue;
183
+
184
+ .taxogenomic-vis .gramene-search-vis .clade .bin:hover {
185
+ fill: #557b74;
155
186
  }
156
- .gene-detail-tabs {
157
- display: flex;
158
- flex-wrap: wrap;
159
- width: 80em;
187
+
188
+ .taxogenomic-vis .gramene-search-vis .clade .full-region.selected {
189
+ stroke-width: 1px;
190
+ stroke: #ea8e75;
160
191
  }
161
- .gene-detail-tab-closed {
162
- color: darkgreen;
163
- cursor: pointer;
164
- /*background-color: lightgray;*/
192
+
193
+ .taxogenomic-vis .gramene-search-vis .clade .full-region:hover {
194
+ stroke-width: 1px;
195
+ stroke: #557b74;
165
196
  }
166
- .gene-detail-tab-disabled {
167
- /*color: white;*/
168
- /*background-color: lightgray;*/
169
- color: lightgray;
170
- cursor: not-allowed;
197
+
198
+ .taxogenomic-vis .gramene-search-vis .clade .species-background {
199
+ fill: none;
171
200
  }
172
- .gene-detail-tab-expanded {
173
- color: white;
174
- background-color: #557B74;
175
- cursor: pointer;
201
+
202
+ .taxogenomic-vis .gramene-search-vis .clade .node:hover ~ .species-background, .taxogenomic-vis .gramene-search-vis .clade .edge:hover ~ .species-background, .taxogenomic-vis .gramene-search-vis .clade .node:hover ~ .clade .species-background, .taxogenomic-vis .gramene-search-vis .clade .edge:hover ~ .clade .species-background, .taxogenomic-vis .gramene-search-vis .clade .clade.highlight > .species-background {
203
+ fill: #f9e3c3;
176
204
  }
177
- .result-gene-summary {
178
- display: flex;
179
- flex-flow: row nowrap;
180
- justify-content: flex-start;
205
+
206
+ .tree-view-node {
207
+ margin-left: 10px;
181
208
  }
182
- .result-gene-summary .species-name {
183
- white-space: nowrap;
184
- font-style: italic;
209
+
210
+ .tree-view-node-collapse-toggle.collapse-spacer {
211
+ width: 14px;
212
+ display: inline-block;
185
213
  }
186
- .result-gene-title-body {
187
- flex: 1 1 auto;
188
- width: 1036px;
214
+
215
+ .tree-view-node-collapse-toggle {
216
+ width: 14px;
217
+ margin-right: 3px;
189
218
  }
190
- .closest-ortholog, .gene-summary-tair {
191
- cursor: pointer;
192
- flex: 1 1 auto;
193
- width: 500px;
194
- font-size: smaller;
195
- margin-top: 10px;
196
- padding: 0 1rem;
197
- margin-left: 1rem;
198
- border: 1px solid darkorange;
219
+
220
+ .tree-view-node-label {
221
+ border: 1px solid #fff;
222
+ margin-left: 3px;
223
+ padding: 1px;
224
+ font-size: smaller;
199
225
  }
200
- .closest-ortholog {
201
- border: 1px dotted darkorange;
226
+
227
+ .tree-view-node-label.selected {
228
+ background-color: gray;
229
+ border: 1px solid #003f81;
230
+ border-radius: 3px;
202
231
  }
203
- .gene-summary-tair {
204
- border: 1px dotted darkgreen;
232
+
233
+ .display-mode .btn-toolbar {
234
+ padding-left: 10px;
235
+ position: absolute;
205
236
  }
206
- .gene-summary-tair .rest {
207
- display: none;
237
+
238
+ .tooltip-inner {
239
+ max-width: 400px;
240
+ }
241
+
242
+ .genetree-vis .node, .genetree-vis .edge {
243
+ cursor: pointer;
244
+ }
245
+
246
+ .genetree-vis .tree-wrapper * {
247
+ transition: all 20ms ease-in-out;
208
248
  }
209
- .gene-summary-tair:hover .rest {
210
- display: inline;
249
+
250
+ .genetree-vis .tree-wrapper .clade {
251
+ transition: transform 20ms ease-in-out;
211
252
  }
212
- .gene-summary-tair:focus .rest {
213
- display: inline;
253
+
254
+ .genetree-vis .tree-wrapper .clade .edge-rect {
255
+ transition: scaleY 20ms ease-in-out, scaleX 20ms ease-in-out, transform 20ms ease-in-out;
214
256
  }
215
- .gene-summary-tair:hover .ellipsis {
216
- display: none;
257
+
258
+ .genetree-vis .interaction-helper {
259
+ opacity: 0;
217
260
  }
218
- .gene-summary-tair:focus .ellipsis {
219
- display: none;
261
+
262
+ .genetree-vis .node circle {
263
+ stroke: #777;
264
+ fill: #fff;
220
265
  }
221
- /* this is the "title" of the closest ortholog box */
222
- .closest-ortholog::before,
223
- .gene-summary-tair::before {
224
- position: relative;
225
- float: right;
226
- margin-top: -12px;
227
- margin-right: 6px;
228
- border: dotted 1px;
229
- padding: 0 1rem;
230
- background: #fff;
266
+
267
+ .genetree-vis .speciation rect {
268
+ fill: navy;
231
269
  }
232
- .closest-ortholog::before {
233
- content: "Model Species Homolog";
234
- color: orange;
270
+
271
+ .genetree-vis .duplication rect {
272
+ fill: #cd0000;
235
273
  }
236
- /* this is the "title" of the closest ortholog box */
237
- .gene-summary-tair::before {
238
- content: "TAIR Curated Description";
239
- color: darkgreen;
274
+
275
+ .genetree-vis .node:hover .internal, .genetree-vis .edge:hover .internal, .genetree-vis .node:hover .gene circle, .genetree-vis .edge:hover .gene circle, .genetree-vis .node:hover ~ .clade .node rect, .genetree-vis .edge:hover ~ .clade .node rect, .genetree-vis .node:hover + .node rect, .genetree-vis .edge:hover + .node rect {
276
+ transform: scale(2);
240
277
  }
241
- .gene-search-pic-sugg {
242
- width: 100%;
243
- height: 200px;
244
- background: url("suggestions.7b2830b6.png");
245
- background-size: contain;
246
- background-repeat: no-repeat;
278
+
279
+ .genetree-vis .node:hover ~ .clade .interaction-rect, .genetree-vis .edge:hover ~ .clade .interaction-rect {
280
+ opacity: 1;
281
+ fill-opacity: 1;
247
282
  }
248
- .gene-search-pic-results {
249
- width: 100%;
250
- height: 200px;
251
- background: url("results.e437a98f.png");
252
- background-size: contain;
253
- background-repeat: no-repeat;
283
+
284
+ .genetree-vis .node:hover ~ .clade circle, .genetree-vis .edge:hover ~ .clade circle, .genetree-vis .node:hover + .node circle, .genetree-vis .edge:hover + .node circle, .genetree-vis .node:hover .collapsed path, .genetree-vis .edge:hover .collapsed path, .genetree-vis .node:hover ~ .clade .collapsed path, .genetree-vis .edge:hover ~ .clade .collapsed path, .genetree-vis .node:hover + .node .collapsed path, .genetree-vis .edge:hover + .node .collapsed path {
285
+ stroke-width: 2px;
254
286
  }
255
- .gene-search-pic-genetree {
256
- width: 100%;
257
- height: 200px;
258
- background: url("genetree.145467e3.png");
259
- background-size: contain;
260
- background-repeat: no-repeat;
287
+
288
+ .genetree-vis .node:hover ~ .clade text, .genetree-vis .edge:hover ~ .clade text, .genetree-vis .node:hover text, .genetree-vis .edge:hover text {
289
+ font-weight: bolder;
290
+ }
291
+
292
+ .genetree-vis .node .gene.ortholog_one2one circle, .genetree-vis .node .gene.ortholog_one2many circle, .genetree-vis .node .gene.ortholog_many2many circle {
293
+ stroke: orange;
294
+ }
295
+
296
+ .genetree-vis .node .gene.within_species_paralog circle {
297
+ stroke: green;
298
+ }
299
+
300
+ .genetree-vis .node .gene.self circle {
301
+ stroke: red;
302
+ fill: red;
303
+ }
304
+
305
+ .genetree-vis .node .gene.self text {
306
+ font-weight: bolder;
307
+ }
308
+
309
+ .genetree-vis .node .gene.representative circle {
310
+ stroke: orange;
311
+ fill: orange;
312
+ }
313
+
314
+ .genetree-vis .node text {
315
+ fill-opacity: 1;
316
+ text-anchor: start;
317
+ font-size: 11px;
318
+ }
319
+
320
+ .genetree-vis .collapsed path {
321
+ stroke-width: 1px;
322
+ }
323
+
324
+ .genetree-vis .domains rect {
325
+ cursor: pointer;
326
+ stroke-opacity: 0;
327
+ }
328
+
329
+ .genetree-vis .domains rect:hover {
330
+ cursor: pointer;
331
+ stroke-opacity: 1;
332
+ }
333
+
334
+ .popover-title .tooltip-title-button {
335
+ margin-top: -4px !important;
336
+ margin-right: 4px !important;
337
+ }
338
+
339
+ .msa-slider {
340
+ margin-bottom: -10px;
341
+ padding-top: 10px;
342
+ padding-bottom: 0;
343
+ position: relative;
344
+ }
345
+
346
+ .resize-drag {
347
+ color: red;
348
+ box-sizing: border-box;
349
+ background: none;
350
+ border: 4px solid #7c8383;
351
+ border-radius: 8px;
352
+ font-family: sans-serif;
353
+ font-size: 1px;
261
354
  }
355
+
356
+ .resize-container {
357
+ width: 100%;
358
+ height: 100%;
359
+ }
360
+
262
361
  .MSAlignments-wrapper {
263
362
  overflow-x: scroll;
264
363
  overflow-y: hidden;
265
364
  }
365
+
266
366
  .clustal {
267
367
  white-space: nowrap;
268
- font-family: monospace;
269
368
  height: 18px;
369
+ font-family: monospace;
270
370
  font-size: 12px;
271
371
  }
272
- .clustal .A,
273
- .clustal .I,
274
- .clustal .L,
275
- .clustal .M,
276
- .clustal .F,
277
- .clustal .W,
278
- .clustal .V {
372
+
373
+ .clustal .A, .clustal .I, .clustal .L, .clustal .M, .clustal .F, .clustal .W, .clustal .V {
279
374
  background-color: #80a0f0;
280
375
  }
281
- .clustal .R,
282
- .clustal .K {
283
- background-color: #f01505;
376
+
377
+ .clustal .R, .clustal .K {
284
378
  color: #fcff89;
379
+ background-color: #f01505;
285
380
  }
286
- .clustal .N,
287
- .clustal .Q,
288
- .clustal .S,
289
- .clustal .T {
290
- background-color: #00ff00;
381
+
382
+ .clustal .N, .clustal .Q, .clustal .S, .clustal .T {
383
+ background-color: #0f0;
291
384
  }
292
- .clustal .D,
293
- .clustal .E {
294
- background-color: #c048c0;
385
+
386
+ .clustal .D, .clustal .E {
295
387
  color: #fcff89;
388
+ background-color: #c048c0;
296
389
  }
390
+
297
391
  .clustal .C {
298
392
  background-color: #f08080;
299
393
  }
394
+
300
395
  .clustal .G {
301
396
  background-color: #f09048;
302
397
  }
398
+
303
399
  .clustal .Y .clustal .H {
304
400
  background-color: #15a4a4;
305
401
  }
402
+
306
403
  .clustal .P {
307
- background-color: #ffff00;
404
+ background-color: #ff0;
308
405
  }
309
- .clustal .B,
310
- .clustal .X,
311
- .clustal .Z {
312
- background-color: #ffffff;
406
+
407
+ .clustal .B, .clustal .X, .clustal .Z {
408
+ background-color: #fff;
313
409
  }
410
+
314
411
  .clustal .gap {
315
412
  color: #ccc;
316
413
  }
414
+
317
415
  .zappo {
318
416
  white-space: nowrap;
319
- font-family: monospace;
320
417
  height: 18px;
418
+ font-family: monospace;
321
419
  font-size: 12px;
322
420
  }
323
- .zappo .A,
324
- .zappo .I,
325
- .zappo .L,
326
- .zappo .M,
327
- .zappo .V {
421
+
422
+ .zappo .A, .zappo .I, .zappo .L, .zappo .M, .zappo .V {
328
423
  background-color: #ffafaf;
329
424
  }
330
- .zappo .R,
331
- .zappo .H,
332
- .zappo .K {
333
- background-color: #6464ff;
425
+
426
+ .zappo .R, .zappo .H, .zappo .K {
334
427
  color: #fcff89;
428
+ background-color: #6464ff;
335
429
  }
336
- .zappo .N,
337
- .zappo .Q,
338
- .zappo .S,
339
- .zappo .T {
340
- background-color: #00ff00;
430
+
431
+ .zappo .N, .zappo .Q, .zappo .S, .zappo .T {
432
+ background-color: #0f0;
341
433
  }
342
- .zappo .D,
343
- .zappo .E {
344
- background-color: #ff0000;
434
+
435
+ .zappo .D, .zappo .E {
436
+ background-color: red;
345
437
  }
438
+
346
439
  .zappo .C {
347
- background-color: #ffff00;
440
+ background-color: #ff0;
348
441
  }
349
- .zappo .G,
350
- .zappo .P {
351
- background-color: #ff00ff;
442
+
443
+ .zappo .G, .zappo .P {
352
444
  color: #fcff89;
445
+ background-color: #f0f;
353
446
  }
354
- .zappo .F,
355
- .zappo .W,
356
- .zappo .Y {
447
+
448
+ .zappo .F, .zappo .W, .zappo .Y {
357
449
  background-color: #ffc800;
358
450
  }
359
- .zappo .B,
360
- .zappo .X,
361
- .zappo .Z {
362
- background-color: #ffffff;
451
+
452
+ .zappo .B, .zappo .X, .zappo .Z {
453
+ background-color: #fff;
363
454
  }
455
+
364
456
  .zappo .gap {
365
457
  color: #ccc;
366
458
  }
459
+
367
460
  .taylor {
368
461
  white-space: nowrap;
369
- font-family: monospace;
370
462
  height: 18px;
463
+ font-family: monospace;
371
464
  font-size: 12px;
372
465
  }
466
+
373
467
  .taylor .A {
374
- background-color: #ccff00;
468
+ background-color: #cf0;
375
469
  }
470
+
376
471
  .taylor .R {
377
- background-color: #0000ff;
378
472
  color: #fcff89;
473
+ background-color: #00f;
379
474
  }
475
+
380
476
  .taylor .N {
381
- background-color: #cc00ff;
382
477
  color: #fcff89;
478
+ background-color: #c0f;
383
479
  }
480
+
384
481
  .taylor .D {
385
- background-color: #ff0000;
386
482
  color: #fcff89;
483
+ background-color: red;
387
484
  }
485
+
388
486
  .taylor .C {
389
- background-color: #ffff00;
487
+ background-color: #ff0;
390
488
  }
489
+
391
490
  .taylor .Q {
392
- background-color: #ff00cc;
491
+ background-color: #f0c;
393
492
  }
493
+
394
494
  .taylor .E {
395
- background-color: #ff0066;
396
495
  color: #fcff89;
496
+ background-color: #f06;
397
497
  }
498
+
398
499
  .taylor .G {
399
- background-color: #ff9900;
500
+ background-color: #f90;
400
501
  }
502
+
401
503
  .taylor .H {
402
- background-color: #0066ff;
403
504
  color: #fcff89;
505
+ background-color: #06f;
404
506
  }
507
+
405
508
  .taylor .I {
406
- background-color: #66ff00;
509
+ background-color: #6f0;
407
510
  }
511
+
408
512
  .taylor .L {
409
- background-color: #33ff00;
513
+ background-color: #3f0;
410
514
  }
515
+
411
516
  .taylor .K {
412
- background-color: #6600ff;
413
517
  color: #fcff89;
518
+ background-color: #60f;
414
519
  }
520
+
415
521
  .taylor .M {
416
- background-color: #00ff00;
522
+ background-color: #0f0;
417
523
  }
524
+
418
525
  .taylor .F {
419
- background-color: #00ff66;
526
+ background-color: #0f6;
420
527
  }
528
+
421
529
  .taylor .P {
422
- background-color: #ffcc00;
530
+ background-color: #fc0;
423
531
  }
532
+
424
533
  .taylor .S {
425
- background-color: #ff3300;
426
534
  color: #fcff89;
535
+ background-color: #f30;
427
536
  }
537
+
428
538
  .taylor .T {
429
- background-color: #ff6600;
539
+ background-color: #f60;
430
540
  }
541
+
431
542
  .taylor .W {
432
- background-color: #00ccff;
543
+ background-color: #0cf;
433
544
  }
545
+
434
546
  .taylor .Y {
435
- background-color: #00ffcc;
547
+ background-color: #0fc;
436
548
  }
549
+
437
550
  .taylor .V {
438
- background-color: #99ff00;
551
+ background-color: #9f0;
439
552
  }
440
- .taylor .B,
441
- .taylor .X,
442
- .taylor .Z {
443
- background-color: #ffffff;
553
+
554
+ .taylor .B, .taylor .X, .taylor .Z {
555
+ background-color: #fff;
444
556
  }
557
+
445
558
  .taylor .gap {
446
559
  color: #ccc;
447
560
  }
561
+
448
562
  .hydrophobicity {
449
563
  white-space: nowrap;
450
- font-family: monospace;
451
564
  height: 18px;
452
- font-size: 12px;
453
565
  color: #fcff89;
566
+ font-family: monospace;
567
+ font-size: 12px;
454
568
  }
569
+
455
570
  .hydrophobicity .A {
456
571
  background-color: #ad0052;
457
572
  }
458
- .hydrophobicity .R,
459
- .hydrophobicity .K {
460
- background-color: #0000ff;
573
+
574
+ .hydrophobicity .R, .hydrophobicity .K {
575
+ background-color: #00f;
461
576
  }
462
- .hydrophobicity .N,
463
- .hydrophobicity .D,
464
- .hydrophobicity .Q,
465
- .hydrophobicity .E,
466
- .hydrophobicity .B,
467
- .hydrophobicity .Z {
577
+
578
+ .hydrophobicity .N, .hydrophobicity .D, .hydrophobicity .Q, .hydrophobicity .E, .hydrophobicity .B, .hydrophobicity .Z {
468
579
  background-color: #0c00f3;
469
580
  }
581
+
470
582
  .hydrophobicity .C {
471
583
  background-color: #c2003d;
472
584
  }
585
+
473
586
  .hydrophobicity .G {
474
587
  background-color: #6a0095;
475
588
  }
589
+
476
590
  .hydrophobicity .H {
477
591
  background-color: #1500ea;
478
592
  }
593
+
479
594
  .hydrophobicity .L {
480
595
  background-color: #ea0015;
481
596
  }
597
+
482
598
  .hydrophobicity .M {
483
599
  background-color: #b0004f;
484
600
  }
601
+
485
602
  .hydrophobicity .F {
486
603
  background-color: #cb0034;
487
604
  }
605
+
488
606
  .hydrophobicity .P {
489
607
  background-color: #4600b9;
490
608
  }
609
+
491
610
  .hydrophobicity .S {
492
611
  background-color: #5e00a1;
493
612
  }
613
+
494
614
  .hydrophobicity .T {
495
615
  background-color: #61009e;
496
616
  }
617
+
497
618
  .hydrophobicity .W {
498
619
  background-color: #5b00a4;
499
620
  }
621
+
500
622
  .hydrophobicity .Y {
501
623
  background-color: #4f00b0;
502
624
  }
625
+
503
626
  .hydrophobicity .V {
504
627
  background-color: #f60009;
505
628
  }
629
+
506
630
  .hydrophobicity .X {
507
631
  background-color: #680097;
508
632
  }
633
+
509
634
  .hydrophobicity .gap {
510
635
  color: #ccc;
511
636
  }
637
+
512
638
  .helix_propensity {
513
639
  white-space: nowrap;
514
- font-family: monospace;
515
640
  height: 18px;
641
+ font-family: monospace;
516
642
  font-size: 12px;
517
643
  }
644
+
518
645
  .helix_propensity .A {
519
646
  background-color: #e718e7;
520
647
  }
648
+
521
649
  .helix_propensity .R {
522
650
  background-color: #6f906f;
523
651
  }
652
+
524
653
  .helix_propensity .N {
525
654
  background-color: #1be41b;
526
655
  }
656
+
527
657
  .helix_propensity .D {
528
- background-color: #778877;
658
+ background-color: #787;
529
659
  }
660
+
530
661
  .helix_propensity .C {
531
662
  background-color: #23dc23;
532
663
  }
664
+
533
665
  .helix_propensity .Q {
534
666
  background-color: #926d92;
535
667
  }
668
+
536
669
  .helix_propensity .E {
537
- background-color: #ff00ff;
670
+ background-color: #f0f;
538
671
  }
672
+
539
673
  .helix_propensity .G {
540
- background-color: #00ff00;
674
+ background-color: #0f0;
541
675
  }
676
+
542
677
  .helix_propensity .H {
543
678
  background-color: #758a75;
544
679
  }
680
+
545
681
  .helix_propensity .I {
546
682
  background-color: #8a758a;
547
683
  }
684
+
548
685
  .helix_propensity .L {
549
686
  background-color: #ae51ae;
550
687
  }
688
+
551
689
  .helix_propensity .K {
552
690
  background-color: #a05fa0;
553
691
  }
692
+
554
693
  .helix_propensity .M {
555
694
  background-color: #ef10ef;
556
695
  }
696
+
557
697
  .helix_propensity .F {
558
698
  background-color: #986798;
559
699
  }
700
+
560
701
  .helix_propensity .P {
561
- background-color: #00ff00;
702
+ background-color: #0f0;
562
703
  }
704
+
563
705
  .helix_propensity .S {
564
706
  background-color: #36c936;
565
707
  }
708
+
566
709
  .helix_propensity .T {
567
710
  background-color: #47b847;
568
711
  }
712
+
569
713
  .helix_propensity .W {
570
714
  background-color: #8a758a;
571
715
  }
716
+
572
717
  .helix_propensity .Y {
573
718
  background-color: #21de21;
574
719
  }
720
+
575
721
  .helix_propensity .V {
576
722
  background-color: #857a85;
577
723
  }
724
+
578
725
  .helix_propensity .B {
579
726
  background-color: #49b649;
580
727
  }
728
+
581
729
  .helix_propensity .X {
582
730
  background-color: #758a75;
583
731
  }
732
+
584
733
  .helix_propensity .Z {
585
734
  background-color: #c936c9;
586
735
  }
736
+
587
737
  .helix_propensity .gap {
588
738
  color: #ccc;
589
739
  }
740
+
590
741
  .strand_propensity {
591
742
  white-space: nowrap;
592
- font-family: monospace;
593
743
  height: 18px;
744
+ font-family: monospace;
594
745
  font-size: 12px;
595
746
  }
747
+
596
748
  .strand_propensity .A {
597
749
  background-color: #5858a7;
598
750
  }
751
+
599
752
  .strand_propensity .R {
600
753
  background-color: #6b6b94;
601
754
  }
755
+
602
756
  .strand_propensity .N {
603
757
  background-color: #64649b;
604
758
  }
759
+
605
760
  .strand_propensity .D {
606
761
  background-color: #2121de;
607
762
  }
763
+
608
764
  .strand_propensity .C {
609
765
  background-color: #9d9d62;
610
766
  }
767
+
611
768
  .strand_propensity .Q {
612
769
  background-color: #8c8c73;
613
770
  }
771
+
614
772
  .strand_propensity .E {
615
- background-color: #0000ff;
773
+ background-color: #00f;
616
774
  }
775
+
617
776
  .strand_propensity .G {
618
777
  background-color: #4949b6;
619
778
  }
779
+
620
780
  .strand_propensity .H {
621
781
  background-color: #60609f;
622
782
  }
783
+
623
784
  .strand_propensity .I {
624
785
  background-color: #ecec13;
625
786
  }
787
+
626
788
  .strand_propensity .L {
627
789
  background-color: #b2b24d;
628
790
  }
791
+
629
792
  .strand_propensity .K {
630
793
  background-color: #4747b8;
631
794
  }
795
+
632
796
  .strand_propensity .M {
633
797
  background-color: #82827d;
634
798
  }
799
+
635
800
  .strand_propensity .F {
636
801
  background-color: #c2c23d;
637
802
  }
803
+
638
804
  .strand_propensity .P {
639
805
  background-color: #2323dc;
640
806
  }
807
+
641
808
  .strand_propensity .S {
642
809
  background-color: #4949b6;
643
810
  }
811
+
644
812
  .strand_propensity .T {
645
813
  background-color: #9d9d62;
646
814
  }
815
+
647
816
  .strand_propensity .W {
648
817
  background-color: #c0c03f;
649
818
  }
819
+
650
820
  .strand_propensity .Y {
651
821
  background-color: #d3d32c;
652
822
  }
823
+
653
824
  .strand_propensity .V {
654
- background-color: #ffff00;
825
+ background-color: #ff0;
655
826
  }
827
+
656
828
  .strand_propensity .B {
657
829
  background-color: #4343bc;
658
830
  }
831
+
659
832
  .strand_propensity .X {
660
833
  background-color: #797986;
661
834
  }
835
+
662
836
  .strand_propensity .Z {
663
837
  background-color: #4747b8;
664
838
  }
665
- .strand_propensity .A,
666
- .strand_propensity .R,
667
- .strand_propensity .N,
668
- .strand_propensity .D,
669
- .strand_propensity .E,
670
- .strand_propensity .G,
671
- .strand_propensity .H,
672
- .strand_propensity .K,
673
- .strand_propensity .P,
674
- .strand_propensity .S,
675
- .strand_propensity .B,
676
- .strand_propensity .Z {
839
+
840
+ .strand_propensity .A, .strand_propensity .R, .strand_propensity .N, .strand_propensity .D, .strand_propensity .E, .strand_propensity .G, .strand_propensity .H, .strand_propensity .K, .strand_propensity .P, .strand_propensity .S, .strand_propensity .B, .strand_propensity .Z {
677
841
  color: #fcff89;
678
842
  }
843
+
679
844
  .strand_propensity .gap {
680
845
  color: #ccc;
681
846
  }
847
+
682
848
  .turn_propensity {
683
849
  white-space: nowrap;
684
- font-family: monospace;
685
850
  height: 18px;
851
+ font-family: monospace;
686
852
  font-size: 12px;
687
853
  }
854
+
688
855
  .turn_propensity .gap {
689
856
  color: #ccc;
690
857
  }
858
+
691
859
  .turn_propensity .A {
692
860
  background-color: #2cd3d3;
693
861
  }
862
+
694
863
  .turn_propensity .R {
695
864
  background-color: #708f8f;
696
865
  }
866
+
697
867
  .turn_propensity .N {
698
- background-color: #ff0000;
868
+ background-color: red;
699
869
  }
870
+
700
871
  .turn_propensity .D {
701
872
  background-color: #e81717;
702
873
  }
874
+
703
875
  .turn_propensity .C {
704
876
  background-color: #a85757;
705
877
  }
878
+
706
879
  .turn_propensity .Q {
707
880
  background-color: #3fc0c0;
708
881
  }
882
+
709
883
  .turn_propensity .E {
710
- background-color: #778888;
884
+ background-color: #788;
711
885
  }
886
+
712
887
  .turn_propensity .G {
713
- background-color: #ff0000;
888
+ background-color: red;
714
889
  }
890
+
715
891
  .turn_propensity .H {
716
892
  background-color: #708f8f;
717
893
  }
894
+
718
895
  .turn_propensity .I {
719
- background-color: #00ffff;
896
+ background-color: #0ff;
720
897
  }
898
+
721
899
  .turn_propensity .L {
722
900
  background-color: #1ce3e3;
723
901
  }
902
+
724
903
  .turn_propensity .K {
725
904
  background-color: #7e8181;
726
905
  }
727
- .turn_propensity .M {
728
- background-color: #1ee1e1;
729
- }
730
- .turn_propensity .F {
906
+
907
+ .turn_propensity .M, .turn_propensity .F {
731
908
  background-color: #1ee1e1;
732
909
  }
910
+
733
911
  .turn_propensity .P {
734
912
  background-color: #f60909;
735
913
  }
914
+
736
915
  .turn_propensity .S {
737
916
  background-color: #e11e1e;
738
917
  }
739
- .turn_propensity .T {
740
- background-color: #738c8c;
741
- }
742
- .turn_propensity .W {
918
+
919
+ .turn_propensity .T, .turn_propensity .W {
743
920
  background-color: #738c8c;
744
921
  }
922
+
745
923
  .turn_propensity .Y {
746
924
  background-color: #9d6262;
747
925
  }
926
+
748
927
  .turn_propensity .V {
749
928
  background-color: #07f8f8;
750
929
  }
930
+
751
931
  .turn_propensity .B {
752
932
  background-color: #f30c0c;
753
933
  }
934
+
754
935
  .turn_propensity .X {
755
936
  background-color: #7c8383;
756
937
  }
938
+
757
939
  .turn_propensity .Z {
758
940
  background-color: #5ba4a4;
759
941
  }
760
- .turn_propensity .N,
761
- .turn_propensity .D,
762
- .turn_propensity .G,
763
- .turn_propensity .P,
764
- .turn_propensity .S,
765
- .turn_propensity .B {
942
+
943
+ .turn_propensity .N, .turn_propensity .D, .turn_propensity .G, .turn_propensity .P, .turn_propensity .S, .turn_propensity .B {
766
944
  color: #fcff89;
767
945
  }
946
+
768
947
  .buried_index {
769
948
  white-space: nowrap;
770
- font-family: monospace;
771
949
  height: 18px;
950
+ font-family: monospace;
772
951
  font-size: 12px;
773
952
  }
953
+
774
954
  .buried_index .gap {
775
955
  color: #ccc;
776
956
  }
957
+
777
958
  .buried_index .A {
778
959
  background-color: #00a35c;
779
960
  }
961
+
780
962
  .buried_index .R {
781
963
  background-color: #00fc03;
782
964
  }
783
- .buried_index .N {
784
- background-color: #00eb14;
785
- }
786
- .buried_index .D {
965
+
966
+ .buried_index .N, .buried_index .D {
787
967
  background-color: #00eb14;
788
968
  }
969
+
789
970
  .buried_index .C {
790
- background-color: #0000ff;
971
+ background-color: #00f;
791
972
  }
792
- .buried_index .Q {
793
- background-color: #00f10e;
794
- }
795
- .buried_index .E {
973
+
974
+ .buried_index .Q, .buried_index .E {
796
975
  background-color: #00f10e;
797
976
  }
977
+
798
978
  .buried_index .G {
799
979
  background-color: #009d62;
800
980
  }
981
+
801
982
  .buried_index .H {
802
983
  background-color: #00d52a;
803
984
  }
985
+
804
986
  .buried_index .I {
805
987
  background-color: #0054ab;
806
988
  }
989
+
807
990
  .buried_index .L {
808
991
  background-color: #007b84;
809
992
  }
993
+
810
994
  .buried_index .K {
811
- background-color: #00ff00;
995
+ background-color: #0f0;
812
996
  }
997
+
813
998
  .buried_index .M {
814
999
  background-color: #009768;
815
1000
  }
1001
+
816
1002
  .buried_index .F {
817
1003
  background-color: #008778;
818
1004
  }
1005
+
819
1006
  .buried_index .P {
820
1007
  background-color: #00e01f;
821
1008
  }
1009
+
822
1010
  .buried_index .S {
823
1011
  background-color: #00d52a;
824
1012
  }
1013
+
825
1014
  .buried_index .T {
826
1015
  background-color: #00db24;
827
1016
  }
1017
+
828
1018
  .buried_index .W {
829
1019
  background-color: #00a857;
830
1020
  }
1021
+
831
1022
  .buried_index .Y {
832
1023
  background-color: #00e619;
833
1024
  }
1025
+
834
1026
  .buried_index .V {
835
1027
  background-color: #005fa0;
836
1028
  }
1029
+
837
1030
  .buried_index .B {
838
1031
  background-color: #00eb14;
839
1032
  }
1033
+
840
1034
  .buried_index .X {
841
1035
  background-color: #00b649;
842
1036
  }
1037
+
843
1038
  .buried_index .Z {
844
1039
  background-color: #00f10e;
845
1040
  }
846
- .buried_index .C,
847
- .buried_index .I,
848
- .buried_index .V {
1041
+
1042
+ .buried_index .C, .buried_index .I, .buried_index .V {
849
1043
  color: #fcff89;
850
1044
  }
851
1045
 
852
- /* see src/components/Edge.jsx#HOVER_SCALE_FACTOR (currently line 8) */
853
- .display-mode .btn-toolbar {
854
- position: absolute;
855
- padding-left: 10px;
856
- }
857
- .tooltip-inner {
858
- max-width: 400px;
859
- }
860
- .genetree-vis {
861
- /* see src/components/Edge.jsx#HOVER_SCALE_FACTOR (currently line 8) */
862
- }
863
- .genetree-vis .node,
864
- .genetree-vis .edge {
865
- cursor: pointer;
866
- }
867
- .genetree-vis .tree-wrapper {
868
- /* transitions for mouse hover, etc, interactions */
869
- /* transitions for expanding/contracting clades */
870
- }
871
- .genetree-vis .tree-wrapper * {
872
- transition: all 20ms ease-in-out;
873
- }
874
- .genetree-vis .tree-wrapper .clade {
875
- transition: transform 20ms ease-in-out;
876
- }
877
- .genetree-vis .tree-wrapper .clade .edge-rect {
878
- transition: scaleY 20ms ease-in-out, scaleX 20ms ease-in-out, transform 20ms ease-in-out;
879
- }
880
- .genetree-vis .interaction-helper {
881
- opacity: 0;
882
- }
883
- .genetree-vis .node circle {
884
- stroke: #777;
885
- fill: #fff;
886
- }
887
- .genetree-vis .speciation rect {
888
- fill: #000080;
889
- }
890
- .genetree-vis .duplication rect {
891
- fill: #cd0000;
892
- }
893
- .genetree-vis .node:hover .internal,
894
- .genetree-vis .edge:hover .internal,
895
- .genetree-vis .node:hover .gene circle,
896
- .genetree-vis .edge:hover .gene circle,
897
- .genetree-vis .node:hover ~ .clade .node rect,
898
- .genetree-vis .edge:hover ~ .clade .node rect,
899
- .genetree-vis .node:hover + .node rect,
900
- .genetree-vis .edge:hover + .node rect {
901
- transform: scale(2);
902
- }
903
- .genetree-vis .node:hover ~ .clade .interaction-rect,
904
- .genetree-vis .edge:hover ~ .clade .interaction-rect {
905
- opacity: 1;
906
- fill-opacity: 1;
907
- }
908
- .genetree-vis .node:hover ~ .clade circle,
909
- .genetree-vis .edge:hover ~ .clade circle,
910
- .genetree-vis .node:hover + .node circle,
911
- .genetree-vis .edge:hover + .node circle,
912
- .genetree-vis .node:hover .collapsed path,
913
- .genetree-vis .edge:hover .collapsed path,
914
- .genetree-vis .node:hover ~ .clade .collapsed path,
915
- .genetree-vis .edge:hover ~ .clade .collapsed path,
916
- .genetree-vis .node:hover + .node .collapsed path,
917
- .genetree-vis .edge:hover + .node .collapsed path {
918
- stroke-width: 2;
919
- }
920
- .genetree-vis .node:hover ~ .clade text,
921
- .genetree-vis .edge:hover ~ .clade text,
922
- .genetree-vis .node:hover text,
923
- .genetree-vis .edge:hover text {
924
- font-weight: bolder;
925
- }
926
- .genetree-vis .node .gene.ortholog_one2one circle,
927
- .genetree-vis .node .gene.ortholog_one2many circle,
928
- .genetree-vis .node .gene.ortholog_many2many circle {
929
- stroke: orange;
930
- }
931
- .genetree-vis .node .gene.within_species_paralog circle {
932
- stroke: green;
933
- }
934
- .genetree-vis .node .gene.self circle {
935
- stroke: red;
936
- fill: red;
937
- }
938
- .genetree-vis .node .gene.self text {
939
- font-weight: bolder;
940
- }
941
- .genetree-vis .node .gene.representative circle {
942
- stroke: orange;
943
- fill: orange;
944
- }
945
- .genetree-vis .node text {
946
- font-size: 11px;
947
- fill-opacity: 1;
948
- text-anchor: start;
949
- }
950
- .genetree-vis .collapsed path {
951
- stroke-width: 1;
952
- }
953
- .genetree-vis .domains rect {
954
- cursor: pointer;
955
- stroke-opacity: 0;
956
- }
957
- .genetree-vis .domains rect:hover {
958
- cursor: pointer;
959
- stroke-opacity: 1;
960
- }
961
- .popover-title .tooltip-title-button {
962
- margin-top: -4px !important;
963
- margin-right: 4px !important;
964
- }
965
- .msa-slider {
966
- position: relative;
967
- padding-top: 10px;
968
- padding-bottom: 0px;
969
- margin-bottom: -10px;
1046
+ .visible-detail {
1047
+ border: 1px solid #557b74;
1048
+ padding: 6px 12px;
970
1049
  }
971
- .resize-drag {
972
- background: rgba(0, 0, 0, 0);
973
- border: 4px solid #7c8383;
974
- color: red;
975
- font-size: 1px;
976
- font-family: sans-serif;
977
- border-radius: 8px;
978
- /* This makes things *much* easier */
979
- box-sizing: border-box;
1050
+
1051
+ .detail {
1052
+ margin-left: auto;
1053
+ margin-right: auto;
1054
+ padding-left: 15px;
1055
+ padding-right: 15px;
980
1056
  }
981
- .resize-container {
1057
+
1058
+ .table {
982
1059
  width: 100%;
983
- height: 100%;
1060
+ max-width: 100%;
984
1061
  }
985
1062
 
986
- /*
987
-
988
- <classNamePrefix>-root
989
-
990
- The outer container
991
-
992
- */
993
- .tree-view-root {
1063
+ .xrefs {
1064
+ border-collapse: collapse;
1065
+ border-spacing: 0;
1066
+ table-layout: fixed;
1067
+ border-color: gray;
994
1068
  }
995
1069
 
996
- /*
997
-
998
- <classNamePrefix>-root
999
-
1000
- The outer container for a single node
1001
-
1002
- */
1003
- .tree-view-node {
1004
- margin-left: 10px;
1070
+ .xref-name-col {
1071
+ width: 20%;
1005
1072
  }
1006
1073
 
1007
-
1008
- /*
1009
-
1010
- <classNamePrefix>-node-collapse-toggle.collapse-spacer
1011
-
1012
- Used to provide spacing when a parent node has no children
1013
-
1014
- */
1015
- .tree-view-node-collapse-toggle.collapse-spacer {
1016
- width: 14px;
1017
- display: inline-block;
1074
+ .xref-value-col {
1075
+ width: 80%;
1018
1076
  }
1019
1077
 
1020
- /*
1021
- <classNamePrefix>-node-collapse-toggle.<expandIconClass>
1022
-
1023
- The class to use for the icon that expands a collapsed parent node
1024
-
1025
- */
1026
-
1027
-
1028
- /*
1029
-
1030
- <classNamePrefix>-node-collapse-toggle.<collapseIconClass>
1031
-
1032
- The class to use for the icon that collapses an expanded parent node
1033
-
1034
- */
1035
-
1036
- .tree-view-node-collapse-toggle {
1037
- margin-right: 3px;
1038
- width: 14px;
1078
+ .xref-70-col {
1079
+ width: 70%;
1039
1080
  }
1040
1081
 
1041
- /*
1042
-
1043
- <classNamePrefix>-node-label
1044
-
1045
- */
1046
- .tree-view-node-label {
1047
- font-size: smaller;
1048
- margin-left: 3px;
1049
- padding: 1px;
1050
- border: 1px solid #fff;
1082
+ .xref-10-col {
1083
+ width: 10%;
1051
1084
  }
1052
1085
 
1053
- /*
1054
-
1055
- <classNamePrefix>-node-label.selected
1056
-
1057
- */
1058
- .tree-view-node-label.selected {
1059
- border: 1px solid #003f81;
1060
- border-radius: 3px;
1061
- background-color: #808080;
1086
+ .xref-id-list {
1087
+ padding-left: 0;
1088
+ list-style: none;
1062
1089
  }
1063
1090
 
1064
- /*
1065
-
1066
- <classNamePrefix>-node-checkbox
1091
+ .result-gene {
1092
+ border: 5px solid #fff;
1093
+ padding: .2em;
1094
+ }
1067
1095
 
1068
- The class for a node checkbox
1096
+ .result-gene:hover {
1097
+ border-color: #faebd7;
1098
+ }
1069
1099
 
1070
- */
1100
+ .gene-title {
1101
+ padding-top: .5em;
1102
+ }
1071
1103
 
1072
- .tree-view-node-checkbox {}
1104
+ .gene-id {
1105
+ white-space: nowrap;
1106
+ }
1073
1107
 
1074
- /*
1108
+ .gene-name {
1109
+ color: #557b74;
1110
+ }
1075
1111
 
1076
- <classNamePrefix>-node-children
1112
+ .gene-description {
1113
+ margin-bottom: 0;
1114
+ }
1077
1115
 
1078
- The class for the element that wraps a nodes children (if any exist)
1116
+ .gene-species {
1117
+ white-space: nowrap;
1118
+ padding-left: 1em;
1119
+ font-style: italic;
1120
+ }
1079
1121
 
1080
- */
1122
+ .gene-synonyms {
1123
+ white-space: nowrap;
1124
+ font-size: small;
1125
+ }
1081
1126
 
1082
- .tree-view-node-children {}
1127
+ .gene-extras {
1128
+ float: right;
1129
+ border: 1px dashed #00f;
1130
+ }
1083
1131
 
1132
+ .gene-detail-tabs {
1133
+ width: 80em;
1134
+ flex-wrap: wrap;
1135
+ display: flex;
1136
+ }
1084
1137
 
1085
- .taxogenomic-vis .gramene-search-vis {
1086
- -webkit-user-select: none;
1138
+ .gene-detail-tab-closed {
1139
+ color: #006400;
1087
1140
  cursor: pointer;
1088
1141
  }
1089
- .taxogenomic-vis .gramene-search-vis canvas {
1090
- position: absolute;
1091
- }
1092
- .taxogenomic-vis .gramene-search-vis > * {
1093
- display: inline;
1094
- }
1095
- .taxogenomic-vis .gramene-search-vis text {
1096
- font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
1097
- font-size: 12px;
1098
- fill: gray;
1099
- /* since font weight transition is not smooth, emulate
1100
- bold font with text stroke, and transition opacity. */
1101
- stroke: #557B74;
1102
- stroke-opacity: 0;
1103
- stroke-width: 0.5px;
1104
- user-select: none;
1105
- }
1106
- .taxogenomic-vis .gramene-search-vis text::selection {
1107
- background: none;
1142
+
1143
+ .gene-detail-tab-disabled {
1144
+ color: #d3d3d3;
1145
+ cursor: not-allowed;
1108
1146
  }
1109
- .taxogenomic-vis .gramene-search-vis .taxonomy * {
1110
- transition: fill 200ms ease-in-out, stroke-opacity 200ms ease-in-out;
1111
- /*,
1112
- transform 200ms ease-in-out;*/
1147
+
1148
+ .gene-detail-tab-expanded {
1149
+ color: #fff;
1150
+ cursor: pointer;
1151
+ background-color: #557b74;
1113
1152
  }
1114
- .taxogenomic-vis .gramene-search-vis .clade .results-count {
1115
- font-size: 10px;
1153
+
1154
+ .result-gene-summary {
1155
+ flex-flow: row;
1156
+ justify-content: flex-start;
1157
+ display: flex;
1116
1158
  }
1117
- .taxogenomic-vis .gramene-search-vis .clade .node circle {
1118
- stroke: #557B74;
1119
- stroke-width: 1px;
1120
- fill: #f6f6f6;
1159
+
1160
+ .result-gene-summary .species-name {
1161
+ white-space: nowrap;
1162
+ font-style: italic;
1121
1163
  }
1122
- .taxogenomic-vis .gramene-search-vis .clade .edge rect {
1123
- fill: #cccccc;
1164
+
1165
+ .result-gene-title-body {
1166
+ width: 1036px;
1167
+ flex: auto;
1124
1168
  }
1125
- .taxogenomic-vis .gramene-search-vis .clade .clade.highlight > .node > circle,
1126
- .taxogenomic-vis .gramene-search-vis .clade .clade.highlight > .edge > rect {
1127
- fill: #f0b866;
1169
+
1170
+ .closest-ortholog, .gene-summary-tair {
1171
+ cursor: pointer;
1172
+ width: 500px;
1173
+ border: 1px solid #ff8c00;
1174
+ flex: auto;
1175
+ margin-top: 10px;
1176
+ margin-left: 1rem;
1177
+ padding: 0 1rem;
1178
+ font-size: smaller;
1128
1179
  }
1129
- .taxogenomic-vis .gramene-search-vis .clade .clade.highlight > .node-label text {
1130
- fill: #557B74;
1131
- stroke-opacity: 1;
1180
+
1181
+ .closest-ortholog {
1182
+ border: 1px dotted #ff8c00;
1132
1183
  }
1133
- .taxogenomic-vis .gramene-search-vis .clade .node:hover > circle,
1134
- .taxogenomic-vis .gramene-search-vis .clade .edge:hover > circle,
1135
- .taxogenomic-vis .gramene-search-vis .clade .node:hover > rect,
1136
- .taxogenomic-vis .gramene-search-vis .clade .edge:hover > rect,
1137
- .taxogenomic-vis .gramene-search-vis .clade .node:hover ~ .node > circle,
1138
- .taxogenomic-vis .gramene-search-vis .clade .edge:hover ~ .node > circle,
1139
- .taxogenomic-vis .gramene-search-vis .clade .node:hover ~ .clade .edge > rect,
1140
- .taxogenomic-vis .gramene-search-vis .clade .edge:hover ~ .clade .edge > rect,
1141
- .taxogenomic-vis .gramene-search-vis .clade .node:hover ~ .clade .node > circle,
1142
- .taxogenomic-vis .gramene-search-vis .clade .edge:hover ~ .clade .node > circle {
1143
- fill: #f0b866;
1184
+
1185
+ .gene-summary-tair {
1186
+ border: 1px dotted #006400;
1144
1187
  }
1145
- .taxogenomic-vis .gramene-search-vis .clade .node:hover ~ .node-label text,
1146
- .taxogenomic-vis .gramene-search-vis .clade .edge:hover ~ .node-label text,
1147
- .taxogenomic-vis .gramene-search-vis .clade .node:hover ~ .clade text,
1148
- .taxogenomic-vis .gramene-search-vis .clade .edge:hover ~ .clade text {
1149
- fill: #557B74;
1150
- stroke-opacity: 1;
1188
+
1189
+ .gene-summary-tair .rest {
1190
+ display: none;
1151
1191
  }
1152
- .taxogenomic-vis .gramene-search-vis .clade .node-label:hover text {
1153
- fill: #557B74;
1154
- stroke-opacity: 1;
1192
+
1193
+ .gene-summary-tair:hover .rest, .gene-summary-tair:focus .rest {
1194
+ display: inline;
1155
1195
  }
1156
- .taxogenomic-vis .gramene-search-vis .clade .bin,
1157
- .taxogenomic-vis .gramene-search-vis .clade .full-region {
1158
- transition: none;
1159
- stroke: #557B74;
1160
- stroke-width: 0;
1161
- shape-rendering: crispEdges;
1196
+
1197
+ .gene-summary-tair:hover .ellipsis, .gene-summary-tair:focus .ellipsis {
1198
+ display: none;
1162
1199
  }
1163
- .taxogenomic-vis .gramene-search-vis .clade .bin.selected {
1164
- fill: #ea8e75;
1200
+
1201
+ .closest-ortholog:before, .gene-summary-tair:before {
1202
+ float: right;
1203
+ background: #fff;
1204
+ border: 1px dotted;
1205
+ margin-top: -12px;
1206
+ margin-right: 6px;
1207
+ padding: 0 1rem;
1208
+ position: relative;
1165
1209
  }
1166
- .taxogenomic-vis .gramene-search-vis .clade .bin:hover {
1167
- fill: #557B74;
1210
+
1211
+ .closest-ortholog:before {
1212
+ content: "Model Species Homolog";
1213
+ color: orange;
1168
1214
  }
1169
- .taxogenomic-vis .gramene-search-vis .clade .full-region.selected {
1170
- stroke-width: 1px;
1171
- stroke: #ea8e75;
1215
+
1216
+ .gene-summary-tair:before {
1217
+ content: "TAIR Curated Description";
1218
+ color: #006400;
1172
1219
  }
1173
- .taxogenomic-vis .gramene-search-vis .clade .full-region:hover {
1174
- stroke-width: 1px;
1175
- stroke: #557B74;
1220
+
1221
+ .gene-search-pic-sugg {
1222
+ width: 100%;
1223
+ height: 200px;
1224
+ background: url("suggestions.7b2830b6.png") 0 0 / contain no-repeat;
1176
1225
  }
1177
- .taxogenomic-vis .gramene-search-vis .clade .species-background {
1178
- fill: none;
1226
+
1227
+ .gene-search-pic-results {
1228
+ width: 100%;
1229
+ height: 200px;
1230
+ background: url("results.e437a98f.png") 0 0 / contain no-repeat;
1179
1231
  }
1180
- .taxogenomic-vis .gramene-search-vis .clade .node:hover ~ .species-background,
1181
- .taxogenomic-vis .gramene-search-vis .clade .edge:hover ~ .species-background,
1182
- .taxogenomic-vis .gramene-search-vis .clade .node:hover ~ .clade .species-background,
1183
- .taxogenomic-vis .gramene-search-vis .clade .edge:hover ~ .clade .species-background,
1184
- .taxogenomic-vis .gramene-search-vis .clade .clade.highlight > .species-background {
1185
- fill: #f9e3c3;
1232
+
1233
+ .gene-search-pic-genetree {
1234
+ width: 100%;
1235
+ height: 200px;
1236
+ background: url("genetree.145467e3.png") 0 0 / contain no-repeat;
1186
1237
  }
1187
1238
 
1188
1239
  /*# sourceMappingURL=index.css.map */