From b2bdb6d3c5706fab4e93df85b20a69af976b23a8 Mon Sep 17 00:00:00 2001 From: chzesa Date: Mon, 13 Dec 2021 16:12:29 +0200 Subject: [PATCH 1/7] Remove unnecessary console.log --- app/frontend/src/components/Submit.js | 2 -- 1 file changed, 2 deletions(-) diff --git a/app/frontend/src/components/Submit.js b/app/frontend/src/components/Submit.js index cb3662e6..2b7d8f26 100644 --- a/app/frontend/src/components/Submit.js +++ b/app/frontend/src/components/Submit.js @@ -69,8 +69,6 @@ export const Submit = () => { ), } - console.log(submit_data) - const csrfmiddlewaretoken = document.querySelector( '[name=csrfmiddlewaretoken]' ).value From 5d6e608b9b4b99fad0a716517d6671b69515788a Mon Sep 17 00:00:00 2001 From: chzesa Date: Mon, 13 Dec 2021 17:53:35 +0200 Subject: [PATCH 2/7] Add tooltip component --- app/frontend/src/components/SnameTooltip.js | 50 +++++++++++++++++++++ app/frontend/src/index.css | 27 ++++++++++- 2 files changed, 76 insertions(+), 1 deletion(-) create mode 100644 app/frontend/src/components/SnameTooltip.js diff --git a/app/frontend/src/components/SnameTooltip.js b/app/frontend/src/components/SnameTooltip.js new file mode 100644 index 00000000..30a8a2e1 --- /dev/null +++ b/app/frontend/src/components/SnameTooltip.js @@ -0,0 +1,50 @@ +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 ?

Remarks: {data.remarks}

: <> + const reference = data.reference ? ( +

{`${data.reference.title} (${data.reference.year})`}

+ ) : ( + <> + ) + + return ( +
+
+

{data.name.name}

+

{data.location.name}

+

{data.qualifierName.name}

+

+ {`${ + qualifierName[data.qualifier.stratigraphic_qualifier_id] + } level ${1}`} +

+ {remarks} + {reference} +
+
+ ) +} diff --git a/app/frontend/src/index.css b/app/frontend/src/index.css index bd20f829..2ea36ff6 100644 --- a/app/frontend/src/index.css +++ b/app/frontend/src/index.css @@ -27,4 +27,29 @@ .check-notop { top: 0 !important; -} \ No newline at end of file +} + +.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; +} From 4221e011c70a63e1cbba9e7621c7de54e8ea580a Mon Sep 17 00:00:00 2001 From: chzesa Date: Mon, 13 Dec 2021 17:53:55 +0200 Subject: [PATCH 3/7] Add tooltips to selected structured names --- app/frontend/src/components/SelectedStructuredNames.js | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/app/frontend/src/components/SelectedStructuredNames.js b/app/frontend/src/components/SelectedStructuredNames.js index 04dd2819..9ca7b6ea 100644 --- a/app/frontend/src/components/SelectedStructuredNames.js +++ b/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 = () => { ))} {selection.map(v => ( -
+
+

{v.formattedName}

-
-

{formattedName2}

+
+
+ +
+

{formattedName2}

+
+
) diff --git a/app/frontend/src/components/RelationSelector.js b/app/frontend/src/components/RelationSelector.js index fb6c4fea..ee059578 100644 --- a/app/frontend/src/components/RelationSelector.js +++ b/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 => ( -
setPrimaryName(v.id)} - > - {v.formattedName} +
+ +
setPrimaryName(v.id)} + > + {v.formattedName} +
))}
@@ -89,24 +93,30 @@ export const RelationSelector = () => { {structuredNames .filter(v => v.id !== primaryName) .map(v => ( -
- -
- toggleRelation(primaryName, v.id) - } - > - {v.formattedName} +
+ +
+ +
+ toggleRelation(primaryName, v.id) + } + > + {v.formattedName} +
))} diff --git a/app/frontend/src/components/Sname.js b/app/frontend/src/components/Sname.js index bdcb44a6..254a9b28 100644 --- a/app/frontend/src/components/Sname.js +++ b/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 (
-

- {formatStructuredName(sname, { map })} - -

+
+ +

+ {formatStructuredName(sname, { map })} + +

+
) } From ae0a91ee212db1cd27bbca5171c28de47717b9f4 Mon Sep 17 00:00:00 2001 From: Qubelka <42945433+qubelka@users.noreply.github.com> Date: Mon, 13 Dec 2021 09:11:51 -0800 Subject: [PATCH 6/7] Fix RelationSelector tests --- .../components/__tests__/RelationSelector.test.js | 12 ++++++++---- 1 file changed, 8 insertions(+), 4 deletions(-) diff --git a/app/frontend/src/components/__tests__/RelationSelector.test.js b/app/frontend/src/components/__tests__/RelationSelector.test.js index 539ad0cb..c50dc2a3 100644 --- a/app/frontend/src/components/__tests__/RelationSelector.test.js +++ b/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() From a48f2b33168612c823030dd99a0598ba4dc98955 Mon Sep 17 00:00:00 2001 From: Qubelka <42945433+qubelka@users.noreply.github.com> Date: Mon, 13 Dec 2021 09:12:05 -0800 Subject: [PATCH 7/7] Fix Sname tests --- app/frontend/src/components/__tests__/Sname.test.js | 8 ++------ 1 file changed, 2 insertions(+), 6 deletions(-) diff --git a/app/frontend/src/components/__tests__/Sname.test.js b/app/frontend/src/components/__tests__/Sname.test.js index d37861c7..5ce78822 100644 --- a/app/frontend/src/components/__tests__/Sname.test.js +++ b/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', () => {