{"version":3,"file":"js/application-bundle-3d94bcc2ef6c74e20cbb.js","mappings":"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","sources":["webpack://app/./app/javascript/bundles/LineGraph/components/LineGraph.tsx","webpack://app/./app/javascript/packs/application-bundle.js"],"sourcesContent":["import React, { useMemo, useState } from \"react\";\nimport { scaleTime, scaleLinear } from \"@visx/scale\";\nimport { LinePath } from \"@visx/shape\";\nimport { AxisLeft, AxisBottom } from \"@visx/axis\";\nimport { Group } from \"@visx/group\";\nimport { curveBasis } from \"@visx/curve\";\nimport { ParentSize } from \"@visx/responsive\";\nimport { localPoint } from \"@visx/event\";\nimport { useTooltip, TooltipWithBounds, Tooltip } from \"@visx/tooltip\";\nimport {\n  FaceSmileIcon,\n  FaceFrownIcon,\n  UserIcon,\n} from \"@heroicons/react/24/outline\";\nimport { bisector } from \"@visx/vendor/d3-array\";\nimport { Line } from \"@visx/shape\";\n\nconst isDefined = (val) => val !== undefined;\nconst allValuesNotUndefined = (d) => d.every(isDefined);\n\nconst xAccessor = (d) => new Date(d?.[0] ?? Date.now());\nconst yAccessor = (d) => d?.[1] ?? 0;\nconst sampleUrlAccessor = (d) => d?.[2] ?? 0;\n\nconst bisectDate = bisector((d) => xAccessor(d)).left;\n\nconst sentimentAxisLabels = (value, x, y) => {\n  const props = { x, y, height: 20, width: 20, className: \"text-slate-700\" };\n  switch (value.toString()) {\n    case \"−1.0\":\n      return <FaceFrownIcon {...props} />;\n    case \"1.0\":\n      return <FaceSmileIcon {...props} />;\n    case \"0.0\":\n      return <UserIcon {...props} />;\n    default:\n      return \"\";\n  }\n};\n\n// TODO: Make this configurable in Ruby code.\nconst colorFromValue = (value) => {\n  if (value > 0.65) return \"#14532d\";\n  if (value > 0.3) return \"#15803d\";\n  if (value < -0.3) return \"#ef4444\";\n  if (value < -0.65) return \"#991b1b\";\n  return \"#475569\";\n};\n\nconst DateTooltip = ({ value, x, y }) => {\n  return (\n    <Tooltip\n      key={Math.random()}\n      top={y - 20}\n      left={x - 10}\n      className={\"absolute bg-white border -translate-x-1/2 whitespace-nowrap\"}\n    >\n      <div className=\"text-sm text-slate-600\">{value}</div>\n    </Tooltip>\n  );\n};\n\nconst ValueTooltip = ({ value, x, y }) => {\n  return (\n    <TooltipWithBounds\n      key={Math.random()}\n      top={y}\n      left={x}\n      className={\"absolute bg-white border p-2\"}\n    >\n      <span className=\"text-slate-600 text-sm\">{value}</span>\n    </TooltipWithBounds>\n  );\n};\n\nconst asResizableGraph =\n  (Component) =>\n  ({ data, samples }) => {\n    const processedData = useMemo(\n      () => data.filter(allValuesNotUndefined),\n      [data],\n    );\n    const processedSamples = useMemo(\n      () => samples.filter(allValuesNotUndefined),\n      [samples],\n    );\n\n    return (\n      <ParentSize debounceTime={10}>\n        {({ width, height }) => {\n          const defaultMargin = { top: 40, right: 40, bottom: 30, left: 40 };\n\n          const xScale = scaleTime({\n            range: [defaultMargin.left, width - defaultMargin.right],\n            domain: [\n              Math.min(...processedData.map(xAccessor)),\n              Math.max(...processedData.map(xAccessor)),\n            ],\n          });\n          const yScale = scaleLinear({\n            range: [height - defaultMargin.bottom, defaultMargin.top],\n            domain: [-1, 1],\n          });\n\n          return (\n            <Component\n              width={width}\n              height={height}\n              margin={defaultMargin}\n              xScale={xScale}\n              yScale={yScale}\n              data={processedData}\n              samples={processedSamples}\n            />\n          );\n        }}\n      </ParentSize>\n    );\n  };\n\nconst formatDate = (date: string) => {\n  if (date.includes(\"T\")) {\n    return new Date(date).toLocaleString();\n  }\n  return date;\n};\n\nconst Sample = ({ sample, index, x, y }) => {\n  const [radius, setRadius] = useState(3);\n\n  return (\n    <a\n      key={`sample-${index}`}\n      href={sampleUrlAccessor(sample)}\n      target={\"_blank\"}\n      onMouseOver={(e) => {\n        setRadius(10);\n      }}\n      onMouseOut={(e) => {\n        setRadius(3);\n      }}\n    >\n      <circle cx={x} cy={y} r={10} fill={\"transparent\"}></circle>\n      <circle\n        cx={x}\n        cy={y}\n        r={radius}\n        opacity={0.8}\n        fill={colorFromValue(yAccessor(sample))}\n      ></circle>\n    </a>\n  );\n};\n\nconst StaticLineGraph = ({\n  data,\n  samples,\n  width,\n  height,\n  xScale,\n  yScale,\n  margin,\n}) => {\n  const { showTooltip, hideTooltip, tooltipData, tooltipLeft, tooltipTop } =\n    useTooltip();\n  const handleMouseOver = (event) => {\n    const coords = localPoint(event) || { x: 0, y: 0 };\n    if (coords.x < margin.left || coords.x > width - margin.right) return;\n\n    const x0 = xScale.invert(coords.x);\n    const index = bisectDate(data, x0, 1);\n    const d0 = data[index - 1];\n    const d1 = data[index];\n    let d = d0;\n\n    // This works out which point we are closer to given our current x position.\n    // Is it the point ahead of the mouse? Or the point behind the mouse?\n    if (d1 && xAccessor(d1)) {\n      d =\n        x0.valueOf() - xAccessor(d0).valueOf() >\n        xAccessor(d1).valueOf() - x0.valueOf()\n          ? d1\n          : d0;\n    }\n\n    showTooltip({\n      tooltipData: d,\n      tooltipLeft: xScale(xAccessor(d)),\n      tooltipTop: yScale(yAccessor(d)),\n    });\n  };\n\n  return (\n    <div className={\"relative\"}>\n      <svg\n        width={width}\n        height={height}\n        onMouseMove={handleMouseOver}\n        onMouseLeave={hideTooltip}\n      >\n        <Group>\n          {samples.map((sample, i) => (\n            <Sample\n              sample={sample}\n              index={i}\n              x={xScale(xAccessor(sample))}\n              y={yScale(yAccessor(sample))}\n            />\n          ))}\n          <LinePath\n            data={data}\n            x={(d) => xScale(xAccessor(d))}\n            y={(d) => yScale(yAccessor(d))}\n            stroke=\"#1e40af\"\n            strokeWidth={2}\n            curve={curveBasis}\n          />\n        </Group>\n        <AxisLeft\n          scale={yScale}\n          tickValues={[-1, 0, 1]}\n          left={margin.left}\n          stroke=\"#cbd5e1\"\n          tickStroke={\"#cbd5e1\"}\n          tickComponent={({ x, y, formattedValue }) =>\n            sentimentAxisLabels(formattedValue, x - 25, y - 12)\n          }\n        />\n        <AxisBottom\n          scale={xScale}\n          top={height - margin.bottom}\n          tickLength={10}\n          labelOffset={15}\n          numTicks={2}\n          hideZero={false}\n          stroke=\"#cbd5e1\"\n          tickStroke={\"#cbd5e1\"}\n          tickValues={xScale.domain()}\n          tickFormat={(value) => value.toString().substring(0, 10)}\n          tickLabelProps={() => ({\n            fill: \"#64748b\",\n            fontSize: 12,\n            textAnchor: \"middle\",\n            dy: \"0.3em\",\n          })}\n        />\n        {tooltipData && (\n          <Line\n            from={{ x: tooltipLeft, y: margin.top }}\n            to={{ x: tooltipLeft, y: height - margin.bottom }}\n            stroke={\"#1e40af\"}\n            strokeWidth={1}\n            pointerEvents=\"none\"\n            strokeDasharray=\"5,2\"\n          />\n        )}\n      </svg>\n      {tooltipData && (\n        <React.Fragment>\n          <DateTooltip\n            value={formatDate(tooltipData?.[0])}\n            x={tooltipLeft}\n            y={height - margin.bottom}\n          />\n          <ValueTooltip\n            value={yAccessor(tooltipData)}\n            x={tooltipLeft}\n            y={tooltipTop}\n          />\n        </React.Fragment>\n      )}\n    </div>\n  );\n};\n\nconst LineGraph = asResizableGraph(StaticLineGraph);\nexport default LineGraph;\n","import ReactOnRails from \"react-on-rails\";\n\nimport LineGraph from \"../bundles/./LineGraph/components/LineGraph\";\n\nReactOnRails.setOptions({\n  turbo: true,\n});\n\n// This is how react_on_rails can see the LineGraph in the browser.\nReactOnRails.register({\n  LineGraph,\n});\n"],"names":["isDefined","val","undefined","allValuesNotUndefined","d","every","xAccessor","Date","now","yAccessor","bisectDate","bisector","left","DateTooltip","value","x","y","React","Tooltip","key","Math","random","top","className","ValueTooltip","TooltipWithBounds","Sample","sample","index","radius","setRadius","useState","href","target","onMouseOver","e","onMouseOut","cx","cy","r","fill","opacity","Component","StaticLineGraph","data","samples","width","height","xScale","yScale","margin","showTooltip","hideTooltip","tooltipData","tooltipLeft","tooltipTop","useTooltip","onMouseMove","event","coords","localPoint","right","x0","invert","d0","d1","valueOf","onMouseLeave","Group","map","i","LinePath","stroke","strokeWidth","curve","curveBasis","AxisLeft","scale","tickValues","tickStroke","tickComponent","formattedValue","sentimentAxisLabels","props","toString","FaceFrownIcon","FaceSmileIcon","UserIcon","AxisBottom","bottom","tickLength","labelOffset","numTicks","hideZero","domain","tickFormat","substring","tickLabelProps","fontSize","textAnchor","dy","Line","from","to","pointerEvents","strokeDasharray","date","includes","toLocaleString","processedData","useMemo","filter","processedSamples","ParentSize","debounceTime","defaultMargin","scaleTime","range","min","max","scaleLinear","ReactOnRails","turbo","LineGraph"],"sourceRoot":""}