How can I build this kind of UI, from AWS Comprehend Medical? - reactjs

I'm using the AWS machine learning service Comprehend Medical to analyse clinical texts and extract data.
Some context info (skippable maybe):
This is the type of input:
Pt is 40yo mother, highschool teacher
HPI : Sleeping trouble on present dosage of Clonidine. Severe Rash on face and leg, slightly itchy
Meds : Vyvanse 50 mgs po at breakfast daily,
Clonidine 0.2 mgs -- 1 and 1 / 2 tabs po qhs
HEENT : Boggy inferior turbinates, No oropharyngeal lesion
Lungs : clear
Heart : Regular rhythm
Skin : Mild erythematous eruption to hairline
Follow-up as scheduled
This is the kind of output I get from AWS:
{
"Entities": [
{
"Id": 0,
"BeginOffset": 6,
"EndOffset": 10,
"Score": 0.9984116554260254,
"Text": "40yo",
"Category": "PROTECTED_HEALTH_INFORMATION",
"Type": "AGE",
"Traits": []
},
{
"Id": 1,
"BeginOffset": 19,
"EndOffset": 37,
"Score": 0.28823626041412354,
"Text": "highschool teacher",
"Category": "PROTECTED_HEALTH_INFORMATION",
"Type": "PROFESSION",
"Traits": []
},
...
Then I would like to render this kind of UI, the same way AWS does in their console to represent Comprehend medical outputs (see the image) :
AWS Console Comprehend Medical output representation
I managed to tag the text. But I have no idea in how to make the tagged arrows: represent those dependecies between html elements.
I have tried some react libraries like Taggy(only do tagging) and explored some other solutions like Spacey (will require SSR and not even the same output of tags + tagged arrows ),
Anyone could suggest an approach to do this kind of tagged arrows between those html components?
Thank you ma people.

Related

React.js: array.map/forEach wont print on screen but console.log works

I have a function that needs to find nearest parent id, the result is in an object so I convert it to array then when I loop through the array and need to display it, it doesnt work. but when I check using console.log it is working fine. Any advice?
function findParentsProject(brands, id, parent = null) {
for (let brand of brands) {
const result =
brand.id === id
? parent
: brand.projects && findParentsProject(brand.projects, id, brand);
if (result) {
var list = Object.values(result.projects);
return list.forEach((project, index) => {
//console.log(project.name)
<p>{project.name}</p>;
});
}
}
}
this is the result if comment out the console.log
console.log
here is the data(brands):
{
"projects": [
{
"id": 1,
"name": "project 1",
"typeOfWork": "Brand Identity",
"brandDetails": "Strategy and brand id entity for the ambitious online art retailer",
"Awards": "MARKies Awards 2021",
"AwardDetails": "Most Creative Audio (Bronze)",
"Content": "While this competition is healthy, it often means that competitors tend to produce similiar posts, thus drowning in the ocean of posts that in social media. How do make Allianz unique so it stands out more among the crowd, without so much resorting to pay-to-win?"
},
{
"id": 2,
"name": "project 2",
"typeOfWork": "Editorial & Prints",
"brandDetails": "Strategy and brand id entity for the ambitious online art retailer",
"Awards": "MARKies Awards 2021",
"AwardDetails": "Most Creative Audio (Bronze)",
"Content": "While this competition is healthy, it often means that competitors tend to produce similiar posts, thus drowning in the ocean of posts that in social media. How do make Allianz unique so it stands out more among the crowd, without so much resorting to pay-to-win?"
},
{
"id": 3,
"name": "project 3",
"typeOfWork": "Digital Design",
"brandDetails": "Strategy and brand id entity for the ambitious online art retailer",
"Awards": "MARKies Awards 2021",
"AwardDetails": "Most Creative Audio (Bronze)",
"Content": "While this competition is healthy, it often means that competitors tend to produce similiar posts, thus drowning in the ocean of posts that in social media. How do make Allianz unique so it stands out more among the crowd, without so much resorting to pay-to-win?"
}
]
}

Accessing information nested second level deep in an array using React Native ‘fetch’ method

I can access information on the top level of array. But I can’t access things on the second level down in the database.
I’m using the basic ‘Fetch’ method from here:
https://facebook.github.io/react-native/docs/network
And this is the database I’m trying to access.
(I stripped off my API key from the URL but it looks like it still works. In case it doesn't work anymore for you, I've copy & pasted the content down below in the code section.)
https://api.tfl.gov.uk/Line/london-overground/Status
I want to access the short description text of the current line status (such as “minor delay”, “reduced service” and so on).
The information in question is stored under “lineStatuses”/ “statusSeverityDescription” in the database.
See below what I've tried so far with Expo Snack samples.
Option 1)
https://snack.expo.io/#leourushi/api-call-01
If I use
{item.name}
It correctly returns the name of the line.
However, if I try this,
{item.lineStatuses.statusSeverityDescription}
The screen will return nothing.
Option 2)
https://snack.expo.io/#leourushi/api-call-02
I modified the initial instance of dataSource like this:
dataSource: responseJson[0].lineStatuses
And then, I tried to return this:
{item.statusSeverityDescription}
This time, it correctly returns the line status description text. But the Android emulator returns this error message:
“Failed child context type: Invalid child context virtualizedCell.cellKey of type number supplied to CellRenderer, expected string...
Below is the content of the database when I checked earlier. (You will also see the same database in the Expo links above)
[
{
"$type": "Tfl.Api.Presentation.Entities.Line, Tfl.Api.Presentation.Entities",
"id": "london-overground",
"name": "London Overground",
"modeName": "overground",
"disruptions": [],
"created": "2019-06-03T16:21:44.04Z",
"modified": "2019-06-03T16:21:44.04Z",
"lineStatuses": [
{
"$type": "Tfl.Api.Presentation.Entities.LineStatus, Tfl.Api.Presentation.Entities",
"id": 0,
"lineId": "london-overground",
"statusSeverity": 7,
"statusSeverityDescription": "Reduced Service",
"reason": "LONDON OVERGROUND: Until further notice, reduced service between Gospel Oak and Barking. A temporary timetable is in place, with four car trains running every 30 minutes. New trains may provide additional services, resulting in an increased frequency. Tuesday 28, Wednesday 29, Thursday 30 and Friday 31 May, the 2313 Barking to Gospel Oak service will terminate at Upper Holloway at 23:40 and the 23:25 train from Gospel Oak to Barking will not run and the last departure will be at 22:48",
"created": "0001-01-01T00:00:00",
"validityPeriods": [
{
"$type": "Tfl.Api.Presentation.Entities.ValidityPeriod, Tfl.Api.Presentation.Entities",
"fromDate": "2019-05-20T03:30:00Z",
"toDate": "2019-08-25T01:29:00Z",
"isNow": false
}
],
"disruption": {
"$type": "Tfl.Api.Presentation.Entities.Disruption, Tfl.Api.Presentation.Entities",
"category": "Information",
"categoryDescription": "Information",
"description": "LONDON OVERGROUND: Until further notice, reduced service between Gospel Oak and Barking. A temporary timetable is in place, with four car trains running every 30 minutes. New trains may provide additional services, resulting in an increased frequency. Tuesday 28, Wednesday 29, Thursday 30 and Friday 31 May, the 2313 Barking to Gospel Oak service will terminate at Upper Holloway at 23:40 and the 23:25 train from Gospel Oak to Barking will not run and the last departure will be at 22:48",
"additionalInfo": "For train times see the temporary timetable. For more information and travel options, visit tfl.gov.uk/gospel-oak-barking-trains",
"created": "2019-05-14T14:07:00Z",
"affectedRoutes": [],
"affectedStops": [],
"closureText": "reducedService"
}
}
],
"routeSections": [],
"serviceTypes": [
{
"$type": "Tfl.Api.Presentation.Entities.LineServiceTypeInfo, Tfl.Api.Presentation.Entities",
"name": "Regular",
"uri": "/Line/Route?ids=London Overground&serviceTypes=Regular"
},
{
"$type": "Tfl.Api.Presentation.Entities.LineServiceTypeInfo, Tfl.Api.Presentation.Entities",
"name": "Night",
"uri": "/Line/Route?ids=London Overground&serviceTypes=Night"
}
],
"crowding": {
"$type": "Tfl.Api.Presentation.Entities.Crowding, Tfl.Api.Presentation.Entities"
}
}
]
I’d like a pointer on how to extract information from things buried in the second level down in an array using React Native.
I don’t need to loop through the database. I only need to extract one thing from there.
Seems to be a problem with your key format being a number.
Use option 2 (this is the correct way to populate your dataSource), and add .toString() to your key extractor, like this - keyExtractor={({id}, index) => id.toString()}

