keyword-in-context
Advanced tools
A visualization that displays a keyword in context view given a text and a query. An example is show below with the query highlighted in red.
There are two primary ways to use this component. Via script tags, which is suitable for beginners, or as a react component for those more experienced in web development.
To use the component via script tags. Download this repository and look in the dist folder. There are two files there of particular note
keyword_in_context.js - The component.
keyword_in_context.deps.js - The dependencies for the file above split out into a separate file.
All of these files are minified which may make them hard to read. So they all have corresponding source maps that end in .map.
You should copy both these files into your project.
Sample HTML file — This is your index.html or similar
<!DOCTYPE html>
<meta charset="utf-8">
<html>
<head>
<title></title>
<script type="text/javascript" src="./keyword_in_context.deps.js"></script>
<script type="text/javascript" src="./keyword_in_context.js"></script>
</head>
<body>
<div id='main'></div>
</body>
<script type="text/javascript">
// This config can be loaded from an external location using ajax.
var config = {
"contextSize": 20,
"caseSensitive": false,
"query": "",
"limit": 100
};
// The data can be loaded from an external location.
var data = [
{
"name": "Alice in Wonderland" ,
"text": "Alice was beginning to get very tired of sitting by her sister"
}
];
// The container we will render our component into.
var container = document.querySelector("#main");
// What is the query text (the keyword we are looking for).
var query = 'of';
// Package it all up and call the show function
var opts = {
config: config,
data: data,
container: container,
query: query
}
KeywordInContext.show(opts)
</script>
</html>
You can open this file in your browser to see it in action, but you will probably want to move to using a webserver, a simple one is the one built into python python -m SimpleHTTPServer.
This module is implemented as a react component and can be used as such. Example code below
<KeywordInContext
caseSensitive={config.caseSensitive}
contextSize={config.contextSize}
text={data[0].text}
query={query}
limit={config.limit}
/>
You would most likely get the component via NPM using npm install keyword-in-context. Since the project is written in ES6 and React/JSX you will need a build system that can transpile these to ES5. We use webpack, see this repo and our webpack.config.js for guidance.
See below for documentation of parameters
CSS can be used to customize the display of this component and it is expected that you would use css to customize the component to fit in your context (e.g. constrain the height of the component). See this stylesheet for a sense of what styles you can define.
The project is written in ES6/ES2015 with React and JSX and uses webpack for building and webpack-dev-server during development.
These can be accessed via npm scripts
npm start - to start the server in dev mode (with a watcher). Go to localhost:8080/demo.html when this is running to start execution from html.html. You can change the value in sample_data and refresh to see a change in the vis.
npm run build-fast - execute the build without minification.
npm run build-all - execute the build.
See webpack.config.js and webpack.dev.config.js for details.
FAQs
A keyword-in-context view for text
The npm package keyword-in-context receives a total of 3 weekly downloads. As such, keyword-in-context popularity was classified as not popular.
We found that keyword-in-context demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Research
Security News
A threat actor's playbook for exploiting the npm ecosystem was exposed on the dark web, detailing how to build a blockchain-powered botnet.
Security News
NVD’s backlog surpasses 20,000 CVEs as analysis slows and NIST announces new system updates to address ongoing delays.
Security News
Research
A malicious npm package disguised as a WhatsApp client is exploiting authentication flows with a remote kill switch to exfiltrate data and destroy files.