Add citation text and paper link

Author: saravanabalagi

README.md

@@ -1,55 +1,90 @@
 <h1 align="center">OdoViz: A 3D Processing and Visualization Tool</h1>
 
 <div align="center">
+
+[![Node.js](https://img.shields.io/badge/-Node.js-gray?logo=node.js)](https://nodejs.org/)
+[![React](https://img.shields.io/badge/-React-gray?logo=react)](https://reactjs.org/)
+[![Three.js](https://img.shields.io/badge/-Three.js-gray?logo=three.js)](https://threejs.org/)
+[![Licence](https://img.shields.io/badge/Licence-MIT-292)](LICENSE)
+[![Website](https://img.shields.io/badge/Website-odoviz.cs.nuim.ie-blue)](https://odoviz.cs.nuim.ie/)
+
 OdoViz is a reactive web-based tool for 3D visualization and processing of autonomous vehicle datasets designed to support common tasks in visual place recognition research.
+
 </div>
 
+<br />
+
+OdoViz has been published in 2021 IEEE International Intelligent Transportation Systems Conference ([ITSC 2021](https://2021.ieee-itsc.org/)) and is available on IEEE Xplore® [here](https://ieeexplore.ieee.org/document/9564712). If you use this software and/or its code, please cite using
+
+```
+@INPROCEEDINGS{9564712,
+  author={Ramachandran, Saravanabalagi and McDonald, John},
+  booktitle={2021 IEEE International Intelligent Transportation Systems Conference (ITSC)},
+  title={OdoViz: A 3D Odometry Visualization and Processing Tool},
+  year={2021},
+  pages={1391-1398},
+  doi={10.1109/ITSC48978.2021.9564712}}
+```
+
+The video presentation and tutorials have been made available on YouTube [here](https://www.youtube.com/playlist?list=PLKIavzsN4tuGi1SKDSPss0M8v4zswVEn9) to assist the user in getting to know the system better. OdoViz is open-sourced under the [MIT licence](LICENSE) for the benefit of the wider research community.
+
 ## Live Demo
 
-You can access the hosted demo [here](https://odoviz.cs.nuim.ie).
+You can access the hosted instance from the [official website](https://odoviz.cs.nuim.ie), which has been made available for demonstration purposes. You can host your own instance using the instructions given below.
 
 ## Quick Start
 
-### 1. Clone the repo
+1. Clone the repo
 
-```sh
-git clone https://github.com/robotvisionmu/odoviz.git
-cd odoviz
-```
+   ```sh
+   git clone https://github.com/robotvisionmu/odoviz.git
+   cd odoviz
+   ```
 
-You can then setup and start the server in one of the following methods:
+1. Setup and start the server in one of the following methods:
 
-- using docker
-- using npm/yarn.
+   <details>
+     <summary>Docker</summary>
 
-### 2a. Docker
+   ```sh
+   # Build container
+   docker build -t odoviz:latest .
 
-```sh
-# Build container
-docker build -t odoviz:latest .
+   # Set ODOVIZ_DATA_DIR and execute container
+   export ODOVIZ_PORT=3001 ODOVIZ_DATA_DIR=<datasets_dir>
+   docker run --rm -d -v $ODOVIZ_DATA_DIR:/data -p $ODOVIZ_PORT:3001 odoviz:latest
+   ```
 
-# Set DATA_DIR and execute container
-export PORT=3001 DATA_DIR=<datasets_dir>
-docker run --rm -d -v $DATA_DIR:/data -p $PORT:3001 odoviz:latest
-```
+   </details>
 
-### 2b. Without Docker
+   <details>
+     <summary>NPM or Yarn</summary>
 
-```sh
-# Install dependencies and build client app
-cd client
-yarn install
-NODE_ENV=production yarn run build
+   ```sh
+   # Install dependencies and build client app
+   cd client
+   yarn install
+   NODE_ENV=production yarn run build
 
-# Install dependencies for server
-cd ..
-yarn install
+   # Install dependencies for server
+   cd ..
+   yarn install
 
-# Set DATA_DIR and start server
-export PORT=3001 DATA_DIR=<datasets_dir>
-yarn start
-```
+   # Set ODOVIZ_DATA_DIR and start server
+   export ODOVIZ_PORT=3001 ODOVIZ_DATA_DIR=<datasets_dir>
+   yarn start
+   ```
+
+   </details>
+
+   Note that the `datasets_dir` is the parent directory containing various datasets.
+
+1. Access the front-end
+
+   Once the server is started (using Docker or yarn), you can open http://localhost:3001 and use it. For more details about the client, please refer to the [client README.md](client/README.md)
+
+For general questions and queries, open a new thread in [discussions](https://github.com/robotvisionmu/odoviz/discussions). If the software does not work as intended, please check the existing [issues](https://github.com/robotvisionmu/odoviz/issues) before raising a new issue. [Pull requests](https://github.com/robotvisionmu/odoviz/pulls) are welcome.
 
-### 3. Accessing the front-end
+## Acknowledgements
 
-Once the server is started (using Docker or yarn), you can open http://localhost:3001 and use it. Video tutorials have been made available on [YouTube](https://www.youtube.com/playlist?list=PLKIavzsN4tuGi1SKDSPss0M8v4zswVEn9) to assist the user in getting to know the system better. For more details about the client, please refer to the [client README.md](client/README.md)
+This work was supported by [Science Foundation Ireland](https://www.sfi.ie/) grant 13/RC/2094 to [Lero - the Irish Software Research Centre](https://lero.ie/) and grant 16/RI/3399 and [Maynooth University](https://www.maynoothuniversity.ie/). The website and the live instance is hosted by Department of Computer Science, Maynooth University.

client/package.json

@@ -1,6 +1,6 @@
 {
   "name": "odoviz-react-client",
-  "version": "1.0.1",
+  "version": "1.0.2",
   "license": "MIT",
   "repository": "https://github.com/robotvisionmu/odoviz/tree/main/client",
   "author": "Saravanabalagi Ramachandran <saravanabalagi@hotmail.com>",

client/src/extensions/about/about.js

@@ -1,7 +1,7 @@
 import React, { Component } from 'react';
 
 import { faGithub } from '@fortawesome/free-brands-svg-icons';
-import { faHeart, faCode } from '@fortawesome/free-solid-svg-icons';
+import { faHeart, faCode, faStickyNote } from '@fortawesome/free-solid-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { Grid, Link, Tooltip } from '@material-ui/core';
 
@@ -25,7 +25,25 @@ class About extends Component {
     } else return 'unknown';
   };
 
+  copyCitation = () => {
+    const text = `@INPROCEEDINGS{9564712,
+  author={Ramachandran, Saravanabalagi and McDonald, John},
+  booktitle={2021 IEEE International Intelligent Transportation Systems Conference (ITSC)},
+  title={OdoViz: A 3D Odometry Visualization and Processing Tool},
+  year={2021},
+  pages={1391-1398},
+  doi={10.1109/ITSC48978.2021.9564712}}`;
+    const textBox = document.createElement('textarea');
+    textBox.innerHTML = text;
+    document.body.appendChild(textBox);
+    textBox.select();
+    const result = document.execCommand('copy');
+    document.body.removeChild(textBox);
+    return result;
+  };
+
   render() {
+    const paperLink = 'https://ieeexplore.ieee.org/document/9564712';
     return (
       <div className="about">
         <Grid container direction={'column'}>
@@ -36,7 +54,10 @@ class About extends Component {
           <Grid item xs>
             <Grid container spacing={1} direction="column" className="aboutWrapper">
               <Grid item>
-                <p>This is an open-source and free to use software.</p>
+                <p style={{ lineHeight: 1.7 }}>
+                  This is an open-source and free to use software. If you use this software and/or its code, please cite
+                  this paper using link given below.
+                </p>
               </Grid>
 
               <Grid item>
@@ -102,6 +123,24 @@ class About extends Component {
                 </Grid>
               </Grid>
 
+              <Grid item>
+                <Grid container direction="row">
+                  <Grid item xs>
+                    Publication
+                  </Grid>
+                  <Grid item>
+                    <Link href={paperLink} target="_blank" rel="noopener noreferrer" color="inherit">
+                      <FontAwesomeIcon icon={faStickyNote} color={'#90caf9'} />
+                      <span> ITSC 2021</span>
+                    </Link>
+                    <span> | </span>
+                    <Link href="#" color="inherit" onClick={this.copyCitation} underline="none">
+                      <span class="link">Copy Citation</span>
+                    </Link>
+                  </Grid>
+                </Grid>
+              </Grid>
+
               <Grid item>
                 <p>
                   This software depends on the following {Object.keys(dependencies).length}

package.json

@@ -1,6 +1,6 @@
 {
   "name": "odoviz",
-  "version": "1.0.1",
+  "version": "1.0.2",
   "description": "A reactive web-based odometry 3D visualization and processing tool",
   "repository": "git@github.com:robotvisionmu/odoviz.git",
   "author": "Saravanabalagi Ramachandran <saravanabalagi@hotmail.com>",