animation changes

src/common/data/copy.json

@@ -235,7 +235,7 @@
         "Testimony Group 03",
         "Other"
       ],
-      "info": "Showing <span>%n events</span> that occurred between",
+      "info": "Showing <span style='font-weight:700'>%n events</span> that occurred between",
       "default_categories_label": ""
     },
     "cardstack": {

src/common/utilities.js

@@ -344,7 +344,7 @@ export function calcClusterOpacity(pointCount, totalPoints) {
   /* Clusters represent multiple events within a specific radius. The darker the cluster,
   the larger the number of underlying events. We use a multiplication factor (50) here as well
   to ensure that the larger clusters have an appropriately darker shading. */
-  return Math.min(0.85, 0.08 + (pointCount / totalPoints) * 50);
+  return Math.min(0.85, 0.5 + (pointCount / totalPoints) * 50);
 }
 
 export function calcClusterSize(pointCount, totalPoints) {
@@ -352,8 +352,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 : 35;
-  return Math.min(maxSize, 10 + (pointCount / totalPoints) * 100);
+  const maxSize = totalPoints > 60 ? 90 : 35;
+  return Math.min(maxSize, 15 + (pointCount / totalPoints) * 120);
 }
 
 export function calculateTotalClusterPoints(clusters) {

src/components/space/carto/atoms/Clusters.js

@@ -81,7 +81,7 @@ function Cluster({
           }}
           className="cluster-event-marker"
         />
-        {hovered ? renderHover(cluster) : null}
+        {renderHover(cluster)}
       </g>
     </svg>
   );
@@ -111,8 +111,13 @@ function ClusterEvents({
       <>
         <text
           textAnchor="middle"
-          y="3px"
-          style={{ fontWeight: "bold", fill: "black", zIndex: 10000 }}
+          y={`${txt > 40 ? (txt > 70 ? (txt > 100 ? 14 : 12) : 8) : 3}px`}
+          style={{
+            fontWeight: "bold",
+            fill: "#dedede",
+            zIndex: 10000 + txt,
+            fontSize: Math.min(45, Math.max(18, txt / 1.5)),
+          }}
         >
           {txt}
         </text>

src/components/time/Timeline.js

@@ -17,6 +17,10 @@ import Markers from "./atoms/Markers.js";
 import Events from "./atoms/Events.js";
 import Categories from "./Categories";
 
+function timeout(delay) {
+  return new Promise((res) => setTimeout(res, delay));
+}
+
 class Timeline extends React.Component {
   constructor(props) {
     super(props);
@@ -29,6 +33,7 @@ class Timeline extends React.Component {
     this.onDragStart = this.onDragStart.bind(this);
     this.onDrag = this.onDrag.bind(this);
     this.onDragEnd = this.onDragEnd.bind(this);
+    this.onClick = this.onClick.bind(this);
     this.svgRef = React.createRef();
     this.state = {
       isFolded:
@@ -362,6 +367,30 @@ class Timeline extends React.Component {
     this.props.methods.onSelect(event);
   }
 
+  async onClick() {
+    console.log("click");
+    const timeShift = 3600 * 24; //14 days
+    const { range, rangeLimits } = this.props.app.timeline;
+    // let newDomain0 = timeSecond.offset(range[0], timeShift);
+    let earlyDate = rangeLimits[0];
+    let laterDate = timeSecond.offset(rangeLimits[0], 24 * timeShift);
+    const maxDate = rangeLimits[1];
+    let i = 0;
+    while (laterDate < maxDate) {
+      // i+=1;
+      // console.log(i)
+      // laterDate = timeSecond.offset(earlyDate, timeShift * 14);
+      // laterDate = timeSecond.offset(laterDate, timeShift * 14);
+      // this.props.methods.onUpdateTimerange([earlyDate, laterDate]);
+      // await timeout(100); //for 1 sec delay
+      i += 1;
+      console.log(i);
+      laterDate = timeSecond.offset(laterDate, timeShift * Math.min(2 * i, 14));
+      this.props.methods.onUpdateTimerange([earlyDate, laterDate]);
+      await timeout(750); //for 1 sec delay
+    }
+  }
+
   render() {
     const { isNarrative, app, domain } = this.props;
     const { timeline } = app;
@@ -391,7 +420,12 @@ class Timeline extends React.Component {
         <div className="timeline-content">
           <div id={this.props.ui.dom.timeline} className="timeline">
             <div className="timeline-container">
-              <svg ref={this.svgRef} width={dims.width} style={contentHeight}>
+              <svg
+                ref={this.svgRef}
+                width={dims.width}
+                style={contentHeight}
+                onClick={this.onClick}
+              >
                 <Clip dims={dims} />
                 <Axis
                   ticks={timeline.dimensions.ticks}

src/components/time/atoms/Header.js

@@ -12,7 +12,10 @@ const TimelineHeader = ({ title, from, to, onClick, hideInfo }) => {
         </p>
       </div>
       <div className={`timeline-info ${hideInfo ? "hidden" : ""}`}>
-        <p dangerouslySetInnerHTML={{ __html: title }} />
+        <p
+          style={{ fontSize: 20 }}
+          dangerouslySetInnerHTML={{ __html: title }}
+        />
         <p>
           {d0} - {d1}
         </p>