JuroOravec / web-session-viz

WebVizTool: Track, share, and analyze your browsing history using a web extension and a website

Web Session Visualizer

Data Structure

Firestore

Overview of used collections

• [web-session-viz]session/{SESSION_ID}
• [web-session-viz]session/{SESSION_ID}/sessionUser
• [web-session-viz]session/{SESSION_ID}/sessionUser/{USER_ID}
• [web-session-viz]session/{SESSION_ID}/docsim_snapshot/{SNAPSHOT_HASH}
• [web-session-viz]sessionGroup/{SESH_GROUP_ID}
• [web-session-viz]sessionGroup/{SESH_GROUP_ID}/session/{SESSION_ID}

Cloud Storage

Overview of used bucket paths

• web-session-viz/session/{SESSION_ID}/history/{ITEM_ID}.html
• web-session-viz/session-doc-sim/{SESSION_HASH}.json

Research

Document Similarity

Search

• Google Search: "visualize document similarity tutorial 2d"
• Google Search: "nodejs word2vec"
• Google Search: "website word2vec"
• Google Search: "nlp document similarity"
• Google Search: "document similarity api"
• Google Search: "html content document similarity"
• Google Search: "document similarity graph"

Tutorials / Reviews

• Awesome Document Similarity Measures
• Building a Text Similarity checker using Cosine Similarity in JavaScript and HTML
• NLP Gensim Tutorial – Complete Guide For Beginners
• NLP Tutorials — Part 3: Document Similarity
• Google's trained Word2Vec model in Python (gensim)
• Detecting Document Similarity With Doc2vec
• USING WORD SIMILARITY GRAPHS TO EXPLORE THEMES IN TEXT: A TUTORIAL
• How to train word2vec model with NodeJS in 5 steps
• Best NLP Algorithms to get Document Similarity
• Calculating Document Similarities using BERT, word2vec, and other models

Libraries / Services

Docsim / NLP

• RaRe-Technologies/gensim
  • gensim pre-trained models and data
• fasttext
• axa-group/nlp.js
• NaturalNode/natural
  • Information Retrieval with Node.js & Natural
• spencermountain/compromise
• winkjs/wink-nlp
  • winkjs/showcase-wiz
• spaCy
• Planeshifter/node-word2vec
• Wikipedia2vec Pretrained Embeddings
• Google Cloud Semantic Similarity for Natural Language
  • Google Cloud Natural Language API use cases
  • Google Cloud All Natural Language API code samples

Visualizing document similarities

• d3/d3-force
• Force-Directed Graph, Disjoint
• D3 Examples
• Force-directed graph rendered on HTML5 canvas.

Web extension to store URL and HTML

• https://developer.chrome.com/docs/extensions/mv3/service_workers/
• https://developer.chrome.com/docs/extensions/reference/
• https://developer.chrome.com/docs/extensions/mv3/migrating_to_service_workers/#documents
• https://developer.chrome.com/docs/extensions/mv3/intro/mv3-migration/
• https://developer.chrome.com/docs/extensions/mv3/intro/
• https://developer.chrome.com/docs/extensions/mv3/match_patterns/
• https://stackoverflow.com/questions/16096482/what-does-http-https-and-all-urls-mean-in-the-context-of-ch
• https://stackoverflow.com/questions/25107774/how-do-i-send-an-http-get-request-from-a-chrome-extension
• https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/API/history/getVisits
• https://developer.chrome.com/docs/extensions/reference/history/
• https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/API/history
• https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/API/history/onVisited
• https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/API/history/TransitionType
• https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/API/history/addUrl
• https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/Anatomy_of_a_WebExtension

Cloud storage

• https://firebase.google.com/docs/storage/web/start
• https://cloud.google.com/storage/pricing-announce#at-rest
• https://cloud.google.com/storage/pricing#regions
• https://aws.amazon.com/s3/pricing/

Unsorted

TODO: First I need to figure out which docsim entries the user has access to

[web-session-viz]session/{sessionId} { sessionId, sessionTitle, timeCreated }

[web-session-viz]session/{sessionId}/docsimSnapshot/{snapshotHash} { sessionId, snapshotHash, timeCreated }

[web-session-viz]session/{sessionId}/sessionUser/{userId} { sessionId, userId, timeJoined, roles, invitedBy, colour }

USER <--> SESSION <--> DOC_SIM SESSION_GROUP <--> SESSION SESSION_GROUP <--> USER

(In the future, we could also consider adding USER_GROUP and ORG) USER <--> USER_GROUP ORG <--> USER_GROUP ORG <--> USER

