Adds tooltips to wizard

app/frontend/src/components/Relation.js

@@ -2,15 +2,20 @@ import React from 'react'
 import { useDispatch, useSelector } from 'react-redux'
 import { formatStructuredName } from '../utilities'
 import { updateRel } from '../store/relations/actions'
+import { SnameTooltip } from './SnameTooltip'
 
 export const Relation = ({ relation }) => {
 	const dispatch = useDispatch()
-	const [formattedName1, formattedName2] = useSelector(state => {
-		return [
-			formatStructuredName(state.map[relation.name1], state),
-			formatStructuredName(state.map[relation.name2], state),
-		]
-	})
+	const [formattedName1, formattedName2, sname1, sname2] = useSelector(
+		state => {
+			return [
+				formatStructuredName(state.map[relation.name1], state),
+				formatStructuredName(state.map[relation.name2], state),
+				state.map[relation.name1],
+				state.map[relation.name1],
+			]
+		}
+	)
 
 	const swap = () => {
 		dispatch(
@@ -33,8 +38,13 @@ export const Relation = ({ relation }) => {
 
 	return (
 		<div className='w3-row v-center'>
-			<div className='w3-col s5 w3-center hide-overflow'>
-				<p>{formattedName1}</p>
+			<div className='w3-col s5'>
+				<div className='tooltip'>
+					<SnameTooltip sname={sname1} />
+					<div className='w3-center hide-overflow'>
+						<p>{formattedName1}</p>
+					</div>
+				</div>
 			</div>
 			<div className='w3-col s1 w3-center'>
 				<button className='w3-button' onClick={swap}>
@@ -49,8 +59,13 @@ export const Relation = ({ relation }) => {
 					checked={relation.belongs_to}
 				/>
 			</div>
-			<div className='w3-col s5 w3-center hide-overflow'>
-				<p>{formattedName2}</p>
+			<div className='w3-col s5'>
+				<div className='tooltip'>
+					<SnameTooltip sname={sname2} />
+					<div className='w3-center hide-overflow'>
+						<p>{formattedName2}</p>
+					</div>
+				</div>
 			</div>
 		</div>
 	)

app/frontend/src/components/RelationSelector.js

@@ -4,6 +4,7 @@ import { makeId, formatStructuredName } from '../utilities'
 import { addRel, deleteRel } from '../store/relations/actions'
 import { BelongsToSelector } from './BelongsToSelector'
 import { Relation } from './Relation'
+import { SnameTooltip } from './SnameTooltip'
 
 export const RelationSelector = () => {
 	const dispatch = useDispatch()
@@ -12,6 +13,7 @@ export const RelationSelector = () => {
 			.map(v => {
 				return {
 					id: v,
+					structuredName: state.map[v],
 					formattedName: formatStructuredName(state.map[v], state),
 				}
 			})
@@ -71,14 +73,16 @@ export const RelationSelector = () => {
 					data-testid='relselector-left-test-id'
 				>
 					{structuredNames.map(v => (
-						<div
-							key={v.id}
-							className={`w3-button w3-bar hide-overflow ${
-								v.id === primaryName ? 'w3-grey' : ''
-							}`}
-							onClick={() => setPrimaryName(v.id)}
-						>
-							{v.formattedName}
+						<div key={v.id} className='tooltip'>
+							<SnameTooltip sname={v.structuredName} />
+							<div
+								className={`w3-button w3-bar hide-overflow ${
+									v.id === primaryName ? 'w3-grey' : ''
+								}`}
+								onClick={() => setPrimaryName(v.id)}
+							>
+								{v.formattedName}
+							</div>
 						</div>
 					))}
 				</div>
@@ -89,24 +93,30 @@ export const RelationSelector = () => {
 					{structuredNames
 						.filter(v => v.id !== primaryName)
 						.map(v => (
-							<div className='w3-bar hide-overflow' key={v.id}>
-								<BelongsToSelector
-									idA={primaryName}
-									idB={v.id}
-									relation={relationExists(primaryName, v.id)}
-								/>
-								<div
-									className={`w3-button w3-bar hide-overflow ${
-										relationExists(primaryName, v.id)
-											? 'w3-grey'
-											: ''
-									}`}
-									style={{ width: '70%' }}
-									onClick={() =>
-										toggleRelation(primaryName, v.id)
-									}
-								>
-									{v.formattedName}
+							<div key={v.id} className='tooltip'>
+								<SnameTooltip sname={v.structuredName} />
+								<div className='w3-bar hide-overflow'>
+									<BelongsToSelector
+										idA={primaryName}
+										idB={v.id}
+										relation={relationExists(
+											primaryName,
+											v.id
+										)}
+									/>
+									<div
+										className={`w3-button w3-bar hide-overflow ${
+											relationExists(primaryName, v.id)
+												? 'w3-grey'
+												: ''
+										}`}
+										style={{ width: '70%' }}
+										onClick={() =>
+											toggleRelation(primaryName, v.id)
+										}
+									>
+										{v.formattedName}
+									</div>
 								</div>
 							</div>
 						))}

app/frontend/src/components/SelectedStructuredNames.js

@@ -6,6 +6,7 @@ import {
 } from '../store/selected_structured_names/actions'
 import { loadServerData } from '../services/server'
 import { formatStructuredName, parseId } from '../utilities'
+import {SnameTooltip} from './SnameTooltip'
 
 export const SelectedStructuredNames = () => {
 	const [selection, dbNames] = useSelector(state => {
@@ -23,6 +24,7 @@ export const SelectedStructuredNames = () => {
 				.map(v => {
 					return {
 						id: v,
+						structuredName: state.map[v],
 						formattedName: formatName(state.map[v]),
 					}
 				}),
@@ -74,7 +76,8 @@ export const SelectedStructuredNames = () => {
 				))}
 			</datalist>
 			{selection.map(v => (
-				<div key={v.id}>
+				<div key={v.id} className='tooltip'>
+					<SnameTooltip sname={v.structuredName} />
 					<p>
 						{v.formattedName}
 						<button

app/frontend/src/components/Sname.js

@@ -10,6 +10,7 @@ import {
 import { deleteName } from '../store/names/actions'
 import { deselectStructuredName } from '../store/selected_structured_names/actions'
 import { formatStructuredName, parseId } from '../utilities'
+import { SnameTooltip } from './SnameTooltip'
 
 const CAN_DELETE_ERROR_MSG =
 	'Added relation is dependent on this structured name. Please remove the relation associated with this structured name first.'
@@ -88,16 +89,19 @@ export const Sname = ({
 
 	return (
 		<div className='w3-container'>
-			<p>
-				{formatStructuredName(sname, { map })}
-				<button
-					className='w3-button w3-grey w3-circle w3-margin-left'
-					type='button'
-					onClick={deleteSnameHandler}
-				>
-					<i title='Delete' className='fa fa-trash'></i>
-				</button>
-			</p>
+			<div className='tooltip'>
+				<SnameTooltip sname={sname} />
+				<p>
+					{formatStructuredName(sname, { map })}
+					<button
+						className='w3-button w3-grey w3-circle w3-margin-left'
+						type='button'
+						onClick={deleteSnameHandler}
+					>
+						<i title='Delete' className='fa fa-trash'></i>
+					</button>
+				</p>
+			</div>
 		</div>
 	)
 }

app/frontend/src/components/SnameTooltip.js

@@ -0,0 +1,53 @@
+import React from 'react'
+import { useSelector } from 'react-redux'
+
+export const SnameTooltip = ({ sname }) => {
+	console.log(sname)
+	const qualifierName = {
+		1: 'Chronostratigraphy',
+		2: 'Lithostratigraphy',
+		3: 'Regional Standard',
+		4: 'Chemostratigraphy',
+		5: 'Biostratigraphy',
+		6: 'Sequence-stratigraphy',
+	}
+
+	const data = useSelector(state => {
+		return {
+			...sname,
+			reference: state.map[sname.reference_id],
+			name: state.map[sname.name_id],
+			qualifier: state.map[sname.qualifier_id],
+			qualifierName:
+				state.map[state.map[sname.qualifier_id].qualifier_name_id],
+			location: state.map[sname.location_id],
+		}
+	})
+
+	const remarks = data.remarks ? <p>Remarks: {data.remarks}</p> : <></>
+	const reference = data.reference ? (
+		<p>{`${data.reference.title} (${data.reference.year})`}</p>
+	) : (
+		<></>
+	)
+
+	if (!data.name || !data.location || !data.qualifierName)
+		return <></>
+
+	return (
+		<div className='tooltip-wrapper'>
+			<div className='w3-card w3-white w3-container w3-padding-16 tooltip-content'>
+				<p>{data.name.name}</p>
+				<p>{data.location.name}</p>
+				<p>{data.qualifierName.name}</p>
+				<p>
+					{`${
+						qualifierName[data.qualifier.stratigraphic_qualifier_id]
+					} level ${1}`}
+				</p>
+				{remarks}
+				{reference}
+			</div>
+		</div>
+	)
+}

app/frontend/src/components/Submit.js

@@ -69,8 +69,6 @@ export const Submit = () => {
 			),
 		}
 
-		console.log(submit_data)
-
 		const csrfmiddlewaretoken = document.querySelector(
 			'[name=csrfmiddlewaretoken]'
 		).value

app/frontend/src/components/__tests__/RelationSelector.test.js

@@ -187,7 +187,7 @@ describe('When some structured names have been selected, but no relations formed
 
 		expect(relationSelectorOnTheLeft.childNodes).toHaveLength(3)
 		relationSelectorOnTheLeft.childNodes.forEach(childNode => {
-			expect(options).toContain(childNode.innerHTML)
+			expect(options).toContain(childNode.childNodes[1].innerHTML)
 		})
 	})
 
@@ -198,7 +198,9 @@ describe('When some structured names have been selected, but no relations formed
 		const options = [dbSname1Formatted, dbSname2Formatted]
 		expect(relationSelectorOnTheRight.childNodes).toHaveLength(2)
 		relationSelectorOnTheRight.childNodes.forEach(childNode => {
-			expect(options).toContain(childNode.childNodes[3].innerHTML)
+			expect(options).toContain(
+				childNode.childNodes[1].childNodes[3].innerHTML
+			)
 		})
 	})
 
@@ -313,7 +315,8 @@ describe('When some structured names have been selected, but no relations formed
 		const relationSelectorOnTheRight = screen.getByTestId(
 			relationSelectorSidesTestIds.right
 		)
-		const firstOption = relationSelectorOnTheRight.childNodes[0].lastChild
+		const firstOption =
+			relationSelectorOnTheRight.childNodes[0].childNodes[1].childNodes[3]
 		const firstOptionsFormattedName = firstOption.innerHTML
 		userEvent.click(firstOption)
 		const relationsList = screen.getByTestId('active-relations-list')
@@ -324,7 +327,8 @@ describe('When some structured names have been selected, but no relations formed
 		const relationSelectorOnTheRight = screen.getByTestId(
 			relationSelectorSidesTestIds.right
 		)
-		const firstOption = relationSelectorOnTheRight.childNodes[0].lastChild
+		const firstOption =
+			relationSelectorOnTheRight.childNodes[0].childNodes[1].childNodes[3]
 		userEvent.click(firstOption)
 		const checkbox = await screen.findByRole('checkbox')
 		expect(checkbox).not.toBeChecked()

app/frontend/src/components/__tests__/Sname.test.js

@@ -68,12 +68,8 @@ describe('Sname', () => {
 	})
 
 	test('shows structured name information', () => {
-		const name = screen.getByText(/1a/)
-		const qualifier = screen.getByText(/Bio_Ammonite/)
-		const location = screen.getByText(/Alabama/)
-		expect(name).toBeInTheDocument()
-		expect(qualifier).toBeInTheDocument()
-		expect(location).toBeInTheDocument()
+		const sname = screen.getByText('1a / Bio_Ammonite / Alabama')
+		expect(sname).toBeInTheDocument()
 	})
 
 	test('shows "delete" button', () => {

app/frontend/src/index.css

@@ -27,4 +27,29 @@
 
 .check-notop {
   top: 0 !important;
-}
+}
+
+.tooltip-wrapper {
+  position: relative;
+  opacity: 0;
+}
+
+.tooltip-content {
+  display: none;
+  position: absolute;
+  max-width: 400px;
+  max-height: 200px;
+  overflow-y: auto;
+  transform: translateY(-100%);
+}
+
+.tooltip:hover > .tooltip-wrapper > .tooltip-content {
+  display: inline-block;
+}
+
+.tooltip:hover > .tooltip-wrapper {
+  width: auto;
+  height: auto;
+  opacity: 1;
+  transition: opacity 0.1s linear 1.6s;
+}