From 6b2e110295ce921a2ee31697b5234c5aa19910e1 Mon Sep 17 00:00:00 2001 From: efarooqui Date: Wed, 28 Apr 2021 18:05:23 -0700 Subject: [PATCH 1/9] Modifying aggregatedpaths func to return paths as keys to object instead of just singular leaf --- src/components/controls/FilterListPanel.js | 23 ++++++++++++++------- src/reducers/validate/associationsSchema.js | 1 + src/reducers/validate/validators.js | 4 ++++ 3 files changed, 21 insertions(+), 7 deletions(-) diff --git a/src/components/controls/FilterListPanel.js b/src/components/controls/FilterListPanel.js index 238f0bc..16529e6 100644 --- a/src/components/controls/FilterListPanel.js +++ b/src/components/controls/FilterListPanel.js @@ -7,7 +7,6 @@ import { getFilterIdxFromColorSet } from "../../common/utilities"; /** recursively get an array of node keys to toggle */ function getFiltersToToggle(filter, activeFilters) { const [key, children] = filter; - // base case: no children to recurse through if (children === {}) return [key]; @@ -21,18 +20,28 @@ function getFiltersToToggle(filter, activeFilters) { } function aggregatePaths(filters) { - function insertPath(children = {}, [headOfPath, ...remainder]) { - const childKey = Object.keys(children).find((key) => key === headOfPath); - if (!childKey) children[headOfPath] = {}; - if (remainder.length > 0) insertPath(children[headOfPath], remainder); + function insertPath( + children = {}, + [headOfPath, ...remainder], + accumulatedPath + ) { + const childKey = Object.keys(children).find((path) => { + const splitPath = path.split("/"); + const pathLeaf = splitPath[splitPath.length - 1]; + return pathLeaf === headOfPath; + }); + accumulatedPath.push(headOfPath); + const accumulatedPlusHead = accumulatedPath.join("/"); + if (!childKey) children[accumulatedPlusHead] = {}; + if (remainder.length > 0) + insertPath(children[accumulatedPlusHead], remainder, accumulatedPath); return children; } const allPaths = []; filters.forEach((filterItem) => allPaths.push(filterItem.filter_paths)); - const aggregatedPaths = allPaths.reduce( - (children, path) => insertPath(children, path), + (children, path) => insertPath(children, path, []), {} ); return aggregatedPaths; diff --git a/src/reducers/validate/associationsSchema.js b/src/reducers/validate/associationsSchema.js index cf721e4..220b597 100644 --- a/src/reducers/validate/associationsSchema.js +++ b/src/reducers/validate/associationsSchema.js @@ -2,6 +2,7 @@ import Joi from "joi"; const associationsSchema = Joi.object().keys({ id: Joi.string().allow("").required(), + title: Joi.string().allow("").required(), desc: Joi.string().allow(""), mode: Joi.string().allow("").required(), filter_paths: Joi.array(), diff --git a/src/reducers/validate/validators.js b/src/reducers/validate/validators.js index 79c878d..e796dba 100644 --- a/src/reducers/validate/validators.js +++ b/src/reducers/validate/validators.js @@ -137,6 +137,10 @@ export function validateDomain(domain, features) { // append events with datetime and sort sanitizedDomain.events = sanitizedDomain.events.filter((event, idx) => { event.id = idx; + // if lat, long come in with commas, replace with decimal format + event.latitude = event.latitude.replace(",", "."); + event.longitude = event.longitude.replace(",", "."); + event.datetime = calcDatetime(event.date, event.time); if (!isValidDate(event.datetime)) { discardedDomain.events.push({ From d3c4c44da5843aa57a24746e9215749c6c10f834 Mon Sep 17 00:00:00 2001 From: efarooqui Date: Thu, 6 May 2021 16:42:29 -0700 Subject: [PATCH 2/9] Working aggregate filter paths with path as key; need to reorganize coloring algorithm --- src/common/utilities.js | 5 +++++ src/components/controls/FilterListPanel.js | 10 +++++----- 2 files changed, 10 insertions(+), 5 deletions(-) diff --git a/src/common/utilities.js b/src/common/utilities.js index 145cdc6..b9b1817 100644 --- a/src/common/utilities.js +++ b/src/common/utilities.js @@ -7,6 +7,11 @@ if (!TIME_FMT) TIME_FMT = "HH:mm"; export const language = process.env.store.app.language || "en-US"; +export function getPathLeaf(path) { + const splitPath = path.split("/"); + return splitPath[splitPath.length - 1]; +} + export function calcDatetime(date, time) { if (!time) time = "00:00"; const dt = moment(`${date} ${time}`, `${DATE_FMT} ${TIME_FMT}`); diff --git a/src/components/controls/FilterListPanel.js b/src/components/controls/FilterListPanel.js index 16529e6..0a9ecdd 100644 --- a/src/components/controls/FilterListPanel.js +++ b/src/components/controls/FilterListPanel.js @@ -2,7 +2,7 @@ import React from "react"; import Checkbox from "../atoms/Checkbox"; import marked from "marked"; import copy from "../../common/data/copy.json"; -import { getFilterIdxFromColorSet } from "../../common/utilities"; +import { getFilterIdxFromColorSet, getPathLeaf } from "../../common/utilities"; /** recursively get an array of node keys to toggle */ function getFiltersToToggle(filter, activeFilters) { @@ -26,8 +26,7 @@ function aggregatePaths(filters) { accumulatedPath ) { const childKey = Object.keys(children).find((path) => { - const splitPath = path.split("/"); - const pathLeaf = splitPath[splitPath.length - 1]; + const pathLeaf = getPathLeaf(path); return pathLeaf === headOfPath; }); accumulatedPath.push(headOfPath); @@ -57,6 +56,7 @@ function FilterListPanel({ }) { function createNodeComponent(filter, depth) { const [key, children] = filter; + const pathLeaf = getPathLeaf(key); const matchingKeys = getFiltersToToggle(filter, activeFilters); const idxFromColorSet = getFilterIdxFromColorSet(key, coloringSet); const assignedColor = @@ -71,12 +71,12 @@ function FilterListPanel({ return (
  • onSelectFilter(key, matchingKeys)} color={assignedColor} From a1b7fb525952fb141375f4cab22a5580504db48c Mon Sep 17 00:00:00 2001 From: efarooqui Date: Thu, 6 May 2021 19:49:32 -0700 Subject: [PATCH 3/9] Refactored all of filter logic to accomodate for paths instead of simply looking at leaf node in tree; fixes bugs where leaf path is non-unique --- src/common/utilities.js | 110 +++++++++++++-------- src/components/Toolbar.js | 33 +++---- src/components/controls/FilterListPanel.js | 35 ++----- 3 files changed, 89 insertions(+), 89 deletions(-) diff --git a/src/common/utilities.js b/src/common/utilities.js index b9b1817..cd3a023 100644 --- a/src/common/utilities.js +++ b/src/common/utilities.js @@ -97,6 +97,33 @@ export function trimAndEllipse(string, stringNum) { return string; } +export function aggregateFilterPaths(filters) { + function insertPath( + children = {}, + [headOfPath, ...remainder], + accumulatedPath + ) { + const childKey = Object.keys(children).find((path) => { + const pathLeaf = getPathLeaf(path); + return pathLeaf === headOfPath; + }); + accumulatedPath.push(headOfPath); + const accumulatedPlusHead = accumulatedPath.join("/"); + if (!childKey) children[accumulatedPlusHead] = {}; + if (remainder.length > 0) + insertPath(children[accumulatedPlusHead], remainder, accumulatedPath); + return children; + } + + const allPaths = []; + filters.forEach((filterItem) => allPaths.push(filterItem.filter_paths)); + const aggregatedPaths = allPaths.reduce( + (children, path) => insertPath(children, path, []), + {} + ); + return aggregatedPaths; +} + /** * From the set of associations, grab a given filter's set of parents, * ie. all the elements in the path array before the idx where the filter is located. @@ -105,59 +132,64 @@ export function trimAndEllipse(string, stringNum) { * * Returns the list of parents: ex. ['Chemical', 'Tear Gas', ...] */ -export function getFilterParents(associations, filter) { - for (const a of associations) { - const { filter_paths: fp } = a; - if (a.id === filter) { - return fp.slice(0, fp.length - 1); - } - const filterIndex = fp.indexOf(filter); - if (filterIndex === 0) return []; - if (filterIndex > 0) return fp.slice(0, filterIndex); - } - throw new Error("Attempted to get parents of nonexistent filter"); +export function getFilterAncestors(filter) { + const splitFilter = filter.split("/"); + const ancestors = []; + splitFilter.forEach((f, index) => { + const accumulatedPath = splitFilter.slice(0, index + 1).join("/"); + ancestors.push(accumulatedPath); + }); + // // The last element here will be the leaf node aka the filter passed in + ancestors.pop(); + return ancestors; } /** * Grabs the second to last element in the paths array for a given existing filter. * This is the filter's most immediate ancestor. */ -export function getImmediateFilterParent(associations, filter) { - const parents = getFilterParents(associations, filter); - if (parents.length === 0) return null; - return parents[parents.length - 1]; -} - -/** - * Grab a meta filter's siblings, by way of the the `filter_path` hierarcy. - */ -export function getMetaFilterSiblings(allFilters, filterParent, filterKey) { - const idxParent = allFilters - .map((f) => { - return f.filter_paths.reduceRight((acc, path, idx) => { - if (path === filterParent) return f.filter_paths[idx + 1]; - return acc; - }, null); - }) - .filter((metaFilter) => !!metaFilter && metaFilter !== filterKey); - return [...new Set(idxParent)]; +export function getImmediateFilterParent(filter) { + const ancestors = getFilterAncestors(filter); + return ancestors[ancestors.length - 1]; } /** * Grabs a given filter's siblings: the set of associations that share the same immediate filter parent. */ export function getFilterSiblings(allFilters, filterParent, filterKey) { - const isMetaFilter = !allFilters.map((filt) => filt.id).includes(filterKey); - - if (isMetaFilter) { - return getMetaFilterSiblings(allFilters, filterParent, filterKey); + function findSiblings(filterPathObj, ancestors) { + if (ancestors.length === 0 || filterPathObj === {}) return {}; + const nextAncestor = ancestors.shift(); + if (Object.keys(filterPathObj).includes(nextAncestor)) { + const nextObjToSearch = filterPathObj[nextAncestor]; + if (ancestors.length === 0) { + return nextObjToSearch; + } else { + return findSiblings(nextObjToSearch, ancestors); + } + } } + const aggregatedFilters = aggregateFilterPaths(allFilters); + const ancestors = getFilterAncestors(filterKey); + const siblings = findSiblings(aggregatedFilters, ancestors); + return Object.keys(siblings).filter((sib) => sib !== filterKey); +} - return allFilters.reduce((acc, val) => { - const valParent = getImmediateFilterParent(allFilters, val.id); - if (valParent === filterParent && val.id !== filterKey) acc.push(val.id); - return acc; - }, []); +export function addToColoringSet(coloringSet, filters) { + const flattenedColoringSet = coloringSet.flatMap((f) => f); + const newColoringSet = filters.filter( + (k) => flattenedColoringSet.indexOf(k) === -1 + ); + return [...coloringSet, newColoringSet]; +} + +export function removeFromColoringSet(coloringSet, filters) { + const newColoringSets = coloringSet.map((set) => + set.filter((s) => { + return !filters.includes(s); + }) + ); + return newColoringSets.filter((item) => item.length !== 0); } export function getEventCategories(event, categories) { diff --git a/src/components/Toolbar.js b/src/components/Toolbar.js index 3435cfa..8844516 100644 --- a/src/components/Toolbar.js +++ b/src/components/Toolbar.js @@ -13,7 +13,9 @@ import { trimAndEllipse, getImmediateFilterParent, getFilterSiblings, - getFilterParents, + getFilterAncestors, + addToColoringSet, + removeFromColoringSet, } from "../common/utilities.js"; class Toolbar extends React.Component { @@ -31,32 +33,15 @@ class Toolbar extends React.Component { onSelectFilter(key, matchingKeys) { const { filters, activeFilters, coloringSet, maxNumOfColors } = this.props; - const parent = getImmediateFilterParent(filters, key); + const parent = getImmediateFilterParent(key); const isTurningOff = activeFilters.includes(key); if (!isTurningOff) { - const flattenedColoringSet = coloringSet.flatMap((f) => f); - const newColoringSet = matchingKeys.filter( - (k) => flattenedColoringSet.indexOf(k) === -1 - ); - - const updatedColoringSet = [...coloringSet, newColoringSet]; - + const updatedColoringSet = addToColoringSet(coloringSet, matchingKeys); if (updatedColoringSet.length <= maxNumOfColors) { this.props.actions.updateColoringSet(updatedColoringSet); } } else { - const newColoringSets = coloringSet.map((set) => - set.filter((s) => { - return !matchingKeys.includes(s); - }) - ); - this.props.actions.updateColoringSet( - newColoringSets.filter((item) => item.length !== 0) - ); - } - - if (isTurningOff) { if (parent && activeFilters.includes(parent)) { const siblings = getFilterSiblings(filters, parent, key); let siblingsOff = true; @@ -68,12 +53,18 @@ class Toolbar extends React.Component { } if (siblingsOff) { - const grandparentsOn = getFilterParents(filters, key).filter((filt) => + const grandparentsOn = getFilterAncestors(key).filter((filt) => activeFilters.includes(filt) ); matchingKeys = matchingKeys.concat(grandparentsOn); } } + + const updatedColoringSet = removeFromColoringSet( + coloringSet, + matchingKeys + ); + this.props.actions.updateColoringSet(updatedColoringSet); } this.props.methods.onSelectFilter(matchingKeys); } diff --git a/src/components/controls/FilterListPanel.js b/src/components/controls/FilterListPanel.js index 0a9ecdd..adb5013 100644 --- a/src/components/controls/FilterListPanel.js +++ b/src/components/controls/FilterListPanel.js @@ -2,7 +2,11 @@ import React from "react"; import Checkbox from "../atoms/Checkbox"; import marked from "marked"; import copy from "../../common/data/copy.json"; -import { getFilterIdxFromColorSet, getPathLeaf } from "../../common/utilities"; +import { + aggregateFilterPaths, + getFilterIdxFromColorSet, + getPathLeaf, +} from "../../common/utilities"; /** recursively get an array of node keys to toggle */ function getFiltersToToggle(filter, activeFilters) { @@ -19,33 +23,6 @@ function getFiltersToToggle(filter, activeFilters) { return childKeys; } -function aggregatePaths(filters) { - function insertPath( - children = {}, - [headOfPath, ...remainder], - accumulatedPath - ) { - const childKey = Object.keys(children).find((path) => { - const pathLeaf = getPathLeaf(path); - return pathLeaf === headOfPath; - }); - accumulatedPath.push(headOfPath); - const accumulatedPlusHead = accumulatedPath.join("/"); - if (!childKey) children[accumulatedPlusHead] = {}; - if (remainder.length > 0) - insertPath(children[accumulatedPlusHead], remainder, accumulatedPath); - return children; - } - - const allPaths = []; - filters.forEach((filterItem) => allPaths.push(filterItem.filter_paths)); - const aggregatedPaths = allPaths.reduce( - (children, path) => insertPath(children, path, []), - {} - ); - return aggregatedPaths; -} - function FilterListPanel({ filters, activeFilters, @@ -91,7 +68,7 @@ function FilterListPanel({ } function renderTree(filters) { - const aggregatedFilterPaths = aggregatePaths(filters); + const aggregatedFilterPaths = aggregateFilterPaths(filters); return (
    From 15fbba8d0624e25ec313e572c211b96e48072e99 Mon Sep 17 00:00:00 2001 From: efarooqui Date: Fri, 7 May 2021 15:07:48 -0700 Subject: [PATCH 4/9] Refactored selectEvents to account for filter path strs; working coloring alg again; evts not showing up on timeline --- src/common/utilities.js | 10 +++++++++- src/reducers/validate/validators.js | 8 ++++++++ src/selectors/index.js | 9 +++++++-- 3 files changed, 24 insertions(+), 3 deletions(-) diff --git a/src/common/utilities.js b/src/common/utilities.js index cd3a023..e4c32c6 100644 --- a/src/common/utilities.js +++ b/src/common/utilities.js @@ -1,6 +1,8 @@ import moment from "moment"; import hash from "object-hash"; +import { ASSOCIATION_MODES } from "./constants"; + let { DATE_FMT, TIME_FMT } = process.env; if (!DATE_FMT) DATE_FMT = "MM/DD/YYYY"; if (!TIME_FMT) TIME_FMT = "HH:mm"; @@ -204,6 +206,12 @@ export function getEventCategories(event, categories) { return matchedCategories; } +export function createFilterPathString(filter) { + return filter.mode === ASSOCIATION_MODES.FILTER + ? filter.filter_paths.join("/") + : ""; +} + /** * Inset the full source represenation from 'allSources' into an event. The * function is 'curried' to allow easy use with maps. To use for a single @@ -394,7 +402,7 @@ export function calculateColorPercentages(set, coloringSet) { innerSet.forEach((val) => { val.associations.forEach((a) => { - const idx = associationMap[a]; + const idx = associationMap[createFilterPathString(a)]; if (!idx && idx !== 0) return; associationCounts[idx] += 1; totalAssociations += 1; diff --git a/src/reducers/validate/validators.js b/src/reducers/validate/validators.js index e796dba..c520e84 100644 --- a/src/reducers/validate/validators.js +++ b/src/reducers/validate/validators.js @@ -137,6 +137,14 @@ export function validateDomain(domain, features) { // append events with datetime and sort sanitizedDomain.events = sanitizedDomain.events.filter((event, idx) => { event.id = idx; + // event.associations comes in as a [association.ids...]; convert to actual association objects + event.associations = event.associations.reduce((acc, id) => { + const foundAssociation = sanitizedDomain.associations.find( + (elem) => elem.id === id + ); + if (foundAssociation) acc.push(foundAssociation); + return acc; + }, []); // if lat, long come in with commas, replace with decimal format event.latitude = event.latitude.replace(",", "."); event.longitude = event.longitude.replace(",", "."); diff --git a/src/selectors/index.js b/src/selectors/index.js index d39acac..23a129e 100644 --- a/src/selectors/index.js +++ b/src/selectors/index.js @@ -5,6 +5,7 @@ import { dateMax, isLatitude, isLongitude, + createFilterPathString, } from "../common/utilities"; import { isTimeRangedIn } from "./helpers"; import { ASSOCIATION_MODES } from "../common/constants"; @@ -76,14 +77,18 @@ export const selectEvents = createSelector( const isMatchingFilter = (event.associations && event.associations - .map((association) => activeFilters.includes(association)) + .filter((a) => a.mode === ASSOCIATION_MODES.FILTER) + .map((association) => + activeFilters.includes(createFilterPathString(association)) + ) .some((s) => s)) || activeFilters.length === 0; const isActiveFilter = isMatchingFilter || activeFilters.length === 0; const isActiveCategory = (event.associations && event.associations - .map((association) => activeCategories.includes(association)) + .filter((a) => a.mode === ASSOCIATION_MODES.CATEGORY) + .map((association) => activeCategories.includes(association.title)) .some((s) => s)) || activeCategories.length === 0; let isActiveTime = isTimeRangedIn(event, timeRange); From 0b989465f6faa16c0b85c40450b022090d800633 Mon Sep 17 00:00:00 2001 From: efarooqui Date: Mon, 10 May 2021 15:57:59 -0700 Subject: [PATCH 5/9] Fixing bugs with timeline markers; issues with using category as associations obj vs just title --- src/common/utilities.js | 19 +++++++++---------- src/components/time/Timeline.js | 27 +++++++++++---------------- src/components/time/atoms/Events.js | 2 +- src/components/time/atoms/Markers.js | 3 ++- 4 files changed, 23 insertions(+), 28 deletions(-) diff --git a/src/common/utilities.js b/src/common/utilities.js index e4c32c6..902227a 100644 --- a/src/common/utilities.js +++ b/src/common/utilities.js @@ -194,16 +194,15 @@ export function removeFromColoringSet(coloringSet, filters) { return newColoringSets.filter((item) => item.length !== 0); } -export function getEventCategories(event, categories) { - const matchedCategories = []; - if (event.associations && event.associations.length > 0) { - event.associations.reduce((acc, val) => { - const foundCategory = categories.find((cat) => cat.title === val); - if (foundCategory) acc.push(foundCategory); - return acc; - }, matchedCategories); - } - return matchedCategories; +export function getEventCategories(event, activeCategories) { + const eventCats = event.associations.filter( + (a) => a.mode === ASSOCIATION_MODES.CATEGORY + ); + return eventCats.reduce((acc, val) => { + const activeCatTitle = activeCategories.find((cat) => cat === val.title); + if (activeCatTitle) acc.push(activeCatTitle); + return acc; + }, []); } export function createFilterPathString(filter) { diff --git a/src/components/time/Timeline.js b/src/components/time/Timeline.js index c5b5744..7eb2820 100644 --- a/src/components/time/Timeline.js +++ b/src/components/time/Timeline.js @@ -49,14 +49,13 @@ class Timeline extends React.Component { } if ( - hash(nextProps.domain.categories) !== - hash(this.props.domain.categories) || + hash(nextProps.activeCategories) !== hash(this.props.activeCategories) || hash(nextProps.dimensions) !== hash(this.props.dimensions) ) { const { trackHeight, marginTop } = nextProps.dimensions; this.setState({ scaleY: this.makeScaleY( - nextProps.domain.categories, + nextProps.activeCategories, trackHeight, marginTop ), @@ -99,6 +98,7 @@ class Timeline extends React.Component { (cat) => !features.GRAPH_NONLOCATED.categories.includes(cat.title) ); } + const extraPadding = 0; const catHeight = categories.length > 2 @@ -107,10 +107,10 @@ class Timeline extends React.Component { const catsYpos = categories.map((g, i) => { return (i + 1) * catHeight + marginTop + extraPadding / 2; }); - const catMap = categories.map((c) => c.title); + // const catMap = categories.map((c) => c.title); return (cat) => { - const idx = catMap.indexOf(cat); + const idx = categories.indexOf(cat); return catsYpos[idx]; }; } @@ -302,13 +302,11 @@ class Timeline extends React.Component { } getY(event) { - const { features, domain } = this.props; + const { features, domain, activeCategories } = this.props; const { USE_CATEGORIES, GRAPH_NONLOCATED } = features; - // Categories represent active categories here - const { categories } = domain; const categoriesExist = - USE_CATEGORIES && categories && categories.length > 0; + USE_CATEGORIES && activeCategories && activeCategories.length > 0; if (!categoriesExist) { return this.state.dims.trackHeight / 2; @@ -351,7 +349,8 @@ class Timeline extends React.Component { const heightStyle = { height: dims.height }; const extraStyle = { ...heightStyle, ...foldedStyle }; const contentHeight = { height: dims.contentHeight }; - const { categories } = this.props.domain; + const { activeCategories: categories } = this.props; + return (
    { this.onDragEnd(); }} - categories={categories.map((c) => c.title)} + categories={categories} features={this.props.features} fallbackLabel={ copy[this.props.app.language].timeline @@ -463,14 +462,10 @@ function mapStateToProps(state) { return { dimensions: selectors.selectDimensions(state), isNarrative: !!state.app.associations.narrative, + activeCategories: selectors.getActiveCategories(state), domain: { events: selectors.selectStackedEvents(state), projects: selectors.selectProjects(state), - categories: ((state) => { - const allcats = selectors.getCategories(state); - const active = selectors.getActiveCategories(state); - return allcats.filter((c) => active.includes(c.title)); - })(state), narratives: state.domain.narratives, }, app: { diff --git a/src/components/time/atoms/Events.js b/src/components/time/atoms/Events.js index 2402b03..e7f4b34 100644 --- a/src/components/time/atoms/Events.js +++ b/src/components/time/atoms/Events.js @@ -134,7 +134,7 @@ const TimelineEvents = ({ // those timelines: so we create as many event 'shadows' as there are // categories const evShadows = getEventCategories(event, categories).map((cat) => { - const y = getY({ ...event, category: cat.title }); + const y = getY({ ...event, category: cat }); const colour = event.colour ? event.colour : getCategoryColor(cat.title); const styles = { diff --git a/src/components/time/atoms/Markers.js b/src/components/time/atoms/Markers.js index 186aa00..00f3012 100644 --- a/src/components/time/atoms/Markers.js +++ b/src/components/time/atoms/Markers.js @@ -64,8 +64,9 @@ const TimelineMarkers = ({ const isDot = (isLatitude(event.latitude) && isLongitude(event.longitude)) || (features.GRAPH_NONLOCATED && event.projectOffset !== -1); + const evShadows = getEventCategories(event, categories).map((cat) => - getEventY({ ...event, category: cat.title }) + getEventY({ ...event, category: cat }) ); function renderMarkerForEvent(y) { From c06afb991965a6b38e62e9ee42fe55745fd5978d Mon Sep 17 00:00:00 2001 From: efarooqui Date: Mon, 10 May 2021 16:07:12 -0700 Subject: [PATCH 6/9] Fixing extraneous errors with html attrs --- src/components/atoms/ColoredMarkers.js | 2 +- src/components/space/carto/atoms/Clusters.js | 6 +++--- src/components/space/carto/atoms/Events.js | 4 ++-- 3 files changed, 6 insertions(+), 6 deletions(-) diff --git a/src/components/atoms/ColoredMarkers.js b/src/components/atoms/ColoredMarkers.js index b3cce88..bcd738f 100644 --- a/src/components/atoms/ColoredMarkers.js +++ b/src/components/atoms/ColoredMarkers.js @@ -39,7 +39,7 @@ function ColoredMarkers({ radius, colorPercentMap, styles, className }) { return ( {txt} ); diff --git a/src/components/space/carto/atoms/Events.js b/src/components/space/carto/atoms/Events.js index bfd7b1e..08b2e5d 100644 --- a/src/components/space/carto/atoms/Events.js +++ b/src/components/space/carto/atoms/Events.js @@ -35,12 +35,12 @@ function MapEvents({ return ( <> ); From b4981f1bbf23625b74c413eb0d2670e56c2e8473 Mon Sep 17 00:00:00 2001 From: efarooqui Date: Tue, 11 May 2021 19:24:05 -0700 Subject: [PATCH 7/9] Bumping maxsize for clusters --- src/common/utilities.js | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/common/utilities.js b/src/common/utilities.js index 902227a..11556cf 100644 --- a/src/common/utilities.js +++ b/src/common/utilities.js @@ -344,7 +344,8 @@ export function calcClusterSize(pointCount, totalPoints) { /* The larger the cluster size, the higher the count of points that the cluster represents. Just like with opacity, we use a multiplication factor to ensure that clusters with higher point counts appear larger. */ - const maxSize = totalPoints > 60 ? 40 : 20; + //TO-DO: Convert maxSize into a config var + const maxSize = totalPoints > 60 ? 60 : 40; return Math.min(maxSize, 10 + (pointCount / totalPoints) * 150); } From 8abe017785ef444139b9f8706d95e274e8679184 Mon Sep 17 00:00:00 2001 From: efarooqui Date: Tue, 11 May 2021 19:57:20 -0700 Subject: [PATCH 8/9] Changing clusterSize calculation --- src/common/utilities.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/common/utilities.js b/src/common/utilities.js index 11556cf..cf8c6c0 100644 --- a/src/common/utilities.js +++ b/src/common/utilities.js @@ -345,8 +345,8 @@ export function calcClusterSize(pointCount, totalPoints) { Just like with opacity, we use a multiplication factor to ensure that clusters with higher point counts appear larger. */ //TO-DO: Convert maxSize into a config var - const maxSize = totalPoints > 60 ? 60 : 40; - return Math.min(maxSize, 10 + (pointCount / totalPoints) * 150); + const maxSize = totalPoints > 60 ? 60 : 35; + return Math.min(maxSize, 10 + (pointCount / totalPoints) * 100); } export function calculateTotalClusterPoints(clusters) { From 0430ecbe02b32c84d9ca40d131f5dc37393b1f6b Mon Sep 17 00:00:00 2001 From: efarooqui Date: Tue, 11 May 2021 21:24:06 -0700 Subject: [PATCH 9/9] Removing extraneous comment --- src/components/time/Timeline.js | 1 - 1 file changed, 1 deletion(-) diff --git a/src/components/time/Timeline.js b/src/components/time/Timeline.js index 7eb2820..64a3364 100644 --- a/src/components/time/Timeline.js +++ b/src/components/time/Timeline.js @@ -107,7 +107,6 @@ class Timeline extends React.Component { const catsYpos = categories.map((g, i) => { return (i + 1) * catHeight + marginTop + extraPadding / 2; }); - // const catMap = categories.map((c) => c.title); return (cat) => { const idx = categories.indexOf(cat);