diff --git a/src/common/global.js b/src/common/global.js
index b47c13f..8ec4a00 100644
--- a/src/common/global.js
+++ b/src/common/global.js
@@ -6,7 +6,7 @@ export const colors = {
}
export const sizes = {
- eventDotR: 5
+ eventDotR: 15
}
export default {
diff --git a/src/components/Timeline.jsx b/src/components/Timeline.jsx
index a51da5b..5e66abc 100644
--- a/src/components/Timeline.jsx
+++ b/src/components/Timeline.jsx
@@ -81,14 +81,18 @@ class Timeline extends React.Component {
makeScaleY (categories, trackHeight, marginTop) {
const tickHeight = sizes.eventDotR * 2
- const catHeight = trackHeight / (categories.length)
- const shiftUp = trackHeight / (categories.length + 1) / 2
+ const catHeight = trackHeight / (categories.length)
+ const shiftUp = trackHeight / (categories.length) / 2
const marginShift = marginTop === 0 ? 0 : marginTop
const manualAdjustment = trackHeight <= 60 ? (trackHeight <= 30 ? -8 : -5) : 0
- const catsYpos = categories.map((g, i) => ((i + 1) * catHeight) - shiftUp + marginShift + manualAdjustment)
- return d3.scaleOrdinal()
- .domain(categories)
- .range(catsYpos)
+ const catsYpos = categories.map((g, i) => {
+ return ((i+1) * catHeight) - shiftUp + marginShift + manualAdjustment
+ })
+ const catMap = categories.map(c => c.category)
+ return (cat) => {
+ const idx = catMap.indexOf(cat)
+ return catsYpos[idx]
+ }
}
componentDidUpdate (prevProps, prevState) {
diff --git a/src/components/TimelineAxis.jsx b/src/components/TimelineAxis.jsx
index 92f6192..41b2a5e 100644
--- a/src/components/TimelineAxis.jsx
+++ b/src/components/TimelineAxis.jsx
@@ -59,17 +59,18 @@ class TimelineAxis extends React.Component {
}
render () {
+ const PADDING = 20;
return (
diff --git a/src/components/presentational/Timeline/DatetimeDot.js b/src/components/presentational/Timeline/DatetimeDot.js
index 1eff3e5..1c96524 100644
--- a/src/components/presentational/Timeline/DatetimeDot.js
+++ b/src/components/presentational/Timeline/DatetimeDot.js
@@ -10,7 +10,19 @@ export default ({
styleProps,
extraRender
}) => (
-
+)
+/**
+
-)
+ **/
diff --git a/src/components/presentational/Timeline/Events.js b/src/components/presentational/Timeline/Events.js
index 61bef45..257942a 100644
--- a/src/components/presentational/Timeline/Events.js
+++ b/src/components/presentational/Timeline/Events.js
@@ -25,6 +25,7 @@ function getDotsToRender (events) {
return Object.values(eventsByCategory)
}
+const HAS_PROJECTS = 'ASSOCIATIVE_EVENTS_BY_TAG' in process.env.features && process.env.features.ASSOCIATIVE_EVENTS_BY_TAG
const TimelineEvents = ({
datetimes,
@@ -77,7 +78,9 @@ const TimelineEvents = ({
const unlocatedProps = {
fill: categoryColor,
- fillOpacity: getEventOpacity(unlocatedEvents)
+ fillOpacity: HAS_PROJECTS
+ ? unlocatedEvents.some(ev => ev.projectOffset >= 0) ? getEventOpacity(unlocatedEvents) : 0.05
+ : getEventOpacity(unlocatedEvents) / 3
}
const extraRender = customStyles[1]
@@ -102,7 +105,7 @@ const TimelineEvents = ({
x={getDatetimeX(datetime.timestamp)}
y={ev.projectOffset >= 0 ? dims.trackHeight - ev.projectOffset : dims.marginTop}
width={sizes.eventDotR}
- height={ev.projectOffset >= 0 ? sizes.eventDotR * 2 : 20}
+ height={ev.projectOffset >= 0 ? sizes.eventDotR * 2 : dims.trackHeight}
styleProps={unlocatedProps}
/>))}
diff --git a/src/components/presentational/Timeline/Markers.js b/src/components/presentational/Timeline/Markers.js
index ee9d1ab..2f97ab4 100644
--- a/src/components/presentational/Timeline/Markers.js
+++ b/src/components/presentational/Timeline/Markers.js
@@ -36,7 +36,7 @@ const TimelineMarkers = ({
className='timeline-marker'
x={0}
y={-dims.marginTop - (noCategories > 2 ? noCategories * MARKER_DISPLACED : MARKER_DISPLACED)}
- width={(2 * sizes.eventDotR) * 0.9}
+ width={sizes.eventDotR}
height={dims.trackHeight}
stroke={styles ? styles.stroke : colors.primaryHighlight}
stroke-opacity='1'
diff --git a/src/components/presentational/Timeline/Project.js b/src/components/presentational/Timeline/Project.js
index 7368d97..9fd21c1 100644
--- a/src/components/presentational/Timeline/Project.js
+++ b/src/components/presentational/Timeline/Project.js
@@ -12,7 +12,7 @@ export default ({
}) => {
const length = getX(end) - getX(start)
return alert('TODO: associate all events')}
+ onClick={() => console.error('TODO: associate all events')}
className='project'
x={getX(start)}
y={dims.trackHeight - offset}
diff --git a/src/selectors/index.js b/src/selectors/index.js
index b8555e4..cb3d162 100644
--- a/src/selectors/index.js
+++ b/src/selectors/index.js
@@ -2,6 +2,7 @@ import { createSelector } from 'reselect'
import { compareTimestamp, insetSourceFrom, dateMin, dateMax } from '../common/utilities'
import { isTimeRangedIn, shuffle } from './helpers'
import { sizes } from '../common/global'
+const HAS_PROJECTS = 'ASSOCIATIVE_EVENTS_BY_TAG' in process.env.features && process.env.features.ASSOCIATIVE_EVENTS_BY_TAG
// Input selectors
export const getEvents = state => state.domain.events
@@ -43,7 +44,8 @@ export const selectEvents = createSelector(
const isMatchingTag = (event.tags && event.tags.map(tag => activeTags.includes(tag)).some(s => s)) || activeTags.length === 0
const isActiveTag = isMatchingTag || activeTags.length === 0
const isActiveCategory = activeCategories.includes(event.category) || activeCategories.length === 0
- const isActiveTime = isTimeRangedIn(event, timeRange)
+ let isActiveTime = isTimeRangedIn(event, timeRange)
+ isActiveTime = HAS_PROJECTS ? ((!event.latitude && !event.longitude) || isActiveTime) : isActiveTime
if (isActiveTime && isActiveTag && isActiveCategory) {
acc[event.id] = { ...event }
@@ -152,7 +154,6 @@ export const selectLocations = createSelector(
events: [...]
}
*/
-const IS_PROJ = 'ASSOCIATIVE_EVENTS_BY_TAG' in process.env.features && process.env.features.ASSOCIATIVE_EVENTS_BY_TAG
export const selectDatetimes = createSelector(
[selectEvents],
events => {
@@ -170,8 +171,8 @@ export const selectDatetimes = createSelector(
tsExists = datetimes.hasOwnProperty(dtKey)
}
- if (IS_PROJ) {
- const project = event.tags.length >= 1 ? event.tags[0] : null
+ if (HAS_PROJECTS) {
+ const project = event.tags.length >= 1 && !event.latitude && !event.longitude ? event.tags[0] : null
event = { ...event, project }
if (project !== null) {
if (projects.hasOwnProperty(project)) {
@@ -194,7 +195,7 @@ export const selectDatetimes = createSelector(
* TODO: find a more module way to interface with this code.
*/
let shouldCreate = true
- if (IS_PROJ && dtIdx >= 2 && !(!!event.latitude && !!event.longitude) && event.project !== null) {
+ if (HAS_PROJECTS && dtIdx >= 2 && !(!!event.latitude && !!event.longitude) && event.project !== null) {
const allExistingIdxs = [...Array(dtIdx - 1).keys()].map(k => k + 1)
let foundMatching = false
allExistingIdxs.forEach(_idx => {
@@ -222,7 +223,7 @@ export const selectDatetimes = createSelector(
})
const output = []
- if (IS_PROJ) {
+ if (HAS_PROJECTS) {
const projKeys = Object.keys(projects)
let sortedDts = Object.keys(datetimes)
@@ -239,7 +240,9 @@ export const selectDatetimes = createSelector(
output.push({
...datetimes[dt],
events: datetimes[dt].events.map(ev => {
- let projectOffset = (activeProjects.indexOf(ev.project) + 1) * (2.5 * sizes.eventDotR)
+ const activeIdx = activeProjects.indexOf(ev.project)
+ let projectOffset = (activeIdx + 1) * (2.5 * sizes.eventDotR)
+ if (activeIdx === -1) projectOffset = -1
if (ev.project !== null && !projects[ev.project].hasOwnProperty('offset')) {
projects[ev.project].offset = projectOffset
projects[ev.project].category = ev.category
diff --git a/src/store/initial.js b/src/store/initial.js
index 8cc7040..eba08f2 100644
--- a/src/store/initial.js
+++ b/src/store/initial.js
@@ -60,12 +60,12 @@ const initial = {
},
timeline: {
dimensions: {
- height: 250,
+ height: 1000,
width: 0,
marginLeft: 100,
marginTop: 15,
marginBottom: 60,
- contentHeight: 200,
+ contentHeight: 900,
width_controls: 100
},
range: [