From 3e20337b5eaebc3072170b1b5d82ad42c3ec3eaf Mon Sep 17 00:00:00 2001 From: Zac Ioannidis Date: Wed, 28 Oct 2020 16:09:29 +0000 Subject: [PATCH 1/8] Using new Card API --- src/components/CardStack.jsx | 84 ++++++++++++++++++++++++++---------- 1 file changed, 61 insertions(+), 23 deletions(-) diff --git a/src/components/CardStack.jsx b/src/components/CardStack.jsx index 701f0ec..18b501a 100644 --- a/src/components/CardStack.jsx +++ b/src/components/CardStack.jsx @@ -1,20 +1,24 @@ import React from 'react' import { connect } from 'react-redux' +import { timeFormat, timeParse } from 'd3' import * as selectors from '../selectors' // import Card from './Card.jsx' import { Card } from '@forensic-architecture/design-system/react' import copy from '../common/data/copy.json' +const formatTime = timeFormat("%d %B %Y"); +const parseTimeUS = timeParse("%-m/%-d/%Y"); + class CardStack extends React.Component { - constructor () { + constructor() { super() this.refs = {} this.refCardStack = React.createRef() this.refCardStackContent = React.createRef() } - componentDidUpdate () { + componentDidUpdate() { const isNarrative = !!this.props.narrative if (isNarrative) { @@ -22,7 +26,7 @@ class CardStack extends React.Component { } } - scrollToCard () { + scrollToCard() { const duration = 500 const element = this.refCardStack.current const cardScroll = this.refs[this.props.narrative.current].current.offsetTop @@ -52,7 +56,7 @@ class CardStack extends React.Component { animateScroll() } - renderCards (events, selections) { + renderCards(events, selections) { // if no selections provided, select all if (!selections) { selections = events.map(e => true) } this.refs = [] @@ -62,27 +66,61 @@ class CardStack extends React.Component { this.refs[idx] = thisRef return ( ({ + text: association, + color: null, + onClick: () => console.log('hello') + })), + }, + ], + [ + { + kind: "text", + title: "Summary", + value: event.description, + }, + ], + [ + { + kind: "list", + title: "Law Enforcement Agencies", + value: event.le_agencys, + }, + ], + [ + { kind: "text", title: "Name of reporter(s)", value: event.journalist_name }, + { kind: "text", title: "Network", value: event.news_organisation }, + ], + // [{ kind: "text", title: "Category", value: "Press attack" }], + ]} language={this.props.language} isLoading={this.props.isLoading} isSelected={selections[idx]} - getCategoryGroup={this.props.getCategoryGroup} - getCategoryColor={this.props.getCategoryColor} - getCategoryLabel={this.props.getCategoryLabel} - onViewSource={this.props.onViewSource} - onHighlight={this.props.onHighlight} - onSelect={this.props.onSelect} - idx={idx} - features={this.props.features} + // getNarrativeLinks={this.props.getNarrativeLinks} + // getCategoryGroup={this.props.getCategoryGroup} + // getCategoryColor={this.props.getCategoryColor} + // getCategoryLabel={this.props.getCategoryLabel} + // onViewSource={this.props.onViewSource} + // onHighlight={this.props.onHighlight} + // onSelect={this.props.onSelect} + // features={this.props.features} />) }) } - renderSelectedCards () { + renderSelectedCards() { const { selected } = this.props if (selected.length > 0) { @@ -91,7 +129,7 @@ class CardStack extends React.Component { return null } - renderNarrativeCards () { + renderNarrativeCards() { const { narrative } = this.props const showing = narrative.steps @@ -101,7 +139,7 @@ class CardStack extends React.Component { return this.renderCards(showing, selections) } - renderCardStackHeader () { + renderCardStackHeader() { const headerLang = copy[this.props.language].cardstack.header return ( @@ -118,7 +156,7 @@ class CardStack extends React.Component { ) } - renderCardStackContent () { + renderCardStackContent() { return (
    @@ -128,7 +166,7 @@ class CardStack extends React.Component { ) } - renderNarrativeContent () { + renderNarrativeContent() { return (
    Date: Wed, 28 Oct 2020 17:19:28 +0000 Subject: [PATCH 2/8] Added new fields to the rendering of the Card Component --- src/components/CardStack.jsx | 8 ++++++++ 1 file changed, 8 insertions(+) diff --git a/src/components/CardStack.jsx b/src/components/CardStack.jsx index 18b501a..a8b5f7b 100644 --- a/src/components/CardStack.jsx +++ b/src/components/CardStack.jsx @@ -70,6 +70,7 @@ class CardStack extends React.Component { ref={thisRef} // sourceError={this.props.sourceError} content={[ + [{ kind: "tag", align: "end", value: `Incident #${event.incident_id}` }], [ { kind: "date", title: "Incident Date", value: parseTimeUS(event.date) }, { kind: "text", title: "Location", value: event.location }, @@ -103,6 +104,13 @@ class CardStack extends React.Component { { kind: "text", title: "Name of reporter(s)", value: event.journalist_name }, { kind: "text", title: "Network", value: event.news_organisation }, ], + [ + { + kind: "links", + title: "Sources", + value: event.links.map((href, idx) => ({ text: `Source ${idx + 1}`, href })) + }, + ] // [{ kind: "text", title: "Category", value: "Press attack" }], ]} language={this.props.language} From 84c32ecf8df1a4d34f476e1ef2f1e664c59b832d Mon Sep 17 00:00:00 2001 From: Zac Ioannidis Date: Wed, 28 Oct 2020 18:23:41 +0000 Subject: [PATCH 3/8] Adding color for categories --- src/components/CardStack.jsx | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/src/components/CardStack.jsx b/src/components/CardStack.jsx index a8b5f7b..e8b298f 100644 --- a/src/components/CardStack.jsx +++ b/src/components/CardStack.jsx @@ -2,6 +2,7 @@ import React from 'react' import { connect } from 'react-redux' import { timeFormat, timeParse } from 'd3' import * as selectors from '../selectors' +import { calculateColorPercentages, getFilterIdxFromColorSet } from '../common/utilities' // import Card from './Card.jsx' import { Card } from '@forensic-architecture/design-system/react' @@ -81,8 +82,7 @@ class CardStack extends React.Component { title: "Type of Violation", value: event.associations.map(association => ({ text: association, - color: null, - onClick: () => console.log('hello') + color: getFilterIdxFromColorSet(association, this.props.coloringSet) >= 0 ? this.props.colors[getFilterIdxFromColorSet(association, this.props.coloringSet)] : null, })), }, ], @@ -232,6 +232,8 @@ function mapStateToProps(state) { isCardstack: state.app.flags.isCardstack, isLoading: state.app.flags.isFetchingSources, cardUI: state.ui.card, + colors: state.ui.coloring.colors, + coloringSet: state.app.associations.coloringSet, features: state.features } } From e3276dfe8eaf71f09142499ef50c4e5d33cdbee1 Mon Sep 17 00:00:00 2001 From: Zac Ioannidis Date: Wed, 28 Oct 2020 19:02:22 +0000 Subject: [PATCH 4/8] Added against field --- src/components/CardStack.jsx | 10 +++++++++- 1 file changed, 9 insertions(+), 1 deletion(-) diff --git a/src/components/CardStack.jsx b/src/components/CardStack.jsx index e8b298f..192888b 100644 --- a/src/components/CardStack.jsx +++ b/src/components/CardStack.jsx @@ -80,11 +80,19 @@ class CardStack extends React.Component { { kind: "button", title: "Type of Violation", - value: event.associations.map(association => ({ + value: event.associations.slice(0, -1).map(association => ({ text: association, color: getFilterIdxFromColorSet(association, this.props.coloringSet) >= 0 ? this.props.colors[getFilterIdxFromColorSet(association, this.props.coloringSet)] : null, })), }, + { + kind: "button", + title: "Against", + value: event.associations.slice(-1).map(category => ({ + text: category, + color: null, + })), + }, ], [ { From f09189469c9c947880dd69e0730abb9bd1583004 Mon Sep 17 00:00:00 2001 From: Zac Ioannidis Date: Wed, 28 Oct 2020 19:28:18 +0000 Subject: [PATCH 5/8] Added markdown component for hiding source --- src/components/CardStack.jsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/CardStack.jsx b/src/components/CardStack.jsx index 192888b..c6a729c 100644 --- a/src/components/CardStack.jsx +++ b/src/components/CardStack.jsx @@ -114,9 +114,9 @@ class CardStack extends React.Component { ], [ { - kind: "links", + kind: event.hide_source === "FALSE" ? "links" : "markdown", title: "Sources", - value: event.links.map((href, idx) => ({ text: `Source ${idx + 1}`, href })) + value: event.hide_source === "FALSE" ? event.links.map((href, idx) => ({ text: `Source ${idx + 1}`, href })) : "Source hidden to protect the privacy and dignity of civilians. Read more [here](https://staging.forensic-architecture.org/wp-content/uploads/2020/09/2020.14.09-FA-Bcat-Mission-Statement.pdf)." }, ] // [{ kind: "text", title: "Category", value: "Press attack" }], From e9542f42a9845be62a03109738b84b9de189fcd7 Mon Sep 17 00:00:00 2001 From: Zac Ioannidis Date: Wed, 28 Oct 2020 19:33:05 +0000 Subject: [PATCH 6/8] Lint fix --- src/components/CardStack.jsx | 87 +++++++++++++++++++----------------- 1 file changed, 46 insertions(+), 41 deletions(-) diff --git a/src/components/CardStack.jsx b/src/components/CardStack.jsx index c6a729c..3c6997c 100644 --- a/src/components/CardStack.jsx +++ b/src/components/CardStack.jsx @@ -1,25 +1,30 @@ import React from 'react' import { connect } from 'react-redux' -import { timeFormat, timeParse } from 'd3' +import { + // timeFormat + timeParse +} from 'd3' import * as selectors from '../selectors' -import { calculateColorPercentages, getFilterIdxFromColorSet } from '../common/utilities' +import { + // calculateColorPercentages, + getFilterIdxFromColorSet +} from '../common/utilities' // import Card from './Card.jsx' import { Card } from '@forensic-architecture/design-system/react' import copy from '../common/data/copy.json' -const formatTime = timeFormat("%d %B %Y"); -const parseTimeUS = timeParse("%-m/%-d/%Y"); +const parseTimeUS = timeParse('%-m/%-d/%Y') class CardStack extends React.Component { - constructor() { + constructor () { super() this.refs = {} this.refCardStack = React.createRef() this.refCardStackContent = React.createRef() } - componentDidUpdate() { + componentDidUpdate () { const isNarrative = !!this.props.narrative if (isNarrative) { @@ -27,7 +32,7 @@ class CardStack extends React.Component { } } - scrollToCard() { + scrollToCard () { const duration = 500 const element = this.refCardStack.current const cardScroll = this.refs[this.props.narrative.current].current.offsetTop @@ -57,7 +62,7 @@ class CardStack extends React.Component { animateScroll() } - renderCards(events, selections) { + renderCards (events, selections) { // if no selections provided, select all if (!selections) { selections = events.map(e => true) } this.refs = [] @@ -71,53 +76,53 @@ class CardStack extends React.Component { ref={thisRef} // sourceError={this.props.sourceError} content={[ - [{ kind: "tag", align: "end", value: `Incident #${event.incident_id}` }], + [{ kind: 'tag', align: 'end', value: `Incident #${event.incident_id}` }], [ - { kind: "date", title: "Incident Date", value: parseTimeUS(event.date) }, - { kind: "text", title: "Location", value: event.location }, + { kind: 'date', title: 'Incident Date', value: parseTimeUS(event.date) }, + { kind: 'text', title: 'Location', value: event.location } ], [ { - kind: "button", - title: "Type of Violation", + kind: 'button', + title: 'Type of Violation', value: event.associations.slice(0, -1).map(association => ({ text: association, - color: getFilterIdxFromColorSet(association, this.props.coloringSet) >= 0 ? this.props.colors[getFilterIdxFromColorSet(association, this.props.coloringSet)] : null, - })), + color: getFilterIdxFromColorSet(association, this.props.coloringSet) >= 0 ? this.props.colors[getFilterIdxFromColorSet(association, this.props.coloringSet)] : null + })) }, { - kind: "button", - title: "Against", + kind: 'button', + title: 'Against', value: event.associations.slice(-1).map(category => ({ text: category, - color: null, - })), - }, + color: null + })) + } ], [ { - kind: "text", - title: "Summary", - value: event.description, - }, + kind: 'text', + title: 'Summary', + value: event.description + } ], [ { - kind: "list", - title: "Law Enforcement Agencies", - value: event.le_agencys, - }, + kind: 'list', + title: 'Law Enforcement Agencies', + value: event.le_agencys + } ], [ - { kind: "text", title: "Name of reporter(s)", value: event.journalist_name }, - { kind: "text", title: "Network", value: event.news_organisation }, + { kind: 'text', title: 'Name of reporter(s)', value: event.journalist_name }, + { kind: 'text', title: 'Network', value: event.news_organisation } ], [ { - kind: event.hide_source === "FALSE" ? "links" : "markdown", - title: "Sources", - value: event.hide_source === "FALSE" ? event.links.map((href, idx) => ({ text: `Source ${idx + 1}`, href })) : "Source hidden to protect the privacy and dignity of civilians. Read more [here](https://staging.forensic-architecture.org/wp-content/uploads/2020/09/2020.14.09-FA-Bcat-Mission-Statement.pdf)." - }, + kind: event.hide_source === 'FALSE' ? 'links' : 'markdown', + title: 'Sources', + value: event.hide_source === 'FALSE' ? event.links.map((href, idx) => ({ text: `Source ${idx + 1}`, href })) : 'Source hidden to protect the privacy and dignity of civilians. Read more [here](https://staging.forensic-architecture.org/wp-content/uploads/2020/09/2020.14.09-FA-Bcat-Mission-Statement.pdf).' + } ] // [{ kind: "text", title: "Category", value: "Press attack" }], ]} @@ -136,7 +141,7 @@ class CardStack extends React.Component { }) } - renderSelectedCards() { + renderSelectedCards () { const { selected } = this.props if (selected.length > 0) { @@ -145,7 +150,7 @@ class CardStack extends React.Component { return null } - renderNarrativeCards() { + renderNarrativeCards () { const { narrative } = this.props const showing = narrative.steps @@ -155,7 +160,7 @@ class CardStack extends React.Component { return this.renderCards(showing, selections) } - renderCardStackHeader() { + renderCardStackHeader () { const headerLang = copy[this.props.language].cardstack.header return ( @@ -172,7 +177,7 @@ class CardStack extends React.Component { ) } - renderCardStackContent() { + renderCardStackContent () { return (
      @@ -182,7 +187,7 @@ class CardStack extends React.Component { ) } - renderNarrativeContent() { + renderNarrativeContent () { return (
      Date: Wed, 28 Oct 2020 23:41:14 +0000 Subject: [PATCH 7/8] Added new layout for cards --- src/components/CardStack.jsx | 50 ++++++++++++++++++++++++------------ 1 file changed, 33 insertions(+), 17 deletions(-) diff --git a/src/components/CardStack.jsx b/src/components/CardStack.jsx index 3c6997c..4629e75 100644 --- a/src/components/CardStack.jsx +++ b/src/components/CardStack.jsx @@ -1,9 +1,5 @@ import React from 'react' import { connect } from 'react-redux' -import { - // timeFormat - timeParse -} from 'd3' import * as selectors from '../selectors' import { // calculateColorPercentages, @@ -14,8 +10,6 @@ import { import { Card } from '@forensic-architecture/design-system/react' import copy from '../common/data/copy.json' -const parseTimeUS = timeParse('%-m/%-d/%Y') - class CardStack extends React.Component { constructor () { super() @@ -71,16 +65,44 @@ class CardStack extends React.Component { const thisRef = React.createRef() this.refs[idx] = thisRef + let precision + switch (event.location_precision) { + case `Generalised`: + precision = `No location data` + break + case `Estimated`: + precision = `Precise location estimated` + break + case `Self-reported`: + precision = `Location reported by witness` + break + case `Confirmed`: + default: + precision = null + break + } + return ( ({ text: `Source ${idx + 1}`, href })) : 'Source hidden to protect the privacy and dignity of civilians. Read more [here](https://staging.forensic-architecture.org/wp-content/uploads/2020/09/2020.14.09-FA-Bcat-Mission-Statement.pdf).' + value: event.hide_source === 'FALSE' ? event.links.map((href, idx) => ({ text: `Source ${idx + 1}`, href, color: null, onClick: () => window.open(href, '_blank') })) : 'Source hidden to protect the privacy and dignity of civilians. Read more [here](https://staging.forensic-architecture.org/wp-content/uploads/2020/09/2020.14.09-FA-Bcat-Mission-Statement.pdf).' } ] // [{ kind: "text", title: "Category", value: "Press attack" }], From 5831c9ce4d06b1975aa3a589b0ca78b3bf584d6b Mon Sep 17 00:00:00 2001 From: Zac Ioannidis Date: Wed, 28 Oct 2020 23:49:32 +0000 Subject: [PATCH 8/8] Update version of design-system --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index 6d9ae84..9df3824 100644 --- a/package.json +++ b/package.json @@ -14,7 +14,7 @@ "lint:fix": "npm run lint -- --fix" }, "dependencies": { - "@forensic-architecture/design-system": "^0.5.0", + "@forensic-architecture/design-system": "0.6.0", "d3": "^5.7.0", "joi": "^14.0.1", "leaflet": "^1.0.3",