Skip to content

Commit

Permalink
Nicer looking tooltip
Browse files Browse the repository at this point in the history
  • Loading branch information
@joshkh
joshkh committed Jun 9, 2017
1 parent 8a1f0f5 commit 1078578
Show file tree
Hide file tree
Showing 10 changed files with 152 additions and 18 deletions.
26 changes: 24 additions & 2 deletions js/components/link.js
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
var Draw, Engine, Link, React, _, center, circle, g, parser, path, ref, text,
var Draw, Engine, Link, Messenger, React, _, center, circle, g, parser, path, ref, text,
slice = [].slice,
bind = function(fn, me){ return function(){ return fn.apply(me, arguments); }; },
extend = function(child, parent) { for (var key in parent) { if (hasProp.call(parent, key)) child[key] = parent[key]; } function ctor() { this.constructor = child; } ctor.prototype = parent.prototype; child.prototype = new ctor(); child.__super__ = parent.prototype; return child; },
Expand All @@ -12,6 +12,8 @@ Draw = require("../layout/draw");

_ = require('underscore');

Messenger = require('./messenger');

ref = React.DOM, circle = ref.circle, g = ref.g, text = ref.text, path = ref.path;

center = function(arg) {
Expand Down Expand Up @@ -79,14 +81,34 @@ Link = (function(superClass) {
};

Link.prototype.focusParticipants = function(bool) {
var tooltipText;
this.props.model.set({
focus: bool
});
return this.props.model.get("features").map(function(f) {
this.props.model.get("features").map(function(f) {
return f.get("participant").set({
focus: bool
});
});
tooltipText = [];
console.log("LINK", this.props);
this.props.model.get("features").each(function(feature) {
return feature.get("sequenceData").each(function(sd) {
var interactorLabel, pos;
console.log("SD", sd);
interactorLabel = sd.get("feature").get("participant").get("interactor").get("label");
pos = "(" + sd.get("pos") + ")";
return tooltipText.push(interactorLabel + " " + pos);
});
});
if (bool === true) {
return Messenger.publish("label", {
title: "Interaction",
text: tooltipText
});
} else {
return Messenger.publish("label", null);
}
};

Link.prototype.render = function() {
Expand Down
7 changes: 6 additions & 1 deletion js/components/participant.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -40,8 +40,13 @@ Participant = (function(superClass) {
};

Participant.prototype.focusMe = function(bool) {
var tt;
if (bool === true) {
Messenger.publish("label", this.props.model.get("interactor").get("label") + " (" + this.props.model.get("interactor").get("id") + ")");
tt = {
title: "Participant",
text: [this.props.model.get("interactor").get("label"), "(" + this.props.model.get("interactor").get("id") + ")"]
};
Messenger.publish("label", tt);
} else {
Messenger.publish("label", null);
}
Expand Down
22 changes: 19 additions & 3 deletions js/components/tooltip.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -35,7 +35,7 @@ Tooltip = (function(superClass) {
};

Tooltip.prototype.render = function() {
var adjusted, alignLeft, padding, ref1, textHeight, textWidth, textX, textY;
var adjusted, alignLeft, padding, ref1, sub, textHeight, textWidth, textX, textY;
padding = 5;
ref1 = this.state, textWidth = ref1.textWidth, textHeight = ref1.textHeight, textX = ref1.textX, textY = ref1.textY;
textWidth += padding * 2;
Expand All @@ -61,10 +61,26 @@ Tooltip = (function(superClass) {
}), text({
className: "labelHeading",
ref: "text"
}, tspan({
}, this.props.message.title ? tspan({
className: "labelTitle",
x: 0,
dy: "1.4em"
}, this.props.message))));
}, this.props.message.title) : void 0, (function() {
var i, len, ref2, ref3, results;
if (((ref2 = this.props.message) != null ? ref2.text : void 0) != null) {
ref3 = this.props.message.text;
results = [];
for (i = 0, len = ref3.length; i < len; i++) {
sub = ref3[i];
results.push(tspan({
className: "labelSub",
x: 0,
dy: "1.4em"
}, sub));
}
return results;
}
}).call(this))));
};

return Tooltip;
Expand Down
11 changes: 10 additions & 1 deletion less/circle.less
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,7 @@ body {
transition: all 150ms ease-in;
stroke: #3e3e3e;
stroke-width: 1;
opacity: 0.8;
opacity: 0.9;
}

.participantLabel {
Expand Down Expand Up @@ -68,6 +68,15 @@ body {
z-index: 9999;
}

.labelTitle {
font-size: 0.8em;
font-weight: bold;
}

.labelSub {
font-size: 0.8em;
}

.annotation {

text {
Expand Down
9 changes: 8 additions & 1 deletion public/css/circle.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,7 @@ body {
transition: all 150ms ease-in;
stroke: #3e3e3e;
stroke-width: 1;
opacity: 0.8;
opacity: 0.9;
}
.participantLabel {
font-size: 0.8em;
Expand Down Expand Up @@ -48,6 +48,13 @@ body {
.label {
z-index: 9999;
}
.labelTitle {
font-size: 0.8em;
font-weight: bold;
}
.labelSub {
font-size: 0.8em;
}
.annotation text {
fill: black;
}
Expand Down
57 changes: 50 additions & 7 deletions public/dist/circle.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -71,7 +71,7 @@ Label = (function(superClass) {
module.exports = Label;

},{"react":205,"underscore":206}],2:[function(require,module,exports){
var Draw, Engine, Link, React, _, center, circle, g, parser, path, ref, text,
var Draw, Engine, Link, Messenger, React, _, center, circle, g, parser, path, ref, text,
slice = [].slice,
bind = function(fn, me){ return function(){ return fn.apply(me, arguments); }; },
extend = function(child, parent) { for (var key in parent) { if (hasProp.call(parent, key)) child[key] = parent[key]; } function ctor() { this.constructor = child; } ctor.prototype = parent.prototype; child.prototype = new ctor(); child.__super__ = parent.prototype; return child; },
Expand All @@ -85,6 +85,8 @@ Draw = require("../layout/draw");

_ = require('underscore');

Messenger = require('./messenger');

ref = React.DOM, circle = ref.circle, g = ref.g, text = ref.text, path = ref.path;

center = function(arg) {
Expand Down Expand Up @@ -152,14 +154,34 @@ Link = (function(superClass) {
};

Link.prototype.focusParticipants = function(bool) {
var tooltipText;
this.props.model.set({
focus: bool
});
return this.props.model.get("features").map(function(f) {
this.props.model.get("features").map(function(f) {
return f.get("participant").set({
focus: bool
});
});
tooltipText = [];
console.log("LINK", this.props);
this.props.model.get("features").each(function(feature) {
return feature.get("sequenceData").each(function(sd) {
var interactorLabel, pos;
console.log("SD", sd);
interactorLabel = sd.get("feature").get("participant").get("interactor").get("label");
pos = "(" + sd.get("pos") + ")";
return tooltipText.push(interactorLabel + " " + pos);
});
});
if (bool === true) {
return Messenger.publish("label", {
title: "Interaction",
text: tooltipText
});
} else {
return Messenger.publish("label", null);
}
};

Link.prototype.render = function() {
Expand Down Expand Up @@ -209,7 +231,7 @@ Link = (function(superClass) {

module.exports = Link;

},{"../layout/draw":9,"../layout/engine":10,"react":205,"underscore":206}],3:[function(require,module,exports){
},{"../layout/draw":9,"../layout/engine":10,"./messenger":3,"react":205,"underscore":206}],3:[function(require,module,exports){
var Mediator, mediator;

Mediator = require("mediator-js").Mediator;
Expand Down Expand Up @@ -263,8 +285,13 @@ Participant = (function(superClass) {
};

Participant.prototype.focusMe = function(bool) {
var tt;
if (bool === true) {
Messenger.publish("label", this.props.model.get("interactor").get("label") + " (" + this.props.model.get("interactor").get("id") + ")");
tt = {
title: "Participant",
text: [this.props.model.get("interactor").get("label"), "(" + this.props.model.get("interactor").get("id") + ")"]
};
Messenger.publish("label", tt);
} else {
Messenger.publish("label", null);
}
Expand Down Expand Up @@ -545,7 +572,7 @@ Tooltip = (function(superClass) {
};

Tooltip.prototype.render = function() {
var adjusted, alignLeft, padding, ref1, textHeight, textWidth, textX, textY;
var adjusted, alignLeft, padding, ref1, sub, textHeight, textWidth, textX, textY;
padding = 5;
ref1 = this.state, textWidth = ref1.textWidth, textHeight = ref1.textHeight, textX = ref1.textX, textY = ref1.textY;
textWidth += padding * 2;
Expand All @@ -571,10 +598,26 @@ Tooltip = (function(superClass) {
}), text({
className: "labelHeading",
ref: "text"
}, tspan({
}, this.props.message.title ? tspan({
className: "labelTitle",
x: 0,
dy: "1.4em"
}, this.props.message))));
}, this.props.message.title) : void 0, (function() {
var i, len, ref2, ref3, results;
if (((ref2 = this.props.message) != null ? ref2.text : void 0) != null) {
ref3 = this.props.message.text;
results = [];
for (i = 0, len = ref3.length; i < len; i++) {
sub = ref3[i];
results.push(tspan({
className: "labelSub",
x: 0,
dy: "1.4em"
}, sub));
}
return results;
}
}).call(this))));
};

return Tooltip;
Expand Down
2 changes: 1 addition & 1 deletion public/dist/circle.js.map
View file

Large diffs are not rendered by default.

20 changes: 20 additions & 0 deletions src/components/link.coffee
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@ React = require 'react'
Engine = require '../layout/engine'
Draw = require "../layout/draw"
_ = require 'underscore'
Messenger = require './messenger'

{circle, g, text, path} = React.DOM

Expand Down Expand Up @@ -49,6 +50,24 @@ class Link extends React.Component
@props.model.get("features").map (f) ->
f.get("participant").set focus: bool

tooltipText = []

console.log "LINK", @props

@props.model.get("features").each (feature) ->
feature.get("sequenceData").each (sd) ->
console.log "SD", sd
interactorLabel = sd.get("feature").get("participant").get("interactor").get("label")
pos = "(" + sd.get("pos") + ")"

tooltipText.push interactorLabel + " " + pos

if bool is true
Messenger.publish "label", {title: "Interaction", text: tooltipText}
else
Messenger.publish "label", null


render: ->

views = []
Expand Down Expand Up @@ -93,6 +112,7 @@ class Link extends React.Component
className: "link"
opacity: "0.9"
fill: if @props.model.get("focus") then "deepskyblue" else "#e5e5e5" # @props.view.fill
# fill: @props.view.fill
d: Draw.link views
style: opacity: 0.8

Expand Down
9 changes: 8 additions & 1 deletion src/components/participant.coffee
View file
Original file line number Diff line number Diff line change
Expand Up @@ -29,7 +29,14 @@ class Participant extends React.Component

focusMe: (bool) =>
if bool is true
Messenger.publish "label", @props.model.get("interactor").get("label") + " (" + @props.model.get("interactor").get("id") + ")"
tt =
title: "Participant"
text: [
@props.model.get("interactor").get("label"),
"(" + @props.model.get("interactor").get("id") + ")"
]

Messenger.publish "label", tt
else
Messenger.publish "label", null
@props.model.set focus: bool
Expand Down
7 changes: 6 additions & 1 deletion src/components/tooltip.coffee
View file
Original file line number Diff line number Diff line change
Expand Up @@ -33,7 +33,12 @@ class Tooltip extends React.Component
g {transform: "translate(#{adjusted.x}, #{adjusted.y})"},
rect {className: "container", x: textX, y: textY, width: textWidth, height: textHeight}
text {className: "labelHeading", ref: "text"},
tspan {x: 0, dy: "1.4em"}, @props.message
if @props.message.title
tspan {className: "labelTitle", x: 0, dy: "1.4em"}, @props.message.title
if @props.message?.text?
for sub in @props.message.text
tspan {className: "labelSub", x: 0, dy: "1.4em"}, sub



module.exports = Tooltip

0 comments on commit 1078578

Please sign in to comment.