We Keep Coding

On hover include more detail about object PVIZ

I am using the genentech/pviz github to display proteins and peptides. I do not have enough rep to create a new tag but I think it would be a good idea to make a pviz tag related to this github : https://github.com/Genentech/pviz. I have been using this github a lot but I cannot find much information on it on stack overflow because there is not tag. I have gotten a nice graphic and have used a hover feature in the css portion to change the color of the rectangle when hovered over. However, I want to display additionally information about the peptide and or protein when hovering over it as well.
g.feature.psms.normal:hover rect.feature {
fill: black;
}
seqEntry.addFeatures(fts.map(function(ft) {
return {
//we could also use te categoryType property, for height purpose, but not grouping purpose
category : 'psms',
type : ft[2], //This would be "normal" in most cases
start : ft[0],
end : ft[1],
text : '',
}
}));
I am not sure how to display information because I cannot find any good documentation. How would I be able to display text when hovering over the peptide rectangles?

The features that I used were SVG rectangles and after playing around for a bit I have found a solution using JS.
First create a MouseoverCallback on the specific feature types you want:
pviz.FeatureDisplayer.addMouseoverCallback(['normal', 'oxidize'], function(ft) {
mouseOveredFT = ft;
var el = $('#output-mouse-over');
el.empty();
el.html('<pre>' + "This peptide starts at: " + JSON.stringify(ft['start']) + ", ends at: " +
JSON.stringify(ft['end']) + ", and has the sequence: " + JSON.stringify(ft['text']) + '</pre>')
}).addMouseoutCallback(['normal', 'oxidize'], function(ft) {
mouseOveredFT = undefined;
});
The el.html part is what you want to display. After where you create the SVG rectangle amke sure to add:
xChangeCallback : function(pStart, pEnd) {
var str = 'cursor at ' + pStart.toFixed(1) + ' - ' + pEnd.toFixed(1);
if (mouseOveredFT !== undefined) {
str += '<strong> -> on FT'
}
$('#output-x-change').html(str);
}
Then in your html document write:
<div class="row">
<div class="span2" >
<strong>Information about peptide</strong>
</div><div class="span10" id="output-mouse-over"></div>
</div>
<!-- <div class="row">-->
<!-- <div class="span2" >-->
<!-- <strong>xchange</strong>-->
<!-- </div><div class="span10" id="output-x-change"></div>-->
<!-- </div>-->
I commented out the second part because I did not need that but the second part allows you to display the location of your cursor. Meanwhile the first part display what you put in the el.html part. I hope this makes sense but I doubt many people will need help with this. I have found nothing online about this. :(

WKWebView and InnerText with newline

I am currently working on implementing a web view inside of my iOS application using Xamarin. My webView is a WkWebView. My issue is that any time the text I am passing in has a new line it fails to display. However, testing my function in my browser (chrome) along with Safari I see that it executes just fine. I did some searching and I also tried to replace the \n character with \r\n, but that did not solve my issue. What am I missing?
C#:
private void BuildText(FormEntries entry, FormResponseAnswers formAnswers) {
string function = "buildText('" + entry.Text + "', '" + formAnswers.Answer + "');";
var javaScriptCmd = (NSString)function;
webView.EvaluateJavaScript(javaScriptCmd, null);
}
formAnswers.Answer that is causing the issue is:
"Hello world from the device, I do not know how well this will display our data at all. But we will see how this works. I wonder, if I were to add enter keys will it work?\n\n\nI kinda doubt it. ";
JS:
function buildText(entryText, answer) {
var answerAreaDiv = document.getElementById('answerArea');
var holder = document.createElement('div');
holder.classList.add('holder');
var entryLabel = document.createElement("label");
entryLabel.textContent = entryText + ':';
var answerLabel = document.createElement("label");
answerLabel.innerText = answer;
holder.appendChild(entryLabel);
holder.appendChild(answerLabel);
answerAreaDiv.appendChild(holder);
}
HTML:
<body>
<div id="answerArea">
</div>
</body>

HTML elements don't line break unless you explicitly ask them to; line breaks such as \n are treated as spaces. Try inserting HTML instead, so that you can replace your newline with a <br>:
answerLabel.innerHTML = answer.replace(/\n/g, '<br>');
Example:
document.body.appendChild(document.createElement('label')).innerHTML = `first line
second line`.replace(/\n/g, '<br>');

Display summary of choices in JS

this is my first time here as a poster, please be gentle! I have zero knowledge of JS (yet, working on it) but am required to do some JS anyway. Here's my problem. I got some code (not mine) allowing a user to select multiple choices. I found the function that gathers these choices and store them
function getProductAttribute()
{
// get product attribute id
product_attribute_id = $('#idCombination').val();
product_id = $('#product_page_product_id').val();
// get every attributes values
request = '';
//create a temporary 'tab_attributes' array containing the choices of the customer
var tab_attributes = [];
$('#attributes select, #attributes input[type=hidden], #attributes input[type=radio]:checked').each(function(){
tab_attributes.push($(this).val());
});
// build new request
for (var i in attributesCombinations)
for (var a in tab_attributes)
if (attributesCombinations[i]['id_attribute'] === tab_attributes[a])
request += '/'+attributesCombinations[i]['group'] + '-' + attributesCombinations[i]['attribute'];
$('#[attsummary]').html($('#[attsummary]').html() + attributesCombinations[i]['group']+': '+attributesCombinations[i]['attribute']+'<br/>')// DISPLAY ATTRIBUTES SUMMARY
request = request.replace(request.substring(0, 1), '#/');
url = window.location + '';
// redirection
if (url.indexOf('#') != -1)
url = url.substring(0, url.indexOf('#'));
// set ipa to the customization form
$('#customizationForm').attr('action', $('#customizationForm').attr('action') + request);
window.location = url + request;
}
I need to make a simple display summary of these choices. After quite a bit of searching and findling, I came with the line with the DISPLAY SUMMARY comment, this one:
$('#[attsummary]').html($('#[attsummary]').html() + attributesCombinations[i]['group']+': '+attributesCombinations[i]['attribute']+'<br/>')
In the page where I want those options, I added an empty div with the same ID (attsummary):
<div id="attsummary"></div>
Obviously, it is not working. I know I don't know JS, but naively I really thought this would do the trick. May you share with me some pointers as to where I went wrong?
Thank you very much.

Correct form of the line it isn't working for you:
$('#attsummary').html($('#attsummary').html() + attributesCombinations[i]['group']+': '+attributesCombinations[i]['attribute']+'<br/>')

easiest way to read data from excel spreadsheet with javascript?

I have a list of airport codes, names, and locations in an Excel Spreadsheet like the below:
+-------+----------------------------------------+-------------------+
| Code | Airport Name | Location |
+-------+----------------------------------------+-------------------+
| AUA | Queen Beatrix International Airport | Oranjestad, Aruba|
+-------+----------------------------------------+-------------------+
My Javascript is passed a 3 character string that should be an airline code. When that happens I need to find the code on the spreadsheet and return the Airport Name and Location.
Im thinking something like:
var code = "AUA";
console.log(getAirportInfo(code));
function getAirportInfo(code) {
// get information from spreadsheet
//format info (no help needed there)
return airportInfo;
}
Where the log would write out:
Oranjestad, Aruba (AUA): Queen Beatrix International Airport
What is the easiest method to get the data I need from the spreadsheet?
Extra Info:
The spreadsheet has over 17,000 entries
The function alluded to above may be called up to 8 times in row
I don't have to use an Excel Spreadsheet thats just what I have now
I will never need to edit the spreadsheet with my code
I did search around the web but everything I could find was much more complicated than what Im trying to do so it made it hard to understand what Im looking for.
Thank you for any help pointing me in the right direction.

I ended up using a tool at shancarter.com/data_converter to convert my flie to a JSON file and linked that to my page. Now I just loop through that JSON object to get what I need. This seemed like the simplest way for my particular needs.

I've used a plain text file(csv, or tsv both of which can be exported directly from Excel)
Loaded that into a string var via xmlhttprequest. Usually the browsers cache will stop having to download the file on each page load.
Then have a Regex parse out the values as needed.
All without using any third party....I can dig the code out if you wish.
Example:
you will need to have the data.txt file in the same web folder as this page, or update the paths...
<html>
<head>
<script>
var fileName = "data.txt";
var data = "";
req = new XMLHttpRequest();
req.open("GET", fileName, false);
req.addEventListener("readystatechange", function (e) {
data = req.responseText ;
});
req.send();
function getInfoByCode(c){
if( data == "" ){
return 'DataNotReady' ;
} else {
var rx = new RegExp( "^(" + c + ")\\s+\\|\\s+(.+)\\s+\\|\\s+\\s+(.+)\\|", 'm' ) ;
var values = data.match(rx,'m');
return { airport:values[2] , city:values[3] };
}
}
function clickButton(){
var e = document.getElementById("code");
var ret = getInfoByCode(e.value);
var res = document.getElementById("res");
res.innerText = "Airport:" + ret.airport + " in " + ret.city;
}
</script>
</head>
<body>
<input id="code" value="AUA">
<button onclick="clickButton();">Find</button>
<div id="res">
</div>
</body>
</html>

Unable to retrieve values from eBay API response using Javascript

I am trying to build a very simple tool for use at my work. I work for eBay and currently the tools available are cumbersome for the task. We are asked to compare text and images to check that sellers aren't stealing each others content. I am using the eBay Trading API and the sample HTML/CSS/Javascript code given when the developer account was created. Ultimately what I hope to achieve is a simple page that displays two items' photo and description next to each other. However, right now I am simply trying to edit the sample code given to display the start date of the auction.
My question is this: I am trying add a variable who's value is determined by a response from the API. some of these are provided in the sample however, when I add my own var starttime = items.listingInfo.startTime to the function and add the variable to the HTML table none of the data displays including those that displayed prior to my addition. Unfortunately I don't have more than a rudimentary understanding of javascript and so am unsure if I am even properly phrasing this question, let alone getting the syntax of my addition correct. What am I doing wrong?
below is the sample text with my addition of one declared variable (starttime) and one addition to the HTML table
<html>
<head>
<title>eBay Search Results</title>
<style type="text/css">body { font-family: arial,sans-serif;} </style>
</head>
<body>
<h1>eBay Search Results</h1>
<div id="results"></div>
<script>
function _cb_findItemsByKeywords(root)
{
var items = root.findItemsByKeywordsResponse[0].searchResult[0].item || [];
var html = [];
html.push('<table width="100%" border="0" cellspacing="0" cellpadding="3"><tbody>');
for (var i = 0; i < items.length; ++i)
{
var item = items[i];
var title = item.title;
var viewitem = item.viewItemURL;
var starttime = items.listingInfo.startTime;
if (null != title && null != viewitem)
{
html.push('<tr><td>' + '<img src="' + pic + '" border="0">' + '</td>' +
'<td>' + title + '' + starttime + '</td></tr>');
}
}
html.push('</tbody></table>');
document.getElementById("results").innerHTML = html.join("");
}
</script>
<!--
Use the value of your appid for the appid parameter below.
-->
<script src=http://svcs.ebay.com/services/search/FindingService/v1?SECURITY-APPNAME=xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx&OPERATION-NAME=findItemsByKeywords&SERVICE-VERSION=1.0.0&RESPONSE-DATA-FORMAT=JSON&callback=_cb_findItemsByKeywords&REST-PAYLOAD&keywords=iphone%203g&paginationInput.entriesPerPage=3>
</script>
</body>
</html>"

If you believe listingInfo is an property of individual items, and that it is an object that has the property startTime, then the proper syntax is:
var item = items[i];
var title = item.title;
var viewitem = item.viewItemURL;
var starttime = item.listingInfo.startTime;
You are currently referencing items which is the array of items, not an individual item.
Update
I looked into this via the URL you put in the comments. The solution to this particular problem is this:
var starttime = item.listingInfo[0].startTime;
I hope that helps. Please review the FAQ; Imho this question falls outside the scope of this site (the question is really quite narrow, and not likely to help anyone else). I recommend Mozilla Developer Network as a source for learning more about JavaScript.