From edf9bc51a809c9ce31abc499cfcaa4120b7d057a Mon Sep 17 00:00:00 2001
From: Aman Sharma <mannu.poski10@gmail.com>
Date: Tue, 11 Jun 2019 06:16:34 +0530
Subject: [PATCH 01/12] Add glossary with some basic DVC terminologies

---
 src/Documentation/sidebar.json     |  2 ++
 static/docs/user-guide/glossary.md | 30 ++++++++++++++++++++++++++++++
 2 files changed, 32 insertions(+)
 create mode 100644 static/docs/user-guide/glossary.md

diff --git a/src/Documentation/sidebar.json b/src/Documentation/sidebar.json
index fc2d96f866..4068588222 100644
--- a/src/Documentation/sidebar.json
+++ b/src/Documentation/sidebar.json
@@ -48,6 +48,7 @@
     "name": "User Guide",
     "folder": "/static/docs/user-guide",
     "files": [
+      "glossary.md",
       "dvc-files-and-directories.md",
       "dvc-file-format.md",
       "large-dataset-optimization.md",
@@ -64,6 +65,7 @@
       "running-dvc-on-windows.md"
     ],
     "labels": {
+      "glossary.md": "Glossary",
       "dvc-files-and-directories.md": "Files and Directories",
       "dvc-file-format.md": "File Format (.dvc)",
       "large-dataset-optimization.md": "Large Dataset Optimization",
diff --git a/static/docs/user-guide/glossary.md b/static/docs/user-guide/glossary.md
new file mode 100644
index 0000000000..916b17e875
--- /dev/null
+++ b/static/docs/user-guide/glossary.md
@@ -0,0 +1,30 @@
+# Glossary
+
+This guide is aimed to familiarize the users with definitions to relevant DVC
+concepts and terminologies which are frequently used.
+
+## Workspace directory
+
+Also abbreviated as workspace, it is the root directory of a project where DVC
+is initialized by running `dvc init` command. Therefore, this directory will
+contain a `.dvc` directory as well.
+
+## Cache directory
+
+DVC cache is a hidden storage which is found at `.dvc/cache`. This storage is
+used to manage different versions of files which are under DVC control. For more
+information on cache, please refer to the this
+[guide](/doc/commands-reference/config#cache).
+
+## Pipeline
+
+In our documentation, it has also been referred to as a computation graph. It is
+an ordered set of some executable commands, each of them stored in a Dvcfile. To
+get familiar with its usage, please refer to this
+[tutorial](/doc/get-started/example-pipeline#example-pipelines).
+
+## DAG
+
+It is an abbreviation for Directed Acyclic Graph. DVC pipeline is also a graph
+of this type which stores a chain of commands which can be applied in a
+particular order.

From 61754a61e23b384843f263022ec02a7f0ab9601d Mon Sep 17 00:00:00 2001
From: Aman Sharma <mannu.poski10@gmail.com>
Date: Tue, 18 Jun 2019 19:06:01 +0530
Subject: [PATCH 02/12] Add tooltip component to show meanings of DVC
 terminologies

---
 src/Documentation/Markdown/Markdown.js    |   8 +-
 src/Documentation/glossary.json           |  18 ++++
 src/Tooltip/index.js                      | 120 ++++++++++++++++++++++
 static/docs/commands-reference/version.md |   2 +-
 4 files changed, 145 insertions(+), 3 deletions(-)
 create mode 100644 src/Documentation/glossary.json
 create mode 100644 src/Tooltip/index.js

diff --git a/src/Documentation/Markdown/Markdown.js b/src/Documentation/Markdown/Markdown.js
index 815025b887..12160744f2 100644
--- a/src/Documentation/Markdown/Markdown.js
+++ b/src/Documentation/Markdown/Markdown.js
@@ -2,6 +2,7 @@ import React, { Component } from 'react'
 // components
 import ReactMarkdown from 'react-markdown'
 import { LightButton } from '../LightButton'
+import Tooltip from '../../Tooltip'
 // syntax highlighter
 import SyntaxHighlighter, {
   registerLanguage
@@ -48,15 +49,18 @@ const HeadingRenderer = ({ level, children }) => {
 }
 
 const HtmlRenderer = props => {
-  if (props.tag !== 'details') {
+  if (props.tag !== 'details' && props.tag !== 'abbr') {
     return React.createElement(props.tag, {}, props.children)
-  } else {
+  } else if (props.tag === 'details') {
     const text = props.children[0].props.children[0]
     return (
       <Collapsible trigger={text} transitionTime={200}>
         {props.children.slice(1)}
       </Collapsible>
     )
+  } else if (props.tag === 'abbr') {
+    const text = props.children[0]
+    return <Tooltip text={text} />
   }
 }
 
diff --git a/src/Documentation/glossary.json b/src/Documentation/glossary.json
new file mode 100644
index 0000000000..0e0634a61e
--- /dev/null
+++ b/src/Documentation/glossary.json
@@ -0,0 +1,18 @@
+{
+  "name": "Glossary",
+  "desc": "This guide is aimed to familiarize the users with definitions to relevant DVC concepts and terminologies which are frequently used.",
+  "contents": [
+    {
+      "name": "Workspace directory",
+      "match": ["workspace"],
+      "enun": "/ˈwəːkspeɪs dɪˈrɛkt(ə)ri/",
+      "desc": "Also abbreviated as workspace, it is the root directory of a project where DVC is initialized by running `dvc init` command. Therefore, this directory will contain a `.dvc` directory as well."
+    },
+    {
+      "name": "Cache directory",
+      "match": ["cache"],
+      "enun": "/kaʃ dɪˈrɛkt(ə)ri/",
+      "desc": "DVC cache is a hidden storage which is found at `.dvc/cache`. This storage is used to manage different versions of files which are under DVC control. For more information on cache, please refer to the this [guide](/doc/commands-reference/config#cache)."
+    }
+  ]
+}
diff --git a/src/Tooltip/index.js b/src/Tooltip/index.js
new file mode 100644
index 0000000000..4c014ada07
--- /dev/null
+++ b/src/Tooltip/index.js
@@ -0,0 +1,120 @@
+import React, { Component } from 'react'
+import styled from 'styled-components'
+
+import glossary from '../Documentation/glossary'
+
+class Tooltip extends Component {
+  state = {
+    hover: false,
+    timeout: null
+  }
+
+  hoverIn = () => {
+    if (this.state.interval) {
+      clearTimeout(this.state.interval)
+      this.setState({
+        interval: null,
+        hover: true
+      })
+    } else {
+      this.setState({
+        hover: true
+      })
+    }
+  }
+
+  hoverOut = () => {
+    this.setState({
+      interval: setTimeout(() => {
+        this.setState({
+          hover: false
+        })
+      }, 100)
+    })
+  }
+
+  render() {
+    const { text } = this.props
+    let header = ''
+    let pronounce = ''
+    let description = ''
+    glossary.contents.forEach(glossaryItem => {
+      if (glossaryItem.match.includes(text)) {
+        header = glossaryItem.name
+        pronounce = glossaryItem.enun
+        description = glossaryItem.desc
+      }
+    })
+    return (
+      <>
+        <span onMouseOver={this.hoverIn} onMouseLeave={this.hoverOut}>
+          {text}
+          <sup>✝</sup>
+        </span>
+        {this.state.hover && (
+          <TooltipContainer
+            onMouseOver={this.hoverIn}
+            onMouseLeave={this.hoverOut}
+          >
+            <TooltipText>
+              <div className="header">{header}</div>
+              <div className="pronounce">{pronounce}</div>
+              <div>{description}</div>
+            </TooltipText>
+          </TooltipContainer>
+        )}
+      </>
+    )
+  }
+}
+
+const TooltipContainer = styled.div`
+  position: absolute;
+  display: inline-block;
+  z-index: 300000000;
+  background-color: white;
+`
+
+const TooltipText = styled.div`
+  padding: 8px 10px;
+  border: 1px solid #d1d5da;
+  border-radius: 3px;
+  background-color: white;
+  position: absolute;
+  z-index: 1;
+  bottom: 90%;
+  margin-left: -70px;
+  width: 400px;
+
+  &:after,
+  &:before {
+    content: '';
+    position: absolute;
+    top: 100%;
+    border-style: solid;
+    margin-left: -5px;
+  }
+
+  &:after {
+    left: 10%;
+    border-width: 10px;
+    border-color: white transparent transparent transparent;
+  }
+  &:before {
+    left: 10%;
+    border-width: 11px;
+    border-color: #d1d5da transparent transparent transparent;
+  }
+
+  .header {
+    font-size: 1.3em;
+    font-weight: bold;
+  }
+  .pronounce {
+    font-size: 0.9em;
+    color: #6a737d;
+    margin: -5px 0 5px 0;
+  }
+`
+
+export default Tooltip
diff --git a/static/docs/commands-reference/version.md b/static/docs/commands-reference/version.md
index c6fb98b18c..11037bd767 100644
--- a/static/docs/commands-reference/version.md
+++ b/static/docs/commands-reference/version.md
@@ -20,7 +20,7 @@ system/environment:
 | `Python version`                            | Version of the Python being used for the project in which DVC is initialized                                                                              |
 | `Platform`                                  | Information about the operating system of the machine                                                                                                     |
 | [`Binary`](#what-we-mean-by-binary)         | Shows whether the package is installed from a binary release or source                                                                                    |
-| `Cache`                                     | [Type of links](/doc/user-guide/large-dataset-optimization#file-link-types-for-the-dvc-cache) supported between the DVC workspace and the cache directory |
+| `Cache`                                     | [Type of links](/doc/user-guide/large-dataset-optimization#file-link-types-for-the-dvc-cache) supported between the DVC workspace and the <abbr>cache</abbr> directory |
 | `Filesystem type`                           | Shows the filesystem type (eg. ext4, FAT, etc.) and mount point of workspace and the cache directory                                                      |
 
 > If `dvc version` is executed outside a DVC workspace, the command outputs the

From 7825e8f98299f6ca5bb693ae24d6287e78259be0 Mon Sep 17 00:00:00 2001
From: Aman Sharma <mannu.poski10@gmail.com>
Date: Mon, 24 Jun 2019 14:00:55 +0530
Subject: [PATCH 03/12] Change direction of tooltip opening according to the
 right offset

---
 src/Documentation/glossary.json           |  2 -
 src/Tooltip/index.js                      | 65 ++++++++++++++++-------
 static/docs/commands-reference/version.md | 14 ++---
 3 files changed, 52 insertions(+), 29 deletions(-)

diff --git a/src/Documentation/glossary.json b/src/Documentation/glossary.json
index 0e0634a61e..ff65b98857 100644
--- a/src/Documentation/glossary.json
+++ b/src/Documentation/glossary.json
@@ -5,13 +5,11 @@
     {
       "name": "Workspace directory",
       "match": ["workspace"],
-      "enun": "/ˈwəːkspeɪs dɪˈrɛkt(ə)ri/",
       "desc": "Also abbreviated as workspace, it is the root directory of a project where DVC is initialized by running `dvc init` command. Therefore, this directory will contain a `.dvc` directory as well."
     },
     {
       "name": "Cache directory",
       "match": ["cache"],
-      "enun": "/kaʃ dɪˈrɛkt(ə)ri/",
       "desc": "DVC cache is a hidden storage which is found at `.dvc/cache`. This storage is used to manage different versions of files which are under DVC control. For more information on cache, please refer to the this [guide](/doc/commands-reference/config#cache)."
     }
   ]
diff --git a/src/Tooltip/index.js b/src/Tooltip/index.js
index 4c014ada07..8bdb9ffdce 100644
--- a/src/Tooltip/index.js
+++ b/src/Tooltip/index.js
@@ -1,4 +1,5 @@
 import React, { Component } from 'react'
+import ReactMarkdown from 'react-markdown'
 import styled from 'styled-components'
 
 import glossary from '../Documentation/glossary'
@@ -6,23 +7,50 @@ import glossary from '../Documentation/glossary'
 class Tooltip extends Component {
   state = {
     hover: false,
-    timeout: null
+    timeout: null,
+    width: 400,
+    margin: -70,
+    pointMargin: -15
   }
 
-  hoverIn = () => {
-    if (this.state.interval) {
-      clearTimeout(this.state.interval)
+  tooltipWidthEval = () => {
+    const markdownBody = document.getElementsByClassName('markdown-body')[0]
+    const maxWidth = markdownBody.offsetLeft + markdownBody.clientWidth
+    const container = document.getElementsByClassName('tooltip-container')[0]
+    const tooltipWidth = container.offsetLeft + this.state.width
+    if (tooltipWidth > maxWidth) {
       this.setState({
-        interval: null,
-        hover: true
+        margin: -340,
+        pointMargin: 260
       })
     } else {
       this.setState({
-        hover: true
+        margin: -70,
+        pointMargin: -15
       })
     }
   }
 
+  hoverIn = () => {
+    if (this.state.interval) {
+      clearTimeout(this.state.interval)
+      this.setState(
+        {
+          interval: null,
+          hover: true
+        },
+        this.tooltipWidthEval
+      )
+    } else {
+      this.setState(
+        {
+          hover: true
+        },
+        this.tooltipWidthEval
+      )
+    }
+  }
+
   hoverOut = () => {
     this.setState({
       interval: setTimeout(() => {
@@ -36,12 +64,10 @@ class Tooltip extends Component {
   render() {
     const { text } = this.props
     let header = ''
-    let pronounce = ''
     let description = ''
     glossary.contents.forEach(glossaryItem => {
       if (glossaryItem.match.includes(text)) {
         header = glossaryItem.name
-        pronounce = glossaryItem.enun
         description = glossaryItem.desc
       }
     })
@@ -53,13 +79,17 @@ class Tooltip extends Component {
         </span>
         {this.state.hover && (
           <TooltipContainer
+            className="tooltip-container"
             onMouseOver={this.hoverIn}
             onMouseLeave={this.hoverOut}
           >
-            <TooltipText>
+            <TooltipText
+              margin={this.state.margin}
+              width={this.state.width}
+              pointMargin={this.state.pointMargin}
+            >
               <div className="header">{header}</div>
-              <div className="pronounce">{pronounce}</div>
-              <div>{description}</div>
+              <ReactMarkdown source={description} />
             </TooltipText>
           </TooltipContainer>
         )}
@@ -83,8 +113,8 @@ const TooltipText = styled.div`
   position: absolute;
   z-index: 1;
   bottom: 90%;
-  margin-left: -70px;
-  width: 400px;
+  margin-left: ${props => props.margin || -70}px;
+  width: ${props => props.width || 400}px;
 
   &:after,
   &:before {
@@ -92,7 +122,7 @@ const TooltipText = styled.div`
     position: absolute;
     top: 100%;
     border-style: solid;
-    margin-left: -5px;
+    margin-left: ${props => props.pointMargin || -15}px;
   }
 
   &:after {
@@ -110,11 +140,6 @@ const TooltipText = styled.div`
     font-size: 1.3em;
     font-weight: bold;
   }
-  .pronounce {
-    font-size: 0.9em;
-    color: #6a737d;
-    margin: -5px 0 5px 0;
-  }
 `
 
 export default Tooltip
diff --git a/static/docs/commands-reference/version.md b/static/docs/commands-reference/version.md
index 11037bd767..55098ca604 100644
--- a/static/docs/commands-reference/version.md
+++ b/static/docs/commands-reference/version.md
@@ -14,14 +14,14 @@ usage: dvc version [-h] [-q | -v]
 Running the command `dvc version` outputs the following information about the
 system/environment:
 
-| Type                                        | Detail                                                                                                                                                    |
-| ------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| [`DVC version`](#components-of-dvc-version) | Version of DVC (along with a Git commit hash in case of a development version)                                                                            |
-| `Python version`                            | Version of the Python being used for the project in which DVC is initialized                                                                              |
-| `Platform`                                  | Information about the operating system of the machine                                                                                                     |
-| [`Binary`](#what-we-mean-by-binary)         | Shows whether the package is installed from a binary release or source                                                                                    |
+| Type                                        | Detail                                                                                                                                                                 |
+| ------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| [`DVC version`](#components-of-dvc-version) | Version of DVC (along with a Git commit hash in case of a development version)                                                                                         |
+| `Python version`                            | Version of the Python being used for the project in which DVC is initialized                                                                                           |
+| `Platform`                                  | Information about the operating system of the machine                                                                                                                  |
+| [`Binary`](#what-we-mean-by-binary)         | Shows whether the package is installed from a binary release or source                                                                                                 |
 | `Cache`                                     | [Type of links](/doc/user-guide/large-dataset-optimization#file-link-types-for-the-dvc-cache) supported between the DVC workspace and the <abbr>cache</abbr> directory |
-| `Filesystem type`                           | Shows the filesystem type (eg. ext4, FAT, etc.) and mount point of workspace and the cache directory                                                      |
+| `Filesystem type`                           | Shows the filesystem type (eg. ext4, FAT, etc.) and mount point of <abbr>workspace</abbr> and the cache directory                                                      |
 
 > If `dvc version` is executed outside a DVC workspace, the command outputs the
 > filesystem type of the current working directory.

From 87cf8641f5dd449c3ec37b1220f8be17f26bdc41 Mon Sep 17 00:00:00 2001
From: Aman Sharma <mannu.poski10@gmail.com>
Date: Tue, 25 Jun 2019 00:56:20 +0530
Subject: [PATCH 04/12] Use js file for glossary for better formatting of code

---
 src/Documentation/glossary.js      | 25 +++++++++++++++++++++++++
 src/Documentation/glossary.json    | 16 ----------------
 src/Documentation/sidebar.json     |  2 --
 static/docs/user-guide/glossary.md | 30 ------------------------------
 4 files changed, 25 insertions(+), 48 deletions(-)
 create mode 100644 src/Documentation/glossary.js
 delete mode 100644 src/Documentation/glossary.json
 delete mode 100644 static/docs/user-guide/glossary.md

diff --git a/src/Documentation/glossary.js b/src/Documentation/glossary.js
new file mode 100644
index 0000000000..8dd4e14149
--- /dev/null
+++ b/src/Documentation/glossary.js
@@ -0,0 +1,25 @@
+export default {
+  name: 'Glossary',
+  desc:
+    'This guide is aimed to familiarize the users with definitions to ' +
+    'relevant DVC concepts and terminologies which are frequently used.',
+  contents: [
+    {
+      name: 'Workspace directory',
+      match: ['workspace'],
+      desc:
+        'Also abbreviated as workspace, it is the root directory of a ' +
+        'project where DVC is initialized by running `dvc init` command. ' +
+        'Therefore, this directory will contain a `.dvc` directory as well.'
+    },
+    {
+      name: 'Cache directory',
+      match: ['cache'],
+      desc:
+        'DVC cache is a hidden storage which is found at `.dvc/cache`. This ' +
+        'storage is used to manage different versions of files which are ' +
+        'under DVC control. For more information on cache, please refer to ' +
+        'the this [guide](/doc/commands-reference/config#cache).'
+    }
+  ]
+}
diff --git a/src/Documentation/glossary.json b/src/Documentation/glossary.json
deleted file mode 100644
index ff65b98857..0000000000
--- a/src/Documentation/glossary.json
+++ /dev/null
@@ -1,16 +0,0 @@
-{
-  "name": "Glossary",
-  "desc": "This guide is aimed to familiarize the users with definitions to relevant DVC concepts and terminologies which are frequently used.",
-  "contents": [
-    {
-      "name": "Workspace directory",
-      "match": ["workspace"],
-      "desc": "Also abbreviated as workspace, it is the root directory of a project where DVC is initialized by running `dvc init` command. Therefore, this directory will contain a `.dvc` directory as well."
-    },
-    {
-      "name": "Cache directory",
-      "match": ["cache"],
-      "desc": "DVC cache is a hidden storage which is found at `.dvc/cache`. This storage is used to manage different versions of files which are under DVC control. For more information on cache, please refer to the this [guide](/doc/commands-reference/config#cache)."
-    }
-  ]
-}
diff --git a/src/Documentation/sidebar.json b/src/Documentation/sidebar.json
index 4068588222..fc2d96f866 100644
--- a/src/Documentation/sidebar.json
+++ b/src/Documentation/sidebar.json
@@ -48,7 +48,6 @@
     "name": "User Guide",
     "folder": "/static/docs/user-guide",
     "files": [
-      "glossary.md",
       "dvc-files-and-directories.md",
       "dvc-file-format.md",
       "large-dataset-optimization.md",
@@ -65,7 +64,6 @@
       "running-dvc-on-windows.md"
     ],
     "labels": {
-      "glossary.md": "Glossary",
       "dvc-files-and-directories.md": "Files and Directories",
       "dvc-file-format.md": "File Format (.dvc)",
       "large-dataset-optimization.md": "Large Dataset Optimization",
diff --git a/static/docs/user-guide/glossary.md b/static/docs/user-guide/glossary.md
deleted file mode 100644
index 916b17e875..0000000000
--- a/static/docs/user-guide/glossary.md
+++ /dev/null
@@ -1,30 +0,0 @@
-# Glossary
-
-This guide is aimed to familiarize the users with definitions to relevant DVC
-concepts and terminologies which are frequently used.
-
-## Workspace directory
-
-Also abbreviated as workspace, it is the root directory of a project where DVC
-is initialized by running `dvc init` command. Therefore, this directory will
-contain a `.dvc` directory as well.
-
-## Cache directory
-
-DVC cache is a hidden storage which is found at `.dvc/cache`. This storage is
-used to manage different versions of files which are under DVC control. For more
-information on cache, please refer to the this
-[guide](/doc/commands-reference/config#cache).
-
-## Pipeline
-
-In our documentation, it has also been referred to as a computation graph. It is
-an ordered set of some executable commands, each of them stored in a Dvcfile. To
-get familiar with its usage, please refer to this
-[tutorial](/doc/get-started/example-pipeline#example-pipelines).
-
-## DAG
-
-It is an abbreviation for Directed Acyclic Graph. DVC pipeline is also a graph
-of this type which stores a chain of commands which can be applied in a
-particular order.

From 93a8726ddd26a6335719d5439e1b69f931b4d717 Mon Sep 17 00:00:00 2001
From: Aman Sharma <mannu.poski10@gmail.com>
Date: Thu, 27 Jun 2019 03:36:39 +0530
Subject: [PATCH 05/12] Underline keywords instead of showing a symbol

---
 src/Tooltip/index.js | 12 +++++++++---
 1 file changed, 9 insertions(+), 3 deletions(-)

diff --git a/src/Tooltip/index.js b/src/Tooltip/index.js
index 8bdb9ffdce..3e23d3b178 100644
--- a/src/Tooltip/index.js
+++ b/src/Tooltip/index.js
@@ -73,10 +73,12 @@ class Tooltip extends Component {
     })
     return (
       <>
-        <span onMouseOver={this.hoverIn} onMouseLeave={this.hoverOut}>
+        <HighlightedText
+          onMouseOver={this.hoverIn}
+          onMouseLeave={this.hoverOut}
+        >
           {text}
-          <sup>✝</sup>
-        </span>
+        </HighlightedText>
         {this.state.hover && (
           <TooltipContainer
             className="tooltip-container"
@@ -98,6 +100,10 @@ class Tooltip extends Component {
   }
 }
 
+const HighlightedText = styled.span`
+  border-bottom: 1px black dotted;
+`
+
 const TooltipContainer = styled.div`
   position: absolute;
   display: inline-block;

From 6343214ce1542764715dc3910e9cdb30d2770bae Mon Sep 17 00:00:00 2001
From: Aman Sharma <mannu.poski10@gmail.com>
Date: Tue, 9 Jul 2019 15:18:02 +0530
Subject: [PATCH 06/12] Rewrite workspace directory description

---
 src/Documentation/glossary.js | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/Documentation/glossary.js b/src/Documentation/glossary.js
index 8dd4e14149..71071ece1d 100644
--- a/src/Documentation/glossary.js
+++ b/src/Documentation/glossary.js
@@ -8,12 +8,12 @@ export default {
       name: 'Workspace directory',
       match: ['workspace'],
       desc:
-        'Also abbreviated as workspace, it is the root directory of a ' +
-        'project where DVC is initialized by running `dvc init` command. ' +
-        'Therefore, this directory will contain a `.dvc` directory as well.'
+        'The **workspace** contains all of your DVC **project** files and ' +
+        "directories. It's typically also a Git **repository**. See also " +
+        '[`dvc init`](/doc/commands-reference/init).'
     },
     {
-      name: 'Cache directory',
+      name: 'DVC cache',
       match: ['cache'],
       desc:
         'DVC cache is a hidden storage which is found at `.dvc/cache`. This ' +

From 03726948f10521d067873ffb38a560688efcb519 Mon Sep 17 00:00:00 2001
From: Aman Sharma <mannu.poski10@gmail.com>
Date: Fri, 12 Jul 2019 01:30:00 +0530
Subject: [PATCH 07/12] Add data artifact term in glossary

---
 src/Documentation/glossary.js | 9 +++++++++
 1 file changed, 9 insertions(+)

diff --git a/src/Documentation/glossary.js b/src/Documentation/glossary.js
index 71071ece1d..0c6ac57d06 100644
--- a/src/Documentation/glossary.js
+++ b/src/Documentation/glossary.js
@@ -20,6 +20,15 @@ export default {
         'storage is used to manage different versions of files which are ' +
         'under DVC control. For more information on cache, please refer to ' +
         'the this [guide](/doc/commands-reference/config#cache).'
+    },
+    {
+      name: 'Data artifact',
+      match: ['data artifact', 'data artifacts'],
+      desc:
+        'Any **data** file or directory, as well as intermediate or final ' +
+        'result (such as extracted features or a ML model file) that is ' +
+        'under DVC control. Refer to [Data and Model Files Versioning]' +
+        '(/doc/use-cases/data-and-model-files-versioning) for more details.'
     }
   ]
 }

From 99d9e736dc7b89e11eaee0cedd6c5ab3fc68c429 Mon Sep 17 00:00:00 2001
From: Aman Sharma <mannu.poski10@gmail.com>
Date: Fri, 19 Jul 2019 02:00:27 +0530
Subject: [PATCH 08/12] Toogle position of tooltip vertically

---
 src/Tooltip/index.js | 141 +++++++++++++++++++++++++++++++++----------
 1 file changed, 109 insertions(+), 32 deletions(-)

diff --git a/src/Tooltip/index.js b/src/Tooltip/index.js
index 3e23d3b178..86670fc346 100644
--- a/src/Tooltip/index.js
+++ b/src/Tooltip/index.js
@@ -6,28 +6,98 @@ import glossary from '../Documentation/glossary'
 
 class Tooltip extends Component {
   state = {
+    description: '',
+    header: '',
     hover: false,
-    timeout: null,
-    width: 400,
+    id: null,
     margin: -70,
-    pointMargin: -15
+    pointBorderAfter: 'white transparent transparent transparent',
+    pointBorderBefore: '#d1d5da transparent transparent transparent',
+    pointMargin: -15,
+    pointTop: 100,
+    pointTopAfter: -14,
+    pointTopBefore: 16,
+    timeout: null,
+    top: 'unset',
+    width: 400
   }
 
-  tooltipWidthEval = () => {
+  componentDidMount() {
+    glossary.contents.forEach((glossaryItem, index) => {
+      if (glossaryItem.match.includes(this.props.text)) {
+        this.setState({
+          description: glossaryItem.desc,
+          header: glossaryItem.name,
+          key: index
+        })
+      }
+    })
+  }
+
+  tooltipPositionEval = () => {
     const markdownBody = document.getElementsByClassName('markdown-body')[0]
+    const tooltipBoundary = document
+      .getElementById(`tooltip-text-${this.state.key}`)
+      .getBoundingClientRect()
+    const tooltipBoxHeight = document.getElementById(
+      `tooltip-box-${this.state.key}`
+    ).offsetHeight
+    const tooltipHeight = tooltipBoundary.top - tooltipBoxHeight
     const maxWidth = markdownBody.offsetLeft + markdownBody.clientWidth
     const container = document.getElementsByClassName('tooltip-container')[0]
     const tooltipWidth = container.offsetLeft + this.state.width
-    if (tooltipWidth > maxWidth) {
-      this.setState({
-        margin: -340,
-        pointMargin: 260
-      })
-    } else {
-      this.setState({
-        margin: -70,
-        pointMargin: -15
-      })
+    const vertical = tooltipHeight > 80 ? 'top' : 'bottom'
+    const horizontal = tooltipWidth > maxWidth ? 'right' : 'left'
+
+    switch (`${horizontal} ${vertical}`) {
+      case 'left top':
+        this.setState({
+          margin: -70,
+          pointBorderAfter: 'white transparent transparent transparent',
+          pointBorderBefore: '#d1d5da transparent transparent transparent',
+          pointMargin: -15,
+          pointTop: 100,
+          pointTopAfter: 'unset',
+          pointTopBefore: 'unset',
+          top: -tooltipBoxHeight
+        })
+        break
+      case 'right top':
+        this.setState({
+          margin: -340,
+          pointBorderAfter: 'white transparent transparent transparent',
+          pointBorderBefore: '#d1d5da transparent transparent transparent',
+          pointMargin: 260,
+          pointTop: 100,
+          pointTopAfter: 'unset',
+          pointTopBefore: 'unset',
+          top: -tooltipBoxHeight
+        })
+        break
+      case 'left bottom':
+        this.setState({
+          margin: -70,
+          pointBorderAfter: 'transparent transparent white transparent',
+          pointBorderBefore: 'transparent transparent #d1d5da transparent',
+          pointMargin: -15,
+          pointTop: -15,
+          pointTopAfter: -20,
+          pointTopBefore: -23,
+          top: 40
+        })
+        break
+      case 'right bottom':
+        this.setState({
+          margin: -340,
+          pointBorderAfter: 'transparent transparent white transparent',
+          pointBorderBefore: 'transparent transparent #d1d5da transparent',
+          pointMargin: 260,
+          pointTop: -15,
+          pointTopAfter: -20,
+          pointTopBefore: -23,
+          top: 40
+        })
+        break
     }
   }
 
@@ -39,14 +109,14 @@ class Tooltip extends Component {
           interval: null,
           hover: true
         },
-        this.tooltipWidthEval
+        this.tooltipPositionEval
       )
     } else {
       this.setState(
         {
           hover: true
         },
-        this.tooltipWidthEval
+        this.tooltipPositionEval
       )
     }
   }
@@ -62,22 +132,13 @@ class Tooltip extends Component {
   }
 
   render() {
-    const { text } = this.props
-    let header = ''
-    let description = ''
-    glossary.contents.forEach(glossaryItem => {
-      if (glossaryItem.match.includes(text)) {
-        header = glossaryItem.name
-        description = glossaryItem.desc
-      }
-    })
     return (
       <>
         <HighlightedText
           onMouseOver={this.hoverIn}
           onMouseLeave={this.hoverOut}
         >
-          {text}
+          <span id={`tooltip-text-${this.state.key}`}>{this.props.text}</span>
         </HighlightedText>
         {this.state.hover && (
           <TooltipContainer
@@ -86,12 +147,20 @@ class Tooltip extends Component {
             onMouseLeave={this.hoverOut}
           >
             <TooltipText
+              id={`tooltip-box-${this.state.key}`}
               margin={this.state.margin}
               width={this.state.width}
+              pointBorderAfter={this.state.pointBorderAfter}
+              pointBorderBefore={this.state.pointBorderBefore}
               pointMargin={this.state.pointMargin}
+              pointTop={this.state.pointTop}
+              pointTopBefore={this.state.pointTopBefore}
+              pointTopAfter={this.state.pointTopAfter}
+              top={this.state.top}
+              bottom={this.state.bottom}
             >
-              <div className="header">{header}</div>
-              <ReactMarkdown source={description} />
+              <div className="header">{this.state.header}</div>
+              <ReactMarkdown source={this.state.description} />
             </TooltipText>
           </TooltipContainer>
         )}
@@ -118,7 +187,13 @@ const TooltipText = styled.div`
   background-color: white;
   position: absolute;
   z-index: 1;
-  bottom: 90%;
+  top: ${props => {
+    if (props.top === 'unset') {
+      return 'unset'
+    } else {
+      return `${props.top}px`
+    }
+  }};
   margin-left: ${props => props.margin || -70}px;
   width: ${props => props.width || 400}px;
 
@@ -126,20 +201,22 @@ const TooltipText = styled.div`
   &:before {
     content: '';
     position: absolute;
-    top: 100%;
+    top: ${props => props.pointTop}%;
     border-style: solid;
     margin-left: ${props => props.pointMargin || -15}px;
   }
 
   &:after {
+    top: ${props => props.pointTopAfter}px;
     left: 10%;
     border-width: 10px;
-    border-color: white transparent transparent transparent;
+    border-color: ${props => props.pointBorderAfter};
   }
   &:before {
+    top: ${props => props.pointTopBefore}px;
     left: 10%;
     border-width: 11px;
-    border-color: #d1d5da transparent transparent transparent;
+    border-color: ${props => props.pointBorderBefore};
   }
 
   .header {

From 586fea68c38e73b19c67d509267eff141f1963d5 Mon Sep 17 00:00:00 2001
From: Aman Sharma <mannu.poski10@gmail.com>
Date: Fri, 19 Jul 2019 12:43:57 +0530
Subject: [PATCH 09/12] Prevent rendering of tooltip if match is false

---
 src/Tooltip/index.js | 68 ++++++++++++++++++++++++--------------------
 1 file changed, 37 insertions(+), 31 deletions(-)

diff --git a/src/Tooltip/index.js b/src/Tooltip/index.js
index 86670fc346..e80a2e9d2d 100644
--- a/src/Tooltip/index.js
+++ b/src/Tooltip/index.js
@@ -11,6 +11,7 @@ class Tooltip extends Component {
     hover: false,
     id: null,
     margin: -70,
+    match: false,
     pointBorderAfter: 'white transparent transparent transparent',
     pointBorderBefore: '#d1d5da transparent transparent transparent',
     pointMargin: -15,
@@ -28,7 +29,8 @@ class Tooltip extends Component {
         this.setState({
           description: glossaryItem.desc,
           header: glossaryItem.name,
-          key: index
+          key: index,
+          match: true
         })
       }
     })
@@ -132,40 +134,44 @@ class Tooltip extends Component {
   }
 
   render() {
-    return (
-      <>
-        <HighlightedText
-          onMouseOver={this.hoverIn}
-          onMouseLeave={this.hoverOut}
-        >
-          <span id={`tooltip-text-${this.state.key}`}>{this.props.text}</span>
-        </HighlightedText>
-        {this.state.hover && (
-          <TooltipContainer
-            className="tooltip-container"
+    if (this.state.match) {
+      return (
+        <>
+          <HighlightedText
             onMouseOver={this.hoverIn}
             onMouseLeave={this.hoverOut}
           >
-            <TooltipText
-              id={`tooltip-box-${this.state.key}`}
-              margin={this.state.margin}
-              width={this.state.width}
-              pointBorderAfter={this.state.pointBorderAfter}
-              pointBorderBefore={this.state.pointBorderBefore}
-              pointMargin={this.state.pointMargin}
-              pointTop={this.state.pointTop}
-              pointTopBefore={this.state.pointTopBefore}
-              pointTopAfter={this.state.pointTopAfter}
-              top={this.state.top}
-              bottom={this.state.bottom}
+            <span id={`tooltip-text-${this.state.key}`}>{this.props.text}</span>
+          </HighlightedText>
+          {this.state.hover && (
+            <TooltipContainer
+              className="tooltip-container"
+              onMouseOver={this.hoverIn}
+              onMouseLeave={this.hoverOut}
             >
-              <div className="header">{this.state.header}</div>
-              <ReactMarkdown source={this.state.description} />
-            </TooltipText>
-          </TooltipContainer>
-        )}
-      </>
-    )
+              <TooltipText
+                id={`tooltip-box-${this.state.key}`}
+                margin={this.state.margin}
+                width={this.state.width}
+                pointBorderAfter={this.state.pointBorderAfter}
+                pointBorderBefore={this.state.pointBorderBefore}
+                pointMargin={this.state.pointMargin}
+                pointTop={this.state.pointTop}
+                pointTopBefore={this.state.pointTopBefore}
+                pointTopAfter={this.state.pointTopAfter}
+                top={this.state.top}
+                bottom={this.state.bottom}
+              >
+                <div className="header">{this.state.header}</div>
+                <ReactMarkdown source={this.state.description} />
+              </TooltipText>
+            </TooltipContainer>
+          )}
+        </>
+      )
+    } else {
+      return <span>{this.props.text}</span>
+    }
   }
 }
 

From 9733399b56cd62d0c8786bc64a9da9b5bb8c2801 Mon Sep 17 00:00:00 2001
From: Aman Sharma <mannu.poski10@gmail.com>
Date: Fri, 19 Jul 2019 12:57:12 +0530
Subject: [PATCH 10/12] Soft code height of header

---
 src/Tooltip/index.js | 4 +++-
 src/TopMenu/index.js | 6 +++++-
 2 files changed, 8 insertions(+), 2 deletions(-)

diff --git a/src/Tooltip/index.js b/src/Tooltip/index.js
index e80a2e9d2d..a2d9c46af1 100644
--- a/src/Tooltip/index.js
+++ b/src/Tooltip/index.js
@@ -37,6 +37,8 @@ class Tooltip extends Component {
   }
 
   tooltipPositionEval = () => {
+    const headerHeight = document.getElementsByClassName('header')[0]
+      .offsetHeight
     const markdownBody = document.getElementsByClassName('markdown-body')[0]
     const tooltipBoundary = document
       .getElementById(`tooltip-text-${this.state.key}`)
@@ -48,7 +50,7 @@ class Tooltip extends Component {
     const maxWidth = markdownBody.offsetLeft + markdownBody.clientWidth
     const container = document.getElementsByClassName('tooltip-container')[0]
     const tooltipWidth = container.offsetLeft + this.state.width
-    const vertical = tooltipHeight > 80 ? 'top' : 'bottom'
+    const vertical = tooltipHeight > headerHeight ? 'top' : 'bottom'
     const horizontal = tooltipWidth > maxWidth ? 'right' : 'left'
 
     switch (`${horizontal} ${vertical}`) {
diff --git a/src/TopMenu/index.js b/src/TopMenu/index.js
index 07e15b3540..a01a63cd88 100644
--- a/src/TopMenu/index.js
+++ b/src/TopMenu/index.js
@@ -48,7 +48,11 @@ class TopMenu extends Component {
 
     return (
       <Wrapper>
-        <Container scrolled={isDocPage || scrolled} wide={isDocPage}>
+        <Container
+          className="header"
+          scrolled={isDocPage || scrolled}
+          wide={isDocPage}
+        >
           <Logo href="/">
             <img
               src="/static/img/logo.png"

From 8360f060f3665895b0d2afad8ff25c7d74d54e54 Mon Sep 17 00:00:00 2001
From: Aman Sharma <mannu.poski10@gmail.com>
Date: Sat, 20 Jul 2019 13:37:09 +0530
Subject: [PATCH 11/12] Mention default location for cache directory

---
 src/Documentation/glossary.js | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/Documentation/glossary.js b/src/Documentation/glossary.js
index 0c6ac57d06..c8002f3119 100644
--- a/src/Documentation/glossary.js
+++ b/src/Documentation/glossary.js
@@ -16,10 +16,10 @@ export default {
       name: 'DVC cache',
       match: ['cache'],
       desc:
-        'DVC cache is a hidden storage which is found at `.dvc/cache`. This ' +
-        'storage is used to manage different versions of files which are ' +
-        'under DVC control. For more information on cache, please refer to ' +
-        'the this [guide](/doc/commands-reference/config#cache).'
+        'DVC cache is a hidden storage which is by default found at ' +
+        '`.dvc/cache`. This storage is used to manage different versions of ' +
+        'files which are under DVC control. For more information on cache, ' +
+        'please refer to this [guide](/doc/commands-reference/config#cache).'
     },
     {
       name: 'Data artifact',

From 5ab1e96bf51130ef07cd1b7d2338b7554e54c62a Mon Sep 17 00:00:00 2001
From: Aman Sharma <mannu.poski10@gmail.com>
Date: Sat, 20 Jul 2019 13:37:54 +0530
Subject: [PATCH 12/12] Disable tooltip in mobile view

---
 src/Tooltip/index.js | 60 +++++++++++++++++++++++++-------------------
 1 file changed, 34 insertions(+), 26 deletions(-)

diff --git a/src/Tooltip/index.js b/src/Tooltip/index.js
index a2d9c46af1..0de90694c3 100644
--- a/src/Tooltip/index.js
+++ b/src/Tooltip/index.js
@@ -3,6 +3,7 @@ import ReactMarkdown from 'react-markdown'
 import styled from 'styled-components'
 
 import glossary from '../Documentation/glossary'
+import { OnlyDesktop, OnlyMobile } from '../styles'
 
 class Tooltip extends Component {
   state = {
@@ -139,36 +140,43 @@ class Tooltip extends Component {
     if (this.state.match) {
       return (
         <>
-          <HighlightedText
-            onMouseOver={this.hoverIn}
-            onMouseLeave={this.hoverOut}
-          >
-            <span id={`tooltip-text-${this.state.key}`}>{this.props.text}</span>
-          </HighlightedText>
-          {this.state.hover && (
-            <TooltipContainer
-              className="tooltip-container"
+          <OnlyDesktop>
+            <HighlightedText
               onMouseOver={this.hoverIn}
               onMouseLeave={this.hoverOut}
             >
-              <TooltipText
-                id={`tooltip-box-${this.state.key}`}
-                margin={this.state.margin}
-                width={this.state.width}
-                pointBorderAfter={this.state.pointBorderAfter}
-                pointBorderBefore={this.state.pointBorderBefore}
-                pointMargin={this.state.pointMargin}
-                pointTop={this.state.pointTop}
-                pointTopBefore={this.state.pointTopBefore}
-                pointTopAfter={this.state.pointTopAfter}
-                top={this.state.top}
-                bottom={this.state.bottom}
+              <span id={`tooltip-text-${this.state.key}`}>
+                {this.props.text}
+              </span>
+            </HighlightedText>
+            {this.state.hover && (
+              <TooltipContainer
+                className="tooltip-container"
+                onMouseOver={this.hoverIn}
+                onMouseLeave={this.hoverOut}
               >
-                <div className="header">{this.state.header}</div>
-                <ReactMarkdown source={this.state.description} />
-              </TooltipText>
-            </TooltipContainer>
-          )}
+                <TooltipText
+                  id={`tooltip-box-${this.state.key}`}
+                  margin={this.state.margin}
+                  width={this.state.width}
+                  pointBorderAfter={this.state.pointBorderAfter}
+                  pointBorderBefore={this.state.pointBorderBefore}
+                  pointMargin={this.state.pointMargin}
+                  pointTop={this.state.pointTop}
+                  pointTopBefore={this.state.pointTopBefore}
+                  pointTopAfter={this.state.pointTopAfter}
+                  top={this.state.top}
+                  bottom={this.state.bottom}
+                >
+                  <div className="header">{this.state.header}</div>
+                  <ReactMarkdown source={this.state.description} />
+                </TooltipText>
+              </TooltipContainer>
+            )}
+          </OnlyDesktop>
+          <OnlyMobile>
+            <span>{this.props.text}</span>
+          </OnlyMobile>
         </>
       )
     } else {