@google-psat/design-system 0.14.1 → 1.2.1

package/dist/components/tabs/useTabs/provider.jsx

@@ -1,29 +1,3 @@
-"use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.TabsProvider = void 0;
 /*
  * Copyright 2024 Google LLC
  *
@@ -42,27 +16,76 @@ exports.TabsProvider = void 0;
 /**
  * External dependencies.
  */
-const react_1 = __importStar(require("react"));
-const context_1 = require("./context");
-const TabsProvider = ({ children, items, }) => {
-    const [tabItems, setTabItems] = (0, react_1.useState)(items);
-    const [activeTab, setActiveTab] = (0, react_1.useState)(0);
-    const activeTabRef = (0, react_1.useRef)(activeTab);
-    const [storage, _setStorage] = (0, react_1.useState)(Array(items.length).fill(''));
-    const [highlightedTabs, setHighlightedTabs] = (0, react_1.useState)({});
-    (0, react_1.useEffect)(() => {
-        activeTabRef.current = activeTab;
-    }, [activeTab]);
-    (0, react_1.useEffect)(() => {
-        setTabItems(items);
-        _setStorage(Array(items.length).fill(''));
-    }, [items]);
-    const titles = (0, react_1.useMemo)(() => tabItems.map((item) => item.title), [tabItems]);
-    const panel = tabItems[activeTab].content;
-    const setStorage = (0, react_1.useCallback)((data, index) => {
+import React, { useCallback, useEffect, useMemo, useRef, useState, } from 'react';
+import { getSessionStorage, updateSessionStorage } from '@google-psat/common';
+import { TabsContext } from './context';
+import ProgressBar from '../../progressBar';
+export const TabsProvider = ({ children, items, isGroup = true, name, }) => {
+    const [groupedItems, setGroupedItems] = useState({});
+    useEffect(() => {
+        if (!isGroup && Array.isArray(items)) {
+            setGroupedItems(items.reduce((acc, item, index) => {
+                acc[`group-${index}`] = [item];
+                return acc;
+            }, {}));
+        }
+        else {
+            setGroupedItems(items);
+        }
+    }, [isGroup, items]);
+    const [activeGroup, _setActiveGroup] = useState(isGroup ? Object.keys(items)[0] ?? null : null);
+    const [activeTab, setActiveTab] = useState(0);
+    const groupItemsRef = useRef(groupedItems);
+    useEffect(() => {
+        groupItemsRef.current = groupedItems;
+    }, [groupedItems]);
+    useEffect(() => {
+        _setActiveGroup((prev) => prev === null ? Object.keys(groupItemsRef.current)[0] ?? null : prev);
+    }, []);
+    const setActiveGroup = useCallback((group) => {
+        _setActiveGroup(group);
+        const keys = Object.keys(groupItemsRef.current);
+        let index = 0;
+        let tabIndex = 0;
+        while (index < keys.length && keys[index] !== group) {
+            tabIndex += groupItemsRef.current[keys[index]]?.length || 0;
+            index++;
+        }
+        setActiveTab(tabIndex);
+    }, []);
+    const tabItems = useMemo(() => {
+        return Object.values(groupedItems).flat();
+    }, [groupedItems]);
+    const [storage, _setStorage] = useState(Array(tabItems.length).fill(''));
+    const [highlightedTabs, setHighlightedTabs] = useState({});
+    useEffect(() => {
+        _setStorage(Array(tabItems.length).fill(''));
+    }, [tabItems.length]);
+    const groupedTitles = useMemo(() => {
+        let trackedIndex = 0;
+        return Object.entries(groupedItems).reduce((acc, [group, _items]) => {
+            const groupTitles = _items.map((item) => {
+                return {
+                    title: item.title,
+                    index: trackedIndex++,
+                };
+            });
+            return { ...acc, [group]: groupTitles };
+        }, {});
+    }, [groupedItems]);
+    const [loading, setLoading] = useState(true);
+    const titles = useMemo(() => tabItems.map((item) => item.title), [tabItems]);
+    const panel = loading
+        ? {
+            Element: ProgressBar,
+        }
+        : tabItems?.[activeTab]?.content ?? {
+            Element: null,
+        };
+    const setStorage = useCallback((data, index) => {
         _setStorage((prev) => {
             const next = [...prev];
-            const _index = index !== null && index !== void 0 ? index : activeTab;
+            const _index = index ?? activeTab;
             const currentData = next[_index].startsWith('{')
                 ? JSON.parse(next[_index])
                 : next[_index];
@@ -75,55 +98,114 @@ const TabsProvider = ({ children, items, }) => {
                         : JSON.stringify(incomingData);
             }
             else {
-                next[_index] = JSON.stringify(Object.assign(Object.assign({}, currentData), incomingData));
+                next[_index] = JSON.stringify({
+                    ...currentData,
+                    ...incomingData,
+                });
             }
             return next;
         });
     }, [activeTab]);
-    const highlightTab = (0, react_1.useCallback)((tab, update = true, increment = false) => {
-        if (tab === activeTabRef.current) {
+    const highlightTab = useCallback((tab, update = true, increment = false) => {
+        if (tab === activeTab) {
             return;
         }
         setHighlightedTabs((prev) => {
-            const next = Object.assign({}, prev);
+            const next = { ...prev };
             const prevCount = typeof next[tab] === 'number' ? next[tab] : 0;
             next[tab] = increment ? prevCount + 1 : update;
             return next;
         });
-    }, []);
-    const isTabHighlighted = (0, react_1.useCallback)((tab) => {
-        var _a;
-        return (_a = highlightedTabs === null || highlightedTabs === void 0 ? void 0 : highlightedTabs[tab]) !== null && _a !== void 0 ? _a : false;
+    }, [activeTab]);
+    const isTabHighlighted = useCallback((tab) => {
+        return highlightedTabs?.[tab] ?? false;
     }, [highlightedTabs]);
-    (0, react_1.useEffect)(() => {
-        if (highlightedTabs[activeTabRef.current]) {
+    useEffect(() => {
+        if (highlightedTabs[activeTab]) {
             setHighlightedTabs((prev) => {
-                const next = Object.assign({}, prev);
-                next[activeTabRef.current] = false;
+                const next = { ...prev };
+                next[activeTab] = false;
                 return next;
             });
         }
     }, [activeTab, highlightTab, highlightedTabs]);
-    const shouldAddSpacer = (0, react_1.useCallback)((index) => {
-        return Boolean(tabItems[index].addSpacer);
+    const shouldAddSpacer = useCallback((index) => {
+        return Boolean(tabItems[index]?.addSpacer);
     }, [tabItems]);
-    return (<context_1.TabsContext.Provider value={{
+    const getTabGroup = useCallback((tab) => {
+        let group = '';
+        let tracker = 0;
+        Object.entries(groupedItems).forEach(([groupKey, data]) => {
+            if (group) {
+                return;
+            }
+            if (tracker + data.length < tab + 1) {
+                tracker += data.length;
+            }
+            else {
+                group = groupKey;
+                return;
+            }
+        });
+        return group;
+    }, [groupedItems]);
+    useEffect(() => {
+        if (!name) {
+            setActiveTab(0);
+            setLoading(false);
+            return;
+        }
+        (async () => {
+            const sessionStorage = (await getSessionStorage('tabs')) || {};
+            if (!sessionStorage[name]) {
+                sessionStorage[name] = {
+                    activeTab: 0,
+                    activeGroup: 0,
+                };
+            }
+            const _activeTab = sessionStorage[name].activeTab || 0;
+            const _activeGroup = sessionStorage[name].activeGroup ||
+                Object.keys(groupItemsRef.current)[0];
+            setActiveGroup(_activeGroup);
+            setActiveTab(_activeTab);
+            setLoading(false);
+        })();
+    }, [name, setActiveGroup]);
+    useEffect(() => {
+        if (!name) {
+            return;
+        }
+        (async () => {
+            await updateSessionStorage({
+                [name]: {
+                    activeTab,
+                    activeGroup,
+                },
+            }, 'tabs');
+        })();
+    }, [name, activeTab, activeGroup]);
+    return (<TabsContext.Provider value={{
             state: {
                 activeTab,
+                activeGroup,
+                groupedTitles,
                 titles,
                 panel,
                 storage,
+                isGroup,
+                loading,
             },
             actions: {
                 setStorage,
                 setActiveTab,
+                setActiveGroup,
                 highlightTab,
                 isTabHighlighted,
                 shouldAddSpacer,
+                getTabGroup,
             },
         }}>
       {children}
-    </context_1.TabsContext.Provider>);
+    </TabsContext.Provider>);
 };
-exports.TabsProvider = TabsProvider;
 //# sourceMappingURL=provider.jsx.map

package/dist/components/tabs/useTabs/provider.jsx.map

@@ -1 +1 @@
-{"version":3,"file":"provider.jsx","sourceRoot":"","sources":["../../../../src/components/tabs/useTabs/provider.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;;;;;;;;;;;;;;GAcG;AACH;;GAEG;AACH,+CAOe;AAMf,uCAAwC;AAEjC,MAAM,YAAY,GAAG,CAAC,EAC3B,QAAQ,EACR,KAAK,GACgC,EAAE,EAAE;IACzC,MAAM,CAAC,QAAQ,EAAE,WAAW,CAAC,GAAG,IAAA,gBAAQ,EAAC,KAAK,CAAC,CAAC;IAChD,MAAM,CAAC,SAAS,EAAE,YAAY,CAAC,GAAG,IAAA,gBAAQ,EAAC,CAAC,CAAC,CAAC;IAC9C,MAAM,YAAY,GAAG,IAAA,cAAM,EAAC,SAAS,CAAC,CAAC;IACvC,MAAM,CAAC,OAAO,EAAE,WAAW,CAAC,GAAG,IAAA,gBAAQ,EACrC,KAAK,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC,IAAI,CAAC,EAAE,CAAC,CAC7B,CAAC;IACF,MAAM,CAAC,eAAe,EAAE,kBAAkB,CAAC,GAAG,IAAA,gBAAQ,EAEpD,EAAE,CAAC,CAAC;IAEN,IAAA,iBAAS,EAAC,GAAG,EAAE;QACb,YAAY,CAAC,OAAO,GAAG,SAAS,CAAC;IACnC,CAAC,EAAE,CAAC,SAAS,CAAC,CAAC,CAAC;IAEhB,IAAA,iBAAS,EAAC,GAAG,EAAE;QACb,WAAW,CAAC,KAAK,CAAC,CAAC;QACnB,WAAW,CAAC,KAAK,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC,CAAC;IAC5C,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC,CAAC;IAEZ,MAAM,MAAM,GAAG,IAAA,eAAO,EAAC,GAAG,EAAE,CAAC,QAAQ,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,CAAC,KAAK,CAAC,EAAE,CAAC,QAAQ,CAAC,CAAC,CAAC;IAC7E,MAAM,KAAK,GAAG,QAAQ,CAAC,SAAS,CAAC,CAAC,OAAO,CAAC;IAE1C,MAAM,UAAU,GAAG,IAAA,mBAAW,EAC5B,CAAC,IAAY,EAAE,KAAc,EAAE,EAAE;QAC/B,WAAW,CAAC,CAAC,IAAI,EAAE,EAAE;YACnB,MAAM,IAAI,GAAG,CAAC,GAAG,IAAI,CAAC,CAAC;YACvB,MAAM,MAAM,GAAG,KAAK,aAAL,KAAK,cAAL,KAAK,GAAI,SAAS,CAAC;YAClC,MAAM,WAAW,GAAG,IAAI,CAAC,MAAM,CAAC,CAAC,UAAU,CAAC,GAAG,CAAC;gBAC9C,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;gBAC1B,CAAC,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;YACjB,MAAM,YAAY,GAAG,IAAI,CAAC,UAAU,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC;YAEpE,IACE,OAAO,YAAY,KAAK,OAAO,WAAW;gBAC1C,OAAO,YAAY,KAAK,QAAQ,EAChC,CAAC;gBACD,IAAI,CAAC,MAAM,CAAC;oBACV,OAAO,YAAY,KAAK,QAAQ;wBAC9B,CAAC,CAAC,YAAY;wBACd,CAAC,CAAC,IAAI,CAAC,SAAS,CAAC,YAAY,CAAC,CAAC;YACrC,CAAC;iBAAM,CAAC;gBACN,IAAI,CAAC,MAAM,CAAC,GAAG,IAAI,CAAC,SAAS,iCACxB,WAAW,GACX,YAAY,EACf,CAAC;YACL,CAAC;YAED,OAAO,IAAI,CAAC;QACd,CAAC,CAAC,CAAC;IACL,CAAC,EACD,CAAC,SAAS,CAAC,CACZ,CAAC;IAEF,MAAM,YAAY,GAAG,IAAA,mBAAW,EAC9B,CAAC,GAAW,EAAE,SAA2B,IAAI,EAAE,SAAS,GAAG,KAAK,EAAE,EAAE;QAClE,IAAI,GAAG,KAAK,YAAY,CAAC,OAAO,EAAE,CAAC;YACjC,OAAO;QACT,CAAC;QAED,kBAAkB,CAAC,CAAC,IAAI,EAAE,EAAE;YAC1B,MAAM,IAAI,qBAAQ,IAAI,CAAE,CAAC;YACzB,MAAM,SAAS,GAAG,OAAO,IAAI,CAAC,GAAG,CAAC,KAAK,QAAQ,CAAC,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;YAEhE,IAAI,CAAC,GAAG,CAAC,GAAG,SAAS,CAAC,CAAC,CAAC,SAAS,GAAG,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC;YAC/C,OAAO,IAAI,CAAC;QACd,CAAC,CAAC,CAAC;IACL,CAAC,EACD,EAAE,CACH,CAAC;IAEF,MAAM,gBAAgB,GAAG,IAAA,mBAAW,EAClC,CAAC,GAAW,EAAE,EAAE;;QACd,OAAO,MAAA,eAAe,aAAf,eAAe,uBAAf,eAAe,CAAG,GAAG,CAAC,mCAAI,KAAK,CAAC;IACzC,CAAC,EACD,CAAC,eAAe,CAAC,CAClB,CAAC;IAEF,IAAA,iBAAS,EAAC,GAAG,EAAE;QACb,IAAI,eAAe,CAAC,YAAY,CAAC,OAAO,CAAC,EAAE,CAAC;YAC1C,kBAAkB,CAAC,CAAC,IAAI,EAAE,EAAE;gBAC1B,MAAM,IAAI,qBAAQ,IAAI,CAAE,CAAC;gBACzB,IAAI,CAAC,YAAY,CAAC,OAAO,CAAC,GAAG,KAAK,CAAC;gBACnC,OAAO,IAAI,CAAC;YACd,CAAC,CAAC,CAAC;QACL,CAAC;IACH,CAAC,EAAE,CAAC,SAAS,EAAE,YAAY,EAAE,eAAe,CAAC,CAAC,CAAC;IAE/C,MAAM,eAAe,GAAG,IAAA,mBAAW,EACjC,CAAC,KAAa,EAAE,EAAE;QAChB,OAAO,OAAO,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC,SAAS,CAAC,CAAC;IAC5C,CAAC,EACD,CAAC,QAAQ,CAAC,CACX,CAAC;IAEF,OAAO,CACL,CAAC,qBAAW,CAAC,QAAQ,CACnB,KAAK,CAAC,CAAC;YACL,KAAK,EAAE;gBACL,SAAS;gBACT,MAAM;gBACN,KAAK;gBACL,OAAO;aACR;YACD,OAAO,EAAE;gBACP,UAAU;gBACV,YAAY;gBACZ,YAAY;gBACZ,gBAAgB;gBAChB,eAAe;aAChB;SACF,CAAC,CAEF;MAAA,CAAC,QAAQ,CACX;IAAA,EAAE,qBAAW,CAAC,QAAQ,CAAC,CACxB,CAAC;AACJ,CAAC,CAAC;AAvHW,QAAA,YAAY,gBAuHvB"}
+{"version":3,"file":"provider.jsx","sourceRoot":"","sources":["../../../../src/components/tabs/useTabs/provider.tsx"],"names":[],"mappings":"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"}

package/dist/components/tabs/useTabs/types.js

@@ -1,3 +1,2 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
+export {};
 //# sourceMappingURL=types.js.map

package/dist/components/tabs/useTabs/useTabs.jsx

@@ -1,6 +1,3 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.useTabs = useTabs;
 /*
  * Copyright 2023 Google LLC
  *
@@ -19,17 +16,17 @@ exports.useTabs = useTabs;
 /**
  * External dependencies.
  */
-const common_1 = require("@google-psat/common");
+import { useContextSelector } from '@google-psat/common';
 /**
  * Internal dependencies.
  */
-const context_1 = require("./context");
+import { TabsContext } from './context';
 /**
  * Tabs store hook.
  * @param selector Selector function to partially select state.
  * @returns selected part of the state
  */
-function useTabs(selector = (state) => state) {
-    return (0, common_1.useContextSelector)(context_1.TabsContext, selector);
+export function useTabs(selector = (state) => state) {
+    return useContextSelector(TabsContext, selector);
 }
 //# sourceMappingURL=useTabs.jsx.map

package/dist/components/tabs/useTabs/useTabs.jsx.map

@@ -1 +1 @@
-{"version":3,"file":"useTabs.jsx","sourceRoot":"","sources":["../../../../src/components/tabs/useTabs/useTabs.tsx"],"names":[],"mappings":";;AAiCA,0BAIC;AArCD;;;;;;;;;;;;;;GAcG;AACH;;GAEG;AACH,gDAAyD;AAEzD;;GAEG;AACH,uCAA0D;AAK1D;;;;GAIG;AACH,SAAgB,OAAO,CACrB,WAA8D,CAAC,KAAK,EAAE,EAAE,CAAC,KAAK;IAE9E,OAAO,IAAA,2BAAkB,EAAC,qBAAW,EAAE,QAAQ,CAAC,CAAC;AACnD,CAAC"}
+{"version":3,"file":"useTabs.jsx","sourceRoot":"","sources":["../../../../src/components/tabs/useTabs/useTabs.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;GAcG;AACH;;GAEG;AACH,OAAO,EAAE,kBAAkB,EAAE,MAAM,qBAAqB,CAAC;AAEzD;;GAEG;AACH,OAAO,EAAE,WAAW,EAAoB,MAAM,WAAW,CAAC;AAK1D;;;;GAIG;AACH,MAAM,UAAU,OAAO,CACrB,WAA8D,CAAC,KAAK,EAAE,EAAE,CAAC,KAAK;IAE9E,OAAO,kBAAkB,CAAC,WAAW,EAAE,QAAQ,CAAC,CAAC;AACnD,CAAC"}

package/dist/components/timeline/bar.jsx

@@ -0,0 +1,71 @@
+/*
+ * Copyright 2025 Google LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     https://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+/**
+ * External dependencies
+ */
+import React, { useCallback, useState } from 'react';
+import { BidderType, formatDuration } from '@google-psat/common';
+import classNames from 'classnames';
+/**
+ * Internal dependencies
+ */
+import { HammerIcon } from '../../icons';
+import { BAR_COLORS } from './constants';
+const Bar = ({ bidder, index, zoom, bidderType, fullWidth, animate, setSelectedRow, }) => {
+    const [isBarHovered, setIsBarHovered] = useState(false);
+    const handleBarHover = useCallback(() => {
+        setIsBarHovered(true);
+    }, []);
+    const handleBarLeave = useCallback(() => {
+        setIsBarHovered(false);
+    }, []);
+    return (<div key={index} className="relative group" onMouseEnter={handleBarHover} onMouseLeave={handleBarLeave}>
+      <div className="absolute h-[10px] transition-all duration-300 ease-out group-hover:scale-101 group-hover:border group-hover:border-grey transform origin-left cursor-pointer" role="button" onClick={() => setSelectedRow(bidder?.data)} style={{
+            width: animate ? `${fullWidth.toFixed(0)}px` : `0px`,
+            backgroundColor: BAR_COLORS[bidderType],
+            top: `${(index + 1) * 40}px`,
+            left: `${bidder.startTime ? (bidder.startTime * zoom).toFixed(0) : 0}px`,
+        }}>
+        {/*Metadata*/}
+        <div className={classNames('absolute left-0 bottom-[-20px] w-full flex justify-between px-1 min-w-[180px]', {
+            hidden: (zoom < 1 || Number(fullWidth.toFixed(0)) < 200) &&
+                !isBarHovered,
+            block: (zoom < 1 || Number(fullWidth.toFixed(0)) < 200) &&
+                isBarHovered,
+        })}>
+          <span className="pr-2 text-xs dark:text-bright-gray flex text-nowrap">
+            {String(bidder.name)}
+            <span className="text-granite-gray dark:text-bright-gray ml-1">
+              {bidder.type === BidderType.NO_BID && ' (no bid)'}
+              {bidder.type === BidderType.BID && ' (received bid)'}
+              {bidder.type === BidderType.TIMED_OUT && ' (timed out)'}
+            </span>
+            {bidder.type === BidderType.WON && (<span className="flex text-granite-gray dark:text-bright-gray ">
+                <span>(won)</span>
+                <span>
+                  <HammerIcon height="18"/>
+                </span>
+              </span>)}
+          </span>
+          <span className="text-xs dark:text-bright-gray">
+            {formatDuration(bidder.duration)}ms
+          </span>
+        </div>
+      </div>
+    </div>);
+};
+export default Bar;
+//# sourceMappingURL=bar.jsx.map

package/dist/components/timeline/bar.jsx.map

@@ -0,0 +1 @@
+{"version":3,"file":"bar.jsx","sourceRoot":"","sources":["../../../src/components/timeline/bar.tsx"],"names":[],"mappings":"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"}

package/dist/components/timeline/constants.js

@@ -0,0 +1,29 @@
+/*
+ * Copyright 2025 Google LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     https://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+/**
+ * External dependencies
+ */
+import { BidderType } from '@google-psat/common';
+export const INITIAL_TIME = 50;
+export const TIME_DURATION = 50;
+export const BAR_HEIGHT = 50;
+export const BAR_COLORS = {
+    [BidderType.BID]: '#7CACF8',
+    [BidderType.NO_BID]: '#EC7159',
+    [BidderType.WON]: '#5CC971',
+    [BidderType.TIMED_OUT]: '#FC2D04',
+};
+//# sourceMappingURL=constants.js.map

package/dist/components/timeline/constants.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"constants.js","sourceRoot":"","sources":["../../../src/components/timeline/constants.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;GAcG;AACH;;GAEG;AACH,OAAO,EAAE,UAAU,EAAE,MAAM,qBAAqB,CAAC;AAEjD,MAAM,CAAC,MAAM,YAAY,GAAG,EAAE,CAAC;AAC/B,MAAM,CAAC,MAAM,aAAa,GAAG,EAAE,CAAC;AAChC,MAAM,CAAC,MAAM,UAAU,GAAG,EAAE,CAAC;AAE7B,MAAM,CAAC,MAAM,UAAU,GAA+B;IACpD,CAAC,UAAU,CAAC,GAAG,CAAC,EAAE,SAAS;IAC3B,CAAC,UAAU,CAAC,MAAM,CAAC,EAAE,SAAS;IAC9B,CAAC,UAAU,CAAC,GAAG,CAAC,EAAE,SAAS;IAC3B,CAAC,UAAU,CAAC,SAAS,CAAC,EAAE,SAAS;CAClC,CAAC"}

package/dist/components/timeline/index.jsx

@@ -0,0 +1,195 @@
+/*
+ * Copyright 2025 Google LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     https://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+/**
+ * External dependencies.
+ */
+import React, { useEffect, useRef, useState, useMemo } from 'react';
+import { findMaximumBidderDuration, formatDuration, BidderType, } from '@google-psat/common';
+import classNames from 'classnames';
+/**
+ * Internal dependencies.
+ */
+import { BAR_HEIGHT, INITIAL_TIME, TIME_DURATION } from './constants';
+import Bar from './bar';
+const Timeline = ({ auctionTimeout, auctionId, auctionStartTimeFormatted, auctionTime, auctionEndDuration, bidders, zoomLevel = 2, setSelectedRow, navigateToAuction, }) => {
+    const [animate, setAnimate] = useState(false);
+    const [scrollWidth, setScrollWidth] = useState(0);
+    const containerRef = useRef(null);
+    const [timeoutBlockWidth, setTimeoutBlockWidth] = useState(0);
+    const [auctionEndBlockWidth, setAuctionEndBlockWidth] = useState(0);
+    const [zoom, setZoom] = useState(2);
+    const lineCount = useMemo(() => {
+        const maxDuration = Math.max(findMaximumBidderDuration(bidders), auctionTimeout);
+        const extraLines = 4;
+        if (maxDuration === 0) {
+            return extraLines * 2; // If no bidders, just show the timeout line
+        }
+        return maxDuration / TIME_DURATION + extraLines;
+    }, [bidders, auctionTimeout]);
+    const lines = Array.from({ length: lineCount });
+    const [timeoutBlock, setTimeoutBlock] = useState(auctionTimeout * zoomLevel);
+    const [auctionEndBlock, setAuctionEndBlock] = useState(auctionEndDuration * zoomLevel);
+    useEffect(() => {
+        const _zoom = zoomLevel;
+        setZoom(_zoom);
+        let _timeoutBlockWidth = auctionTimeout * _zoom;
+        let _auctionEndBlockWidth = auctionEndDuration * _zoom;
+        for (let i = 0; i < lines.length; i++) {
+            const lineWidth = TIME_DURATION * _zoom * (i + 1);
+            if (Math.abs(lineWidth - _timeoutBlockWidth) < 10 * _zoom) {
+                _timeoutBlockWidth += Math.abs(lineWidth - _timeoutBlockWidth);
+            }
+            if (Math.abs(lineWidth - _auctionEndBlockWidth) < 10 * _zoom) {
+                _auctionEndBlockWidth += Math.abs(lineWidth - _auctionEndBlockWidth);
+            }
+        }
+        const isAuctionEndBlockOverlappingTimeout = Math.abs(_auctionEndBlockWidth - _timeoutBlockWidth) <= 20;
+        if (isAuctionEndBlockOverlappingTimeout) {
+            if (_auctionEndBlockWidth > _timeoutBlockWidth) {
+                _auctionEndBlockWidth +=
+                    20 - Math.abs(_auctionEndBlockWidth - _timeoutBlockWidth);
+            }
+            else {
+                _timeoutBlockWidth +=
+                    20 - Math.abs(_auctionEndBlockWidth - _timeoutBlockWidth);
+            }
+        }
+        setTimeoutBlockWidth(scrollWidth - _timeoutBlockWidth);
+        setTimeoutBlock(_timeoutBlockWidth);
+        setAuctionEndBlockWidth(scrollWidth - _auctionEndBlockWidth);
+        setAuctionEndBlock(_auctionEndBlockWidth);
+    }, [
+        scrollWidth,
+        zoomLevel,
+        lines.length,
+        auctionTimeout,
+        auctionEndDuration,
+    ]);
+    useEffect(() => {
+        const timeout = setTimeout(() => {
+            setAnimate(true);
+        }, 100);
+        return () => clearTimeout(timeout);
+    }, []);
+    useEffect(() => {
+        if (containerRef.current) {
+            setScrollWidth(containerRef.current.scrollWidth);
+        }
+    }, [containerRef, bidders, auctionTimeout]);
+    const childHeight = Math.max((bidders?.length ?? 0) * BAR_HEIGHT, 200) + (zoom <= 1 ? 32 : 0);
+    return (<div className="mb-4">
+      <header className="flex justify-between text-sm dark:text-bright-gray font-semibold">
+        <p>Auction Start: {auctionStartTimeFormatted}</p>
+        <p>Auction Time: {auctionTime}ms</p>
+      </header>
+      <div ref={containerRef} className="min-h-[200px] border-pale-cornflower-blue border-1 mt-2 relative overflow-auto" style={{ height: bidders ? bidders.length * BAR_HEIGHT : '200px' }}>
+        {/*Vertical Columns*/}
+        <div className="flex" style={{
+            height: childHeight,
+        }}>
+          {lines.map((_, index) => {
+            const spanClasses = classNames('absolute right-0 block text-xs dark:text-bright-gray mt-1', {
+                'pr-2': zoom > 1,
+                'rotate-180': zoom <= 1,
+            });
+            return (<div className="border-pale-cornflower-blue border-r-1 h-full shrink-[0] grow-[0] relative transition-all duration-300 ease-out" style={{ flexBasis: `${TIME_DURATION * zoom}px` }} key={index}>
+                {Array.from({ length: TIME_DURATION / 10 - 1 }).map((__, subIndex) => {
+                    const lineClasses = classNames('absolute w-[1px] border-r border-dotted h-full transition-all duration-300 ease-out', 'border-sky-100 dark:border-gray-800');
+                    return (<div key={subIndex} className={lineClasses} style={{
+                            left: `${(subIndex + 1) * (zoom * 10)}px`,
+                            top: '0',
+                        }}></div>);
+                })}
+                <span className={spanClasses} style={{
+                    writingMode: zoom <= 1 ? 'vertical-rl' : undefined,
+                }}>
+                  {INITIAL_TIME + index * TIME_DURATION}ms
+                </span>
+              </div>);
+        })}
+        </div>
+
+        {/*Timeout block*/}
+        <div className="absolute flex top-0" style={{
+            height: childHeight,
+            width: lines.length * TIME_DURATION * zoom,
+        }}>
+          <div style={{
+            width: `${(auctionTimeout * zoom).toFixed(0)}px`,
+        }}></div>
+          <div className="h-full relative flex-1" style={{ width: `${timeoutBlockWidth}px` }}>
+            <div className="bg-[#E90303] opacity-[9%] w-full h-full"></div>
+            <span className="absolute top-1/2 -translate-y-1/2 rotate-180 text-xs text-[#828282] dark:text-gray h-full flex items-center justify-center" style={{
+            writingMode: 'vertical-rl',
+            left: `${Math.abs(timeoutBlock - auctionTimeout * zoom)}px`,
+        }}>
+              Timeout: {auctionTimeout}ms
+            </span>
+          </div>
+        </div>
+
+        {/*Auction-End block*/}
+        <div className="absolute flex top-0" style={{
+            height: childHeight,
+            width: lines.length * TIME_DURATION * zoom,
+        }}>
+          <div style={{ width: `${(auctionEndDuration * zoom).toFixed(0)}px` }} className="h-full"></div>
+          <div className="h-full relative flex-1" style={{ width: `${auctionEndBlockWidth}px` }}>
+            <div className="bg-[#E90303] opacity-[4%] w-full h-full"></div>
+            <span className="absolute top-1/2 -translate-y-1/2 rotate-180 text-xs text-[#828282] dark:text-gray h-full flex items-center justify-center" style={{
+            writingMode: 'vertical-rl',
+            left: `${Math.abs(auctionEndBlock - auctionEndDuration * zoom)}px`,
+        }}>
+              Auction End: {formatDuration(String(auctionEndDuration))}ms
+            </span>
+          </div>
+        </div>
+
+        {/*Bars Block*/}
+        <div className={classNames('absolute left-0 w-full h-full', {
+            'top-8': zoom <= 1,
+            'top-0': zoom > 1,
+        })}>
+          <div className="relative">
+            {bidders &&
+            bidders.map((bidder, index) => {
+                const fullWidth = parseFloat(bidder.duration) * zoom;
+                const bidderType = bidder.type === BidderType.NO_BID &&
+                    Number(bidder.duration) > auctionTimeout
+                    ? BidderType.TIMED_OUT
+                    : bidder.type;
+                return (<React.Fragment key={index}>
+                    <Bar bidder={bidder} index={index} zoom={zoom} bidderType={bidderType} fullWidth={fullWidth} animate={animate} setSelectedRow={setSelectedRow}/>
+                  </React.Fragment>);
+            })}
+          </div>
+        </div>
+      </div>
+      <footer>
+        <p className="text-sm text-right my-1 dark:text-bright-gray">
+          Auction ID:{' '}
+          <a onClick={(event) => {
+            event.preventDefault();
+            navigateToAuction(auctionId);
+        }} className="underline" href="#">
+            {auctionId}
+          </a>
+        </p>
+      </footer>
+    </div>);
+};
+export default Timeline;
+//# sourceMappingURL=index.jsx.map