@spider-analyzer/timeline 4.0.3 → 5.0.0

package/src/moment-shim.ts

@@ -0,0 +1,169 @@
+// Moment-compatible thin wrapper over Luxon.
+//
+// Exposes exactly the moment API surface that this library's internal code
+// uses — not a general-purpose replacement. Swapping to this shim in place
+// of `moment-timezone` drops ~300 KB from consumer bundles while keeping
+// the component's internal .isBefore/.add/.diff/etc. call sites unchanged.
+
+import { DateTime, Duration, type DurationLikeObject } from 'luxon';
+
+const unitMap: Record<string, keyof DurationLikeObject> = {
+    ms: 'milliseconds',
+    milliseconds: 'milliseconds',
+    millisecond: 'milliseconds',
+    second: 'seconds',
+    seconds: 'seconds',
+    minute: 'minutes',
+    minutes: 'minutes',
+    hour: 'hours',
+    hours: 'hours',
+    day: 'days',
+    days: 'days',
+    month: 'months',
+    months: 'months',
+    year: 'years',
+    years: 'years',
+};
+
+function normalizeUnit(unit: string | undefined): keyof DurationLikeObject {
+    if (!unit) return 'milliseconds';
+    const norm = unit.toLowerCase();
+    return unitMap[norm] ?? (norm as keyof DurationLikeObject);
+}
+
+// A moment.duration-like handle. Internal code only uses `.asMilliseconds()`.
+class DurationLike {
+    private d: Duration;
+    constructor(d: Duration) { this.d = d; }
+    asMilliseconds(): number { return this.d.as('milliseconds'); }
+    valueOf(): number { return this.d.as('milliseconds'); }
+}
+
+function toDurationLike(x: any): DurationLike {
+    if (x instanceof DurationLike) return x;
+    if (typeof x === 'number') return new DurationLike(Duration.fromMillis(x));
+    if (typeof x === 'string') return new DurationLike(Duration.fromISO(x));
+    if (x && typeof x.asMilliseconds === 'function') {
+        return new DurationLike(Duration.fromMillis(x.asMilliseconds()));
+    }
+    return new DurationLike(Duration.fromMillis(0));
+}
+
+// A moment-like handle over a single Luxon DateTime.
+class MomentLike {
+    _dt: DateTime;
+
+    constructor(dt: DateTime) { this._dt = dt; }
+
+    _toDT(other: any): DateTime {
+        if (other instanceof MomentLike) return other._dt;
+        if (other instanceof Date) return DateTime.fromJSDate(other);
+        if (typeof other === 'number') return DateTime.fromMillis(other);
+        if (other instanceof DateTime) return other;
+        return DateTime.fromJSDate(new Date(other));
+    }
+
+    _addMillis(ms: number): number {
+        return this._dt.toMillis() + ms;
+    }
+
+    isBefore(other: any): boolean { return this._dt.toMillis() < this._toDT(other).toMillis(); }
+    isAfter(other: any): boolean { return this._dt.toMillis() > this._toDT(other).toMillis(); }
+    isSame(other: any): boolean { return this._dt.toMillis() === this._toDT(other).toMillis(); }
+    isSameOrBefore(other: any): boolean { return this._dt.toMillis() <= this._toDT(other).toMillis(); }
+    isSameOrAfter(other: any): boolean { return this._dt.toMillis() >= this._toDT(other).toMillis(); }
+
+    // moment returns duration by default; library internals always use the
+    // no-arg form and treat the result as a number via arithmetic. Return ms.
+    diff(other: any): number {
+        return this._dt.toMillis() - this._toDT(other).toMillis();
+    }
+
+    add(n: any, unit?: string): MomentLike {
+        const ms = normalizeToMillis(n, unit);
+        return new MomentLike(DateTime.fromMillis(this._addMillis(ms), { zone: this._dt.zone as any }));
+    }
+
+    subtract(n: any, unit?: string): MomentLike {
+        const ms = normalizeToMillis(n, unit);
+        return new MomentLike(DateTime.fromMillis(this._addMillis(-ms), { zone: this._dt.zone as any }));
+    }
+
+    toDate(): Date { return this._dt.toJSDate(); }
+    toISOString(): string { return this._dt.toUTC().toISO() ?? ''; }
+    valueOf(): number { return this._dt.toMillis(); }
+    format(fmt?: string): string {
+        if (!fmt) return this._dt.toISO() ?? '';
+        return this._dt.toFormat(momentFmtToLuxon(fmt));
+    }
+
+    // setter chain used in demo: .second(0).millisecond(0)
+    second(v: number): MomentLike { return new MomentLike(this._dt.set({ second: v })); }
+    millisecond(v: number): MomentLike { return new MomentLike(this._dt.set({ millisecond: v })); }
+
+    // Internal (escape hatch — prefer the wrapper API above).
+    toLuxon(): DateTime { return this._dt; }
+}
+
+function normalizeToMillis(n: any, unit?: string): number {
+    if (n instanceof DurationLike) return n.asMilliseconds();
+    if (n && typeof n.asMilliseconds === 'function') return n.asMilliseconds();
+    if (typeof n === 'number') {
+        if (!unit) return n;
+        const u = normalizeUnit(unit);
+        // Convert n<unit> to ms.
+        return Duration.fromObject({ [u]: n } as DurationLikeObject).as('milliseconds');
+    }
+    return 0;
+}
+
+function momentFmtToLuxon(fmt: string): string {
+    // Minimal mapping for the tokens used in the demo (TIME_FORMAT_TOOLTIP,
+    // locale.js). moment and Luxon agree on most of these already.
+    return fmt
+        .replace(/YYYY/g, 'yyyy')
+        .replace(/YY/g, 'yy')
+        .replace(/DD/g, 'dd')
+        .replace(/A/g, 'a');
+}
+
+// Public factory — matches `moment(x)` / `moment()`.
+interface MomentFactory {
+    (x?: any): MomentLike;
+    isMoment(x: any): x is MomentLike;
+    isDuration(x: any): x is DurationLike;
+    duration(x?: any, unit?: string): DurationLike;
+    tz(x: any, zone: string): MomentLike;
+}
+
+function toDT(x: any): DateTime {
+    if (x === undefined || x === null) return DateTime.now();
+    if (x instanceof MomentLike) return x.toLuxon();
+    if (x instanceof Date) return DateTime.fromJSDate(x);
+    if (typeof x === 'number') return DateTime.fromMillis(x);
+    if (typeof x === 'string') return DateTime.fromISO(x);
+    return DateTime.fromJSDate(new Date(x));
+}
+
+const moment = function moment(x?: any): MomentLike {
+    return new MomentLike(toDT(x));
+} as MomentFactory;
+
+moment.isMoment = (x: any): x is MomentLike => x instanceof MomentLike;
+moment.isDuration = (x: any): x is DurationLike => x instanceof DurationLike;
+
+moment.duration = (x?: any, unit?: string): DurationLike => {
+    if (typeof x === 'number' && unit) {
+        const u = normalizeUnit(unit);
+        return new DurationLike(Duration.fromObject({ [u]: x } as DurationLikeObject));
+    }
+    return toDurationLike(x);
+};
+
+moment.tz = (x: any, zone: string): MomentLike => {
+    const base = toDT(x);
+    return new MomentLike(base.setZone(zone));
+};
+
+export default moment;
+export type Moment = MomentLike;