Hence, this way we can cover following questions:

1. Which sessions does user has acces to? / Which are user's sessions?

• Answered by searching for [web-session-viz]session/{}/sessionUser/{USER_ID} ('user' group collection) + "group.where(u'userId', u'==', USER_ID)"
  • More on group collections https://firebase.google.com/docs/firestore/query-data/queries#collection-group-query

2. Which users have access to a session? / Support multiple users per session

• Answered by obtaining [web-session-viz]session/{}/sessionUser collection

3. What DocSim snapshots are available for this session?

• Answered by obtaining [web-session-viz]session/{}/docsimSnapshot collection

...

User Stories

1. As a group of users, we all want to add our history to a single session
   • Requirements:
     • We need to know which history item came from which user
       • With the setup above, we know
     • Which users have access to the session (USER *---1 SESSION)
     • Which sessions a user has access to (USER 1---* SESSION)

TODO NEXT!!!

2. If we imagine multiple users comparing their sessions

• We need a concept of SESSION_GROUP, which can hold multiple sessions

• We would model it similarly to SESSION <-> USER relationship

  • [web-session-viz]session-group/{} { timeCreated }
  • [web-session-viz]session-group/{}/session/{session_id} { timeJoined, colour, userId }

• We would know which users are in the SESSION_GROUP by either

  1. Duplicating the userIds info into session-group/{}/session/{session_id} payload
  2. First obtaining sessionIds from session-group/{}/session group col, Then searching for each of the [web-session-viz]session/{sessionId}

  (Based on Firestore's philosophy of majority of requests being READ, we should go with option 1)

AUTH WEB EXT

Approach 1 (SELECTED)

1. START (BROWSER OPENED)
2. When web ext opened, check if tab with website (based on url) is open 2.1 IF NOT OPEN - Show UI that suggests to open the website (open in new tab) 2.2 Wait until the website is opened

2.A WEB EXT REQUESTS AUTH STATUS (WEBSITE OPEN AND SIGNED IN)

1. Web ext sends message to ask for auth status (msg directed at our website) (backend script -> content script -> window.event)
2. Web page listens for window.events and sends back window.event with auth status

2.B WEB EXT REQUESTS AUTH STATUS (WEBSITE OPEN BUT NOT SIGNED IN)

2.C WEB EXT REQUESTS AUTH STATUS (WEBSITE OPEN USER JUST LOGGED IN)

2.D WEB EXT REQUESTS AUTH STATUS (WEBSITE OPEN USER JUST LOGGED OUT)

Approach 2 (REJECTED)

1. Login button in the web ext popup window
2. Firebase auth login opened in the popup (or as a separate popup)

• https://stackoverflow.com/a/5576816

3. After auth store the credentials in chrome.Storage

Note

Approach 2 was selected first because it's simpler. Unfortunately the Firebase drop-in component for user login fetches code to run from a 3rd party server, which is not allowed in the Web extensions. Hence we had to fall back to Approach 1.

Popup

Allows to:

• See user's sessions they can contribute to
• Start / stop tracking

-----------------------
WEB VIZ [/^]
____________________
''''''''''''''''''''
-----------------------

-----------------------
WEB VIZ [/^] LOGOUT
____________________
'''''''''''''''''''''
________
-----------------------

-----------------------
WEB VIZ [/^] LOGOUT
____________________
'''''''''''''''''''''
________
-----------------------

-----------------------
WEB VIZ [/^] LOGOUT
____________________
____________________
____________________
____________________
________
-----------------------

Document Similarity

Workflow

1. Request to trigger the document similarity analysis 1.1 Check permission / access of given user to given session 1.2 Get all items within the session 1.3 Check cache 1.3.1 Create cache ID based on sessionID + [historyItems.map(item => item.id)] 1.3.2 Check if results already exist, return them if yes 1.4 Extract textcontent from the documents 1.5 Pass the documents to the document similarity function 1.6 Save to cache 1.6.1 Create cache ID based on sessionID + [historyItems.map(item => item.id)] 1.6.2 Save results to the cache 1.7 Return the results

Market segments ideas

• Knowledge sharing in teams
  • Better team cohesion
  • Better team productivity (back up with studies)
  • How do people share knowledge in teams?
    • TODO: Interview people
    • My assumptions:
      • Presentations (show info / imgs)
        • Make it easy to create prez / snapshots from the websites they visit
        • Make it easy to select quotes / text from the websites they visit
      • Presentations (demo)
        • Make it easy to replicate steps / processes
      • Google Doc with a list of recommended links