Google Translate get synonyms and examples

Can I access word's synonyms and examples along with the translation itself, when using Google Translate API?
I checked out docs but I don't see anything like that.
No, you cannot get the synonyms and examples along with the translated text.As currently they have only 3 methods in the Translate API.The 3 methods are detections.list, languages.list and translations.list. So i think it would be great if you make a feature request for this API at PIT of AppEngine.
Pearson released their free API which includes examples, part of speech, and synonyms. Check it out: http://developer.pearson.com/apis/dictionaries
http://api.pearson.com/v2/dictionaries/lase%20/entries?headword=hola
{
"status": 200,
"offset": 0,
"limit": 10,
"count": 1,
"total": 1,
"url": "/v2/dictionaries/lase /entries?headword=hola",
"results": [
{
"datasets": [
"lase",
"dictionary"
],
"headword": "hola",
"id": "ct59rx0q97",
"part_of_speech": "interjection",
"senses": [

searching an array deep inside a mongo document

in my mongo collection called pixels, I have documents like the sample
I'm looking for a way to search in the actions.tags part of the documents?
db.pixelsactifs.actions.find({tags:{$in : ["Environnement"]}})
db.pixelsactifs.find({actions.tags:{$in : {Environnement}})
doesn't work. I'm also looking for the PHP equivalent ?
I'm also asking myself should I make an "actions" collection instead of putting everything inside one document
I'm new to mongo so any good tutorial on structuring the db would be great
Thanks for the insight
{
"_id": { $oid": "51b98009e4b075a9690bbc71" },
"name": "open Atlas",
"manager": "Tib Kat",
"type": "Association",
"logo": "",
"description": "OPEN ATLAS",
"actions": [
{
"name": "Pixel Humain",
"tags": [ "Toutes thémathiques" ],
"description": "le PH agit localement",
"images": [],
"origine": "oui",
"website": "www.echolocal.org"
}
],
"email": "my#gmail.com",
"adress": "102 rue",
"cp": "97421",
"city": "Saint louis",
"country": "Réunion",
"phone": "06932"
}
you can try like this
collectionName->find(array("actions.tags" => array('$in' => "Environnement")));
I do not think you need to maintain the actions in separate collection. NoSQL gives you more flexibility to do embed th document . Event it allows sub document also be indexed . True power of NoSQL comes with merging the document into each other to get the faster retrieval. The only short coming I can see here , you can not get the part of sub document . find will always return the complete Parent document. In case you want to show one entry of subdocument array , it is not possible . It will return the whole subdocument and you have to filter in on the client side. So if you are planning to show action as individual to end user , it is better to have in separate collection
Read here : http://docs.mongodb.org/manual/use-cases/

graph api array comments and updates

I was wondering how i would display the comments story tags with the following array....
{ "data": [ {
"id": "1364392319_4278554326462",
"from": {
"name": "Dave Morin",
"id": "1364392319" },
"story": "Dave Morin was tagged in Shae Rachael Garton's album Mobile Uploads.",
"story_tags": {
"0": [ {
"id": 1364392319,
"name": "Dave Morin",
"offset": 0,
"length": 10,
"type": "user" } ],
"25": [ {
"id": 100000204772261,
"name": "Shae Rachael Garton",
"offset": 25,
"length": 19, "type": "user" } ] },
Obviously its layed out better but thats the best i could grab :)
I don't completely understand your question, but it sounds like you're asking how to best use the information in the story_tags parameter to recreate the way Facebook highlights the username when such a post is displayed on Facebook.com?
It would help to know what code are you using and what the problem is if you want specific code examples, because it looks like you have the data you need there, but:
For each entry in the story_tags array:
id is the User or Page ID linked to by this tag
name is the name of that object
offset is the first character in the original message which should be highlighted/linked (i.e In this case, the original message is the story on the next level out` )
length is the number of characters to be highlighted/linked
type is the type of object linked in the tag
So for the example there:
Dave Morin was tagged in Shae Rachael Garton's album Mobile Uploads.
Tagging at offset 0 for 10 characters and offset 25 for 19 would highlight it like this:
Dave Morin was tagged in Shae Rachael Garton's album Mobile Uploads.
With the first link linking to Dave's profile and the second to Shae's

Resources