package/src/styles.ts

@@ -0,0 +1,15 @@
+import clsx from 'clsx';
+import './timeline.css';
+
+/**
+ * Resolves a built-in class name for a component slot, optionally merged with
+ * the consumer's override from the `classes` prop. Replaces the prior
+ * @material-ui/styles `useStyles()` + local clsx glue.
+ *
+ * Usage:
+ *   const className = (name: string) => cn(name, classes);
+ *   <rect className={className('histoItem')} />
+ */
+export function cn(name: string, classes?: Record<string, string>): string {
+    return clsx(`tl-${name}`, classes?.[name]);
+}

package/src/time.ts

@@ -0,0 +1,52 @@
+import moment, { type Moment } from './moment-shim';
+type Duration = { asMilliseconds(): number };
+
+/**
+ * API-boundary funnel.
+ *
+ * External callers pass native `Date` (and millisecond numbers for
+ * durations) — the library is internally written against moment-timezone.
+ * These helpers normalize at the boundary so consumers don't need to take
+ * a moment peer-dep.
+ *
+ * For compat during migration, inputs may also be moment instances.
+ * In a future release (when moment is replaced by Luxon), this file is
+ * the only place that needs to change.
+ */
+
+export type Instant = Date | Moment | number;
+export type Millis = number | Duration;
+
+export function toMoment(x: Instant, zone?: string): Moment {
+    if (moment.isMoment(x)) return x as Moment;
+    const m = zone ? moment.tz(x as any, zone) : moment(x as any);
+    return m;
+}
+
+export function toDuration(x: Millis): Duration {
+    if (moment.isDuration(x)) return x as Duration;
+    return moment.duration(x as number);
+}
+
+export function fromMoment(m: Moment | null | undefined): Date | null {
+    return m ? m.toDate() : null;
+}
+
+export interface DateDomain { min: Date; max: Date; }
+export interface DateTimeSpan { start: Date; stop: Date; }
+
+export function domainToMoments(d: { min: Instant; max: Instant }, zone?: string) {
+    return { min: toMoment(d.min, zone), max: toMoment(d.max, zone) };
+}
+
+export function timeSpanToMoments(t: { start: Instant; stop: Instant }, zone?: string) {
+    return { start: toMoment(t.start, zone), stop: toMoment(t.stop, zone) };
+}
+
+export function domainToDates(d: { min: Moment; max: Moment }): DateDomain {
+    return { min: d.min.toDate(), max: d.max.toDate() };
+}
+
+export function timeSpanToDates(t: { start: Moment; stop: Moment }): DateTimeSpan {
+    return { start: t.start.toDate(), stop: t.stop.toDate() };
+}

package/src/timeLineElements/Button.jsx

@@ -1,37 +1,12 @@
 import React, {useState} from 'react';
 import PropTypes from 'prop-types';
-import {makeStyles} from '@material-ui/styles';
 import ToolTip from '../ToolTip';
 import clsx from 'clsx';
 
-import theme from '../theme';
 
-const useStyles = makeStyles({
-    buttonGroup: {
-        cursor: 'pointer'
-    },
-    buttonGroupInactive: {
-        cursor: 'not-allowed'
-    },
-    buttonOverShape: {
-        fill: 'transparent'
-    },
-    buttonIcon: {
-        fill: theme.colors.medium,
-        fillOpacity: 1,
-        stroke: theme.colors.medium,
-        strokeWidth: 1,
-        strokeOpacity: 1
-    },
-    buttonIconOver: {
-        fill: theme.colors.buttonOver,
-        stroke: theme.colors.buttonOver,
-    }
-});
 
 export default function Button({tipPlacement, tipOverlay, path, origin, scale, iconSize, onClick, classes, rcToolTipPrefixCls, isActive}){
     const [isOver, setOver] = useState(false);
-    const defaultClasses = useStyles();
 
     return (
         <ToolTip
@@ -40,9 +15,9 @@ export default function Button({tipPlacement, tipOverlay, path, origin, scale, i
         >
             <g
                 className={clsx(
-                    defaultClasses.buttonGroup,
+                    "tl-buttonGroup",
                     classes.buttonGroup,
-                    !isActive && defaultClasses.buttonGroupInactive,
+                    !isActive && "tl-buttonGroupInactive",
                     !isActive && classes.buttonGroupInactive,
                 )}
                 transform={`translate(${origin.x},${origin.y}) scale(${scale})`}
@@ -58,7 +33,7 @@ export default function Button({tipPlacement, tipOverlay, path, origin, scale, i
             >
                 <rect
                     className={clsx(
-                        defaultClasses.buttonOverShape,
+                        "tl-buttonOverShape",
                         classes.buttonOverShape
                     )}
                     x ='0'
@@ -68,9 +43,9 @@ export default function Button({tipPlacement, tipOverlay, path, origin, scale, i
                 />
                 <path
                     className={clsx(
-                        defaultClasses.buttonIcon,
+                        "tl-buttonIcon",
                         classes.buttonIcon,
-                        isOver && defaultClasses.buttonIconOver,
+                        isOver && "tl-buttonIconOver",
                         isOver && classes.buttonIconOver
                     )}
                     d={path}

package/src/timeLineElements/HistoToolTip.jsx

@@ -1,27 +1,13 @@
-import {makeStyles} from '@material-ui/styles';
+import { cn } from "../styles";
 import clsx from 'clsx';
 import PropTypes from 'prop-types';
-import moment from 'moment-timezone';
+import moment from '../moment-shim';
 import React from 'react';
 
-const useStyles = makeStyles({
-    innerTipMetrics:{
-        marginTop: 4
-    },
-    innerTipLeft:{
-        marginRight: 4,
-        display: 'inline-block'
-    },
-    innerTipRight:{
-        display: 'inline-block',
-        float: 'right'
-    }
-});
 
 export default function HistoTooltip({metricsDefinition, item, onFormatTimeToolTips, onFormatMetricLegend, classes}){
 
-    const defaultClasses = useStyles();
-    const className = (className) => clsx(defaultClasses[className], classes[className]);
+    const className = (n) => cn(n, classes);
 
     return (
         <>

package/src/timeLineElements/Histogram.jsx

@@ -1,22 +1,11 @@
+import { cn } from "../styles";
 import React from 'react';
-import moment from 'moment-timezone';
-import _sum from 'lodash-es/sum';
+import moment from '../moment-shim';
+import { sum as _sum } from '../utils';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
-import {makeStyles} from '@material-ui/styles';
 import ToolTip from '../ToolTip';
 
-const useStyles = makeStyles({
-    histoItem: {
-        fillOpacity: 1,
-        strokeWidth: 1,
-    },
-    histoHovered: {
-        strokeWidth: 0,
-        fill: '#000000',
-        fillOpacity: 0.3
-    },
-});
 
 export default function Histogram({
   classes, items, metricsDefinition, origin,
@@ -28,8 +17,7 @@ export default function Histogram({
         return null;
     }
 
-    const defaultClasses= useStyles();
-    const className = (className) => clsx(defaultClasses[className], classes[className]);
+    const className = (n) => cn(n, classes);
 
     return <g transform={`translate(${origin.x}, ${origin.y})`}>
         {

package/src/timeLineElements/Legend.jsx

@@ -1,30 +1,16 @@
+import { cn } from "../styles";
 import React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
 
-import theme from '../theme';
-import {makeStyles} from '@material-ui/styles';
 
-const useStyles = makeStyles({
-    legend: {
-        fontSize: theme.font.legendSize,
-        lineHeight: '125%',
-        fontFamily: theme.font.family,
-        fillOpacity: 1,
-        stroke:'none',
-        textAlign:'end',
-        textAnchor:'end',
-        userSelect: 'none'
-    }
-});
 
 export default function Legend({classes, metricsDefinition, origin}){
 
     const fill = [...metricsDefinition.colors].reverse();
     const legends = [...metricsDefinition.legends].reverse();
 
-    const defaultClasses = useStyles();
-    const className = (className) => clsx(defaultClasses[className], classes[className]);
+    const className = (n) => cn(n, classes);
 
     return (
         <g

package/src/timeLineElements/QualityLine.jsx

@@ -1,24 +1,17 @@
+import { cn } from "../styles";
 import React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
 
-import theme from '../theme';
-import {makeStyles} from '@material-ui/styles';
-import moment from 'moment-timezone';
+import moment from '../moment-shim';
 import ToolTip from '../ToolTip';
 
 const qualityHeight = 3;
 
-const useStyles = makeStyles({
-    qualityCell: {
-        strokeWidth: 0,
-    }
-});
 
 export default function QualityLine({classes, rcToolTipPrefixCls, origin, quality, xAxis, qualityScale}){
 
-    const defaultClasses = useStyles();
-    const className = (className) => clsx(defaultClasses[className], classes[className]);
+    const className = (n) => cn(n, classes);
 
     return (
         <g transform={`translate(${origin.x}, ${origin.y})`}>
@@ -33,7 +26,7 @@ export default function QualityLine({classes, rcToolTipPrefixCls, origin, qualit
                             style={{
                                 fill: qualityScale(item.quality),
                             }}
-                            onMouseOver={(event) => { event.target.style.fill = theme.colors.qualityFillSelected; }}
+                            onMouseOver={(event) => { event.target.style.fill = '#00ebeb'; }}
                             onMouseOut={(event) => { event.target.style.fill = qualityScale(item.quality); }}
                             x={x1}
                             y={1}

package/src/timeLineElements/Tools.jsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import moment from 'moment-timezone';
+import moment from '../moment-shim';
 import Button from './Button';
 
 const doubleArrowIcon = 'm 0,0 5,5 0,-5 5,5 -5,5 0,-5 -5,5 Z';

package/src/timeLineElements/XAxis.jsx

@@ -1,17 +1,17 @@
 import React from 'react';
-import moment from 'moment-timezone';
+import moment from '../moment-shim';
 import PropTypes from 'prop-types';
 import {timeDay} from 'd3-time';
 import clsx from 'clsx';
 
-import {useStyles, arrow} from './axesStyles';
+import { arrow } from "./axesStyles";
+import { cn } from "../styles";
 
-export default function XAxis({min, max, origin, axisWidth, marks, xAxis, classes, arrowPath, onFormatTimeLegend}){
+export default function XAxis({min, max, origin, axisWidth, marks, xAxis, classes, arrowPath = arrow, onFormatTimeLegend}){
 
     const now = moment();
-    const defaultClasses = useStyles();
 
-    const className = (className) => clsx(defaultClasses[className], classes[className]);
+    const className = (n) => cn(n, classes);
 
     return (
         <g transform={`translate(${origin.x}, ${origin.y})`}
@@ -81,6 +81,3 @@ XAxis.propTypes = {
     onFormatTimeLegend: PropTypes.func.isRequired,
 };
 
-XAxis.defaultProps = {
-    arrowPath: arrow,
-}

package/src/timeLineElements/XGrid.jsx

@@ -1,15 +1,14 @@
 import React from 'react';
-import moment from 'moment-timezone';
+import moment from '../moment-shim';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
 
-import {useStyles, arrow} from './axesStyles';
+import { cn } from "../styles";
 
 export default function XAxis({origin, marks, xAxis, classes, yAxisHeight}){
 
-    const defaultClasses = useStyles();
 
-    const className = (className) => clsx(defaultClasses[className], classes[className]);
+    const className = (n) => cn(n, classes);
 
     return (
         <g transform={`translate(${origin.x}, ${origin.y})`}>
@@ -43,6 +42,3 @@ XAxis.propTypes = {
     yAxisHeight: PropTypes.number,
 };
 
-XAxis.defaultProps = {
-    arrowPath: arrow,
-}

package/src/timeLineElements/YAxis.jsx

@@ -1,13 +1,13 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 
-import {useStyles, arrow} from './axesStyles';
+import { arrow } from "./axesStyles";
+import { cn } from "../styles";
 import clsx from 'clsx';
 
-export default function YAxis({classes, marks, yAxis, onFormatMetricLegend, maxHeight, origin, arrowPath}){
+export default function YAxis({classes, marks, yAxis, onFormatMetricLegend, maxHeight, origin, arrowPath = arrow}){
 
-    const defaultClasses = useStyles();
-    const className = (className) => clsx(defaultClasses[className], classes[className]);
+    const className = (n) => cn(n, classes);
 
     return (
         <g transform={`translate(${origin.x}, ${origin.y})`}
@@ -59,6 +59,3 @@ YAxis.propTypes = {
     onFormatMetricLegend: PropTypes.func.isRequired,
 };
 
-YAxis.defaultProps = {
-    arrowPath: arrow,
-}

package/src/timeLineElements/YGrid.jsx

@@ -1,13 +1,12 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 
-import {useStyles, arrow} from './axesStyles';
+import { cn } from "../styles";
 import clsx from 'clsx';
 
 export default function YAxis({classes, marks, yAxis, origin, xAxisWidth}){
 
-    const defaultClasses = useStyles();
-    const className = (className) => clsx(defaultClasses[className], classes[className]);
+    const className = (n) => cn(n, classes);
 
     return (
         <g transform={`translate(${origin.x}, ${origin.y})`}
@@ -40,6 +39,3 @@ YAxis.propTypes = {
     xAxisWidth: PropTypes.number,
 };
 
-YAxis.defaultProps = {
-    arrowPath: arrow,
-}

package/src/timeLineElements/axesStyles.jsx

@@ -1,50 +1 @@
-import {makeStyles} from '@material-ui/styles';
-import theme from '../theme';
-
 export const arrow = `m 0,-5 5,5 -5,5`;
-
-export const useStyles = makeStyles({
-    axis: {
-        fill: 'none',
-        stroke: theme.colors.medium,
-        strokeWidth: 1,
-    },
-    now: {
-        fill: theme.colors.mediumDark,
-        stroke: theme.colors.mediumDark,
-        strokeWidth: 1,
-    },
-    arrow: {
-        fill: theme.colors.medium,
-        fillOpacity: 1,
-        stroke: theme.colors.medium,
-        strokeWidth: 1,
-    },
-    grid: {
-        stroke: theme.colors.light,
-        strokeWidth: 1,
-    },
-    limitMarker: {
-        stroke: theme.colors.medium,
-        strokeWidth: 1,
-    },
-    timeAxisText: {
-        fontSize: theme.font.axisTextSize,
-        fontFamily: theme.font.family,
-        fill: theme.colors.medium,
-        textAlign: 'center',
-        textAnchor: 'middle',
-        userSelect: 'none'
-    },
-    timeAxisDaysText: {
-        fill: theme.colors.mediumDark,
-    },
-    verticalAxisText: {
-        fontSize: theme.font.axisTextSize,
-        fontFamily: theme.font.family,
-        fill: theme.font.family,
-        textAlign: 'end',
-        textAnchor: 'end',
-        userSelect: 'none'
-    }
-});