Skip to content

Commit d34eb68

Browse files
ElaineRosenbergElaineRosenberg
authored
Merge pull request #14 from neo4j-documentation/add-yelp-agreement-block
Add a Yelp Dataset Agreement component
2 parents 33f509d + 8f020bf commit d34eb68

File tree

4 files changed

+136
-0
lines changed

4 files changed

+136
-0
lines changed

‎preview-src/applied-graph-algo-course-yelp.adoc

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
= Applied Graph Algo Course
2+
:uri-yelp-dataset-agreement-pdf: https://s3-media3.fl.yelpcdn.com/assets/srv0/engineering_pages/bea5c1e92bf3/assets/vendor/yelp-dataset-agreement.pdf
3+
:neo4j-version: 3.5
4+
:page-type: training-course-index
5+
:page-pagination: next
6+
:page-layout: training
7+
:page-course-name: applied-algos
8+
:page-theme: training
9+
10+
We will start with an existing web application (a simple business reviews website written in React.js) populated with data from the Yelp public dataset in Neo4j. We then work to enhance the existing functionality of the application using graph algorithms.
11+
12+
== Exercise
13+
14+
Your exercise for this module is to get all the tools up and running and talking to each other.
15+
16+
[#yelp-dataset-agreement]
17+
--
18+
Before creating a Yelp Neo4j Sandbox instance, you need to read and agree to the {uri-yelp-dataset-agreement-pdf}[Yelp Dataset License^].
19+
--
20+
21+
. Create a https://sandbox.neo4j.com/?usecase=yelp[Yelp Neo4j Sandbox instance^,id=yelp-create-sandbox-link].
22+
*Note*: You must log in to the Neo4j Sandbox site. This may require you to register with Neo4j.
23+
. In Yelp Sandbox you just created, click the *Open Neo4j Browser* button to open a Neo4j Browser for the Yelp database. You will be using this Neo4j Browser window throughout this course.
24+
. In Neo4j Browser, complete the steps in the first Neo4j Browser Guide (:play applied_graph_algorithms), *Cypher Refresher*.
25+
. Open the https://codesandbox.io/s/github/neo4j-contrib/training-v2/tree/master/Courses/AppliedGraphAlgorithms/react-app[React application in CodeSandbox^]. This is the initial version of our business reviews application. You will be using this Code Sandbox window throughout this course.
26+
. In CodeSandbox:
27+
.. Sign in to CodeSandbox with your github credentials.
28+
.. Click Fork.
29+
.. Edit the *.env* file by replacing the default environment variables with the credentials for your Yelp Neo4j Sandbox. The URL and credentials are available to you from your Yelp sandbox pane if you open the details of the pane by selecting arrow to the right of the *Open Neo4j Browser* button.
30+
... Replace the value for REACT_APP_NEO4J_URI with the value of *Websocket Bolt URL* from the *Connection Details* tab of the Yelp Sandbox.
31+
... Replace the value for REACT_APP_NEO4J_PASSWORD with the *Password* in the *Connection Details* tab of the Yelp Sandbox.
32+
.. Save this file.
33+
.. Click the refresh icon to connect the CodeSandbox Browser (on the right) to the database.
34+
.. Confirm that you can now view data in the database by selecting a name in the drop down (initially selected with Dolores). Data should be retrieved for each user.

‎preview-src/ui-model.yml

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -144,6 +144,9 @@ page:
144144
- content: Training enrollement
145145
url: training-enrollment.html
146146
urlType: internal
147+
- content: Course Yelp
148+
url: applied-graph-algo-course-yelp.html
149+
urlType: internal
147150

148151

149152
asciidoc:

‎src/css/training.css

Lines changed: 40 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -780,3 +780,43 @@ body.training .button {
780780
.training-help p {
781781
padding: 0.25rem 0;
782782
}
783+
784+
#yelp-dataset-agreement {
785+
padding: 0.75em;
786+
border: 1px solid var(--colour-grey-300);
787+
margin-bottom: 1em;
788+
margin-right: 1em;
789+
}
790+
791+
#yelp-dataset-agreement .button {
792+
margin-bottom: 0.25rem;
793+
margin-top: 0.5rem;
794+
}
795+
796+
#yelp-dataset-agreement p {
797+
padding: 0;
798+
margin: 0;
799+
}
800+
801+
#yelp-dataset-agreement .paragraph {
802+
padding-bottom: 0;
803+
margin-bottom: 0;
804+
}
805+
806+
#yelp-dataset-agreement button {
807+
display: block;
808+
}
809+
810+
#yelp-dataset-agreement label[for="yelp-dataset-agreement-check"] {
811+
font-weight: 600;
812+
}
813+
814+
#yelp-dataset-agreement.has-focus {
815+
background: white;
816+
animation: highlight 2.5s ease;
817+
}
818+
819+
@keyframes highlight {
820+
0% { background: aliceblue; }
821+
100% { background: white; }
822+
}

‎src/js/23-yelp-agreement.js

Lines changed: 59 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,59 @@
1+
document.addEventListener('DOMContentLoaded', function () {
2+
// Yelp dataset
3+
var yelpDatasetAgreementElement = document.getElementById('yelp-dataset-agreement')
4+
var yelpCreateSandboxLinkElement = document.getElementById('yelp-create-sandbox-link')
5+
6+
if (yelpDatasetAgreementElement && yelpCreateSandboxLinkElement) {
7+
var neo4jYelpAgreement = ''
8+
if (typeof window.localStorage !== 'undefined' && typeof window.localStorage.getItem === 'function') {
9+
neo4jYelpAgreement = window.localStorage.getItem('neo4j.yelp-agreement')
10+
}
11+
if (neo4jYelpAgreement === 'read-agreed') {
12+
yelpDatasetAgreementElement.style.display = 'none'
13+
} else {
14+
var originalHref = yelpCreateSandboxLinkElement.getAttribute('href')
15+
yelpCreateSandboxLinkElement.setAttribute('href', 'javascript:void(0)')
16+
yelpCreateSandboxLinkElement.setAttribute('target', '_self')
17+
yelpCreateSandboxLinkElement.classList.remove('external')
18+
var focusAgreementElementEvent = function () {
19+
var top = yelpDatasetAgreementElement.getBoundingClientRect().top + window.pageYOffset - 140
20+
window.scrollTo({ top: top, behavior: 'smooth' })
21+
yelpDatasetAgreementElement.classList.add('has-focus')
22+
setTimeout(function () {
23+
yelpDatasetAgreementElement.classList.remove('has-focus')
24+
}, 2000)
25+
}
26+
yelpCreateSandboxLinkElement.addEventListener('click', focusAgreementElementEvent)
27+
// checkbox
28+
var yelpDatasetAgreementInputCheckboxElement = document.createElement('input')
29+
yelpDatasetAgreementInputCheckboxElement.type = 'checkbox'
30+
yelpDatasetAgreementInputCheckboxElement.id = 'yelp-dataset-agreement-check'
31+
// label
32+
var yelpDatasetAgreementLabelElement = document.createElement('label')
33+
yelpDatasetAgreementLabelElement.innerHTML = ' I have read and agree to the Dataset License'
34+
yelpDatasetAgreementLabelElement.setAttribute('for', 'yelp-dataset-agreement-check')
35+
// accept button
36+
var continueButtonElement = document.createElement('button')
37+
continueButtonElement.type = 'button'
38+
continueButtonElement.classList.add('button')
39+
continueButtonElement.innerText = 'Continue'
40+
continueButtonElement.addEventListener('click', function (_) {
41+
if (yelpDatasetAgreementInputCheckboxElement.checked) {
42+
if (typeof window.localStorage !== 'undefined' && typeof window.localStorage.setItem === 'function') {
43+
window.localStorage.setItem('neo4j.yelp-agreement', 'read-agreed')
44+
}
45+
yelpCreateSandboxLinkElement.removeEventListener('click', focusAgreementElementEvent)
46+
yelpCreateSandboxLinkElement.setAttribute('target', '_blank')
47+
yelpCreateSandboxLinkElement.setAttribute('href', originalHref)
48+
yelpCreateSandboxLinkElement.classList.add('external')
49+
yelpDatasetAgreementElement.style.display = 'none'
50+
}
51+
})
52+
var paragraphElement = document.createElement('p')
53+
paragraphElement.appendChild(yelpDatasetAgreementInputCheckboxElement)
54+
paragraphElement.appendChild(yelpDatasetAgreementLabelElement)
55+
paragraphElement.appendChild(continueButtonElement)
56+
yelpDatasetAgreementElement.appendChild(paragraphElement)
57+
}
58+
}
59+
})

0 commit comments

Comments
 (0)