feat(core): replace uuid dependency with crypto.randomUUID() (#976)

Co-authored-by: etowahadams <etowahadams@gmail.com>

editor/Editor.tsx

@@ -27,7 +27,7 @@ import EditorPanel, { type EditorLangauge } from './EditorPanel';
 import EditorExamples from './EditorExamples';
 
 import './Editor.css';
-import { v4 } from 'uuid';
+import { uuid } from '../src/core/utils/uuid';
 
 function json2js(jsonCode: string) {
     return `var spec = ${jsonCode} \nexport { spec }; \n`;
@@ -723,7 +723,7 @@ function Editor(props: RouteComponentProps) {
                         }
                         return (
                             <div
-                                key={v4()}
+                                key={uuid()}
                                 style={{
                                     position: 'absolute',
                                     border: '1px solid black',

package.json

@@ -77,8 +77,7 @@
         "quick-lru": "^6.1.1",
         "rbush": "^3.0.1",
         "stream-browserify": "^3.0.0",
-        "threads": "^1.6.4",
-        "uuid": "^8.3.2"
+        "threads": "^1.6.4"
     },
     "devDependencies": {
         "@types/bezier-js": "^4.1.0",
@@ -94,7 +93,6 @@
         "@types/react-dom": "^18.2.0",
         "@types/react-resize-detector": "^4.2.0",
         "@types/react-router-dom": "^5.1.6",
-        "@types/uuid": "^8.3.1",
         "@typescript-eslint/eslint-plugin": "^5.56.0",
         "@typescript-eslint/parser": "^5.56.0",
         "@vitejs/plugin-react": "^4.1.0",

src/compiler/gosling-to-higlass.ts

@@ -1,4 +1,3 @@
-import * as uuid from 'uuid';
 import type { Track as HiGlassTrack } from '@gosling-lang/higlass-schema';
 import { HiGlassModel, HIGLASS_AXIS_SIZE } from './higlass-model';
 import { parseServerAndTilesetUidFromUrl } from '../core/utils';
@@ -20,7 +19,8 @@ import { DEWFAULT_TITLE_PADDING_ON_TOP_AND_BOTTOM } from './defaults';
 import type { CompleteThemeDeep } from '../core/utils/theme';
 import { DEFAULT_TEXT_STYLE } from '../core/utils/text-style';
 import type { GoslingToHiGlassIdMapper } from '../api/track-and-view-ids';
-import type { UrlToFetchOptions } from 'src/core/gosling-component';
+import type { UrlToFetchOptions } from '../core/gosling-component';
+import { uuid } from '../core/utils/uuid';
 
 /**
  * Convert a gosling track into a HiGlass view and add it into a higlass model.
@@ -47,7 +47,7 @@ export function goslingToHiGlass(
     const firstResolvedSpec = resolvedSpecs[0];
 
     // If missing, create a unique track ID that will be used as HiGlass view ID for caching
-    const trackId = firstResolvedSpec.id ?? uuid.v4();
+    const trackId = firstResolvedSpec.id ?? uuid();
     if (!firstResolvedSpec.id) {
         firstResolvedSpec.id = trackId;
     }

src/compiler/higlass-model.test.ts

@@ -1,7 +1,7 @@
-import * as uuid from 'uuid';
 import { HiGlassModel } from './higlass-model';
 import { computeChromSizes } from '../core/utils/assembly';
 import { getTheme } from '../core/utils/theme';
+import { uuid } from '../core/utils/uuid';
 
 describe('Should produce higlass model correctly', () => {
     it('Should set default values correctly', () => {
@@ -11,7 +11,7 @@ describe('Should produce higlass model correctly', () => {
 
     it('Should set domain correctly', () => {
         const higlass = new HiGlassModel();
-        higlass.addDefaultView(uuid.v1());
+        higlass.addDefaultView(uuid());
         higlass.setDomain({ chromosome: 'chr2' }, { chromosome: 'chr2', interval: [100, 200] });
         expect(higlass.spec().views?.[0].initialXDomain).toEqual([
             computeChromSizes().interval['chr2'][0] + 1,
@@ -23,7 +23,7 @@ describe('Should produce higlass model correctly', () => {
 
     it('Should add brush correctly', () => {
         const higlass = new HiGlassModel();
-        higlass.addDefaultView(uuid.v1());
+        higlass.addDefaultView(uuid());
         higlass.addBrush('linear', higlass.getLastView().uid ?? '', getTheme(), 'from');
         expect(JSON.stringify(higlass.spec())).toContain('viewport-projection-horizontal');
     });

src/compiler/higlass-model.ts

@@ -1,4 +1,3 @@
-import * as uuid from 'uuid';
 import type { HiGlassSpec, Track } from '@gosling-lang/higlass-schema';
 import { HiGlassSchema } from '@gosling-lang/higlass-schema';
 import type { Assembly, AxisPosition, Domain, DummyTrack, Orientation, ZoomLimits } from '@gosling-lang/gosling-schema';
@@ -9,6 +8,7 @@ import { getAutoCompleteId, computeChromSizes } from '../core/utils/assembly';
 import type { CompleteThemeDeep } from '../core/utils/theme';
 import exampleHg from '../core/example/hg-view-config-1';
 import { insertItemToArray } from '../core/utils/array';
+import { uuid } from '../core/utils/uuid';
 
 export const HIGLASS_AXIS_SIZE = 30;
 
@@ -163,7 +163,7 @@ export class HiGlassModel {
         (this.getView(viewId) as any)?.tracks.whole.push({
             // type: 'viewport-projection-center',
             type: layout === 'circular' ? 'brush-track' : 'viewport-projection-horizontal',
-            uid: uuid.v4(),
+            uid: uuid(),
             fromViewUid,
             options: {
                 projectionFillColor: style?.color ?? theme.brush.color,
@@ -288,7 +288,7 @@ export class HiGlassModel {
         this.getLastView().tracks[this.getMainTrackPosition()] = [
             {
                 type: 'combined',
-                uid: `${track.uid ?? uuid.v4()}-${this.getMainTrackPosition()}-combined`,
+                uid: `${track.uid ?? uuid()}-${this.getMainTrackPosition()}-combined`,
                 // !! Hacky, but it is important to subtract 1px. Currently, HiGlass does not well handle a case where a center track is zero width (e.g., linking between views that contain zero-width center tracks).
                 // https://github.com/higlass/higlass/pull/1041
                 width: (track as any).width - 1,
@@ -324,7 +324,7 @@ export class HiGlassModel {
 
         const widthOrHeight = position === 'left' || position === 'right' ? 'width' : 'height';
         const axisTrackTemplate: Track = {
-            // uid: options.id ?? uuid.v1(), // TODO: turning this on makes some tick labels hidden
+            // uid: options.id ?? uuid(), // TODO: turning this on makes some tick labels hidden
             type: 'axis-track',
             chromInfoPath: this.hg.chromInfoPath,
             options: {

src/compiler/spec-preprocess.ts

@@ -1,4 +1,3 @@
-import * as uuid from 'uuid';
 import type {
     SingleTrack,
     GoslingSpec,
@@ -31,6 +30,7 @@ import {
 } from './defaults';
 import { spreadTracksByData } from '../core/utils/overlay';
 import { getStyleOverridden } from '../core/utils/style';
+import { uuid } from '../core/utils/uuid';
 
 /**
  * Traverse individual tracks and call the callback function to read and/or update the track definition.
@@ -176,7 +176,7 @@ export function traverseToFixSpecDownstream(spec: GoslingSpec | SingleView, pare
 
     // ID should be assigned to each view and track for an API usage
     if (!spec.id) {
-        spec.id = uuid.v4();
+        spec.id = uuid();
     }
 
     if ('tracks' in spec) {
@@ -188,11 +188,11 @@ export function traverseToFixSpecDownstream(spec: GoslingSpec | SingleView, pare
          */
         tracks = spreadTracksByData(tracks);
 
-        const linkID = uuid.v4();
+        const linkID = uuid();
         tracks.forEach((track, i, array) => {
             // ID should be assigned to each view and track for an API usage
             if (!track.id) {
-                track.id = uuid.v4();
+                track.id = uuid();
             }
 
             // If size not defined, set default ones
@@ -215,7 +215,7 @@ export function traverseToFixSpecDownstream(spec: GoslingSpec | SingleView, pare
                     track.xe.field
                     // Question: Should we consider mark types? (e.g., link might not be supported?)
                 ) {
-                    const newField = uuid.v4();
+                    const newField = uuid();
                     const startField = track.x.field;
                     const endField = track.xe.field;
                     const padding = track.displacement.padding;

src/core/gosling-component.tsx

@@ -10,10 +10,10 @@ import { createApi, type GoslingApi } from '../api/api';
 import { GoslingTemplates } from '..';
 import { omitDeep } from './utils/omit-deep';
 import { isEqual } from 'lodash-es';
-import * as uuid from 'uuid';
 import { publish } from '../api/pubsub';
 import type { IdTable } from '../api/track-and-view-ids';
 import { preverseZoomStatus } from './utils/higlass-zoom-config';
+import { uuid } from '../core/utils/uuid';
 
 // Before rerendering, wait for a few time so that HiGlass container is resized already.
 // If HiGlass is rendered and then the container resizes, the viewport position changes, unmatching `xDomain` specified by users.
@@ -59,7 +59,7 @@ export const GoslingComponent = forwardRef<GoslingRef, GoslingCompProps>((props,
     const hgRef = useRef<HiGlassApi>(null);
 
     const theme = getTheme(props.theme || 'light');
-    const wrapperDivId = props.id ?? uuid.v4();
+    const wrapperDivId = props.id ?? uuid();
 
     /**
      * Publishes event if there is a new view added

src/core/higlass-component-wrapper.tsx

@@ -1,12 +1,12 @@
 /* eslint-disable react/prop-types */
 import type * as PIXI from 'pixi.js';
 import React, { useEffect, useState, forwardRef, useMemo } from 'react';
-import * as uuid from 'uuid';
 
 import * as gosling from '..';
 // @ts-ignore
 import { HiGlassComponent } from 'higlass';
 import type { HiGlassSpec } from '@gosling-lang/higlass-schema';
+import { uuid } from '../core/utils/uuid';
 
 /**
  * Register plugin tracks and data fetchers to HiGlass. This is necessary for the first time before using Gosling.
@@ -39,9 +39,9 @@ export interface HiGlassComponentWrapperProps {
 export const HiGlassComponentWrapper = forwardRef<HiGlassApi | undefined, HiGlassComponentWrapperProps>(
     (props, ref) => {
         // div `id` and `className` for detailed customization
-        const [wrapperDivId, setWrapperDivId] = useState(props.id ?? uuid.v4());
+        const [wrapperDivId, setWrapperDivId] = useState(props.id ?? uuid());
         useEffect(() => {
-            setWrapperDivId(props.id ?? uuid.v4());
+            setWrapperDivId(props.id ?? uuid());
         }, [props.id]);
 
         const viewConfig = props.viewConfig || {};

src/core/utils/uuid.ts

@@ -0,0 +1,8 @@
+// for envs where crypto.randomUUID is not available (i.e., Node).
+function fallback(): string {
+    return Math.random().toString(36).substring(2, 10);
+}
+
+export function uuid(): string {
+    return globalThis.crypto.randomUUID?.() ?? fallback();
+}

src/tracks/gosling-brush/brush-track.ts

@@ -1,7 +1,7 @@
 import { arc as d3arc } from 'd3-shape';
 import type { SubjectPosition, D3DragEvent } from 'd3-drag';
-import * as uuid from 'uuid';
 import { RADIAN_GAP, valueToRadian } from '../../core/utils/polar';
+import { uuid } from '../../core/utils/uuid';
 
 type CircularBrushData = {
     type: 'brush' | 'start' | 'end';
@@ -25,7 +25,7 @@ function BrushTrack(HGC: any, ...args: any[]): any {
             const [context, options] = params;
             const { registerViewportChanged, removeViewportChanged, setDomainsCallback } = context;
 
-            this.uid = uuid.v1();
+            this.uid = uuid();
             this.options = options;
 
             // Is there actually a linked from view? Or is this projection "independent"?

src/tracks/gosling-track/gosling-mouse-event/mouse-event-model.ts

@@ -6,7 +6,7 @@ import {
     isPointNearPoint,
     isCircleWithinRange
 } from './polygon';
-import * as uuid from 'uuid';
+import { uuid } from '../../../core/utils/uuid';
 
 export type MouseEventData = PointEventData | LineEventData | PolygonEventData;
 
@@ -52,21 +52,21 @@ export class MouseEventModel {
      * Add a new mouse event that is polygon-based.
      */
     public addPolygonBasedEvent(value: Datum, polygon: number[]) {
-        this.data.push({ uid: uuid.v4(), type: 'polygon', value, polygon });
+        this.data.push({ uid: uuid(), type: 'polygon', value, polygon });
     }
 
     /**
      * Add a new mouse event that is point-based.
      */
     public addPointBasedEvent(value: Datum, pointAndRadius: [number, number, number]) {
-        this.data.push({ uid: uuid.v4(), type: 'point', value, polygon: pointAndRadius });
+        this.data.push({ uid: uuid(), type: 'point', value, polygon: pointAndRadius });
     }
 
     /**
      * Add a new mouse event that is line-based.
      */
     public addLineBasedEvent(value: Datum, path: number[]) {
-        this.data.push({ uid: uuid.v4(), type: 'line', value, polygon: path });
+        this.data.push({ uid: uuid(), type: 'line', value, polygon: path });
     }
 
     /**

src/tracks/gosling-track/gosling-track-model.ts

@@ -1,4 +1,3 @@
-import * as uuid from 'uuid';
 import type {
     ChannelDeep,
     PredefinedColors,
@@ -42,6 +41,7 @@ import {
 } from '@gosling-lang/gosling-schema';
 import { CHANNEL_DEFAULTS } from '../../core/channel';
 import { type CompleteThemeDeep, getTheme } from '../../core/utils/theme';
+import { uuid } from '../../core/utils/uuid';
 import { MouseEventModel } from '../gosling-track/gosling-mouse-event';
 
 export type ScaleType =
@@ -73,7 +73,7 @@ export class GoslingTrackModel {
     private mouseEventModel: MouseEventModel;
 
     constructor(spec: SingleTrack, data: { [k: string]: number | string }[], theme: Required<CompleteThemeDeep>) {
-        this.id = uuid.v1();
+        this.id = uuid();
 
         this.theme = theme ?? getTheme();
 

src/tracks/gosling-track/gosling-track.ts

@@ -1,5 +1,4 @@
 import type * as PIXI from 'pixi.js';
-import * as uuid from 'uuid';
 import { isEqual, sampleSize, uniqBy } from 'lodash-es';
 import type { ScaleLinear } from 'd3-scale';
 import type {
@@ -52,6 +51,7 @@ import {
 import { HIGLASS_AXIS_SIZE } from '../../compiler/higlass-model';
 import { flatArrayToPairArray } from '../../core/utils/array';
 import { createPluginTrack, type PluginTrackFactory, type TrackConfig } from '../../core/utils/define-plugin-track';
+import { uuid } from '../../core/utils/uuid';
 
 // Set `true` to print in what order each function is called
 export const PRINT_RENDERING_CYCLE = false;
@@ -188,12 +188,12 @@ const factory: PluginTrackFactory<Tile, GoslingTrackOptions> = (HGC, context, op
             this.#assembly = this.options.spec.assembly;
 
             // Add unique IDs to each of the overlaid tracks that will be rendered independently.
-            if ('_overlay' in this.options.spec) {
-                this.options.spec._overlay = (this.options.spec as OverlaidTrack)._overlay.map(o => {
-                    return { ...o, _renderingId: uuid.v1() };
+            if ('overlay' in this.options.spec) {
+                this.options.spec.overlay = (this.options.spec as OverlaidTrack)._overlay.map(o => {
+                    return { ...o, _renderingId: uuid() };
                 });
             } else {
-                this.options.spec._renderingId = uuid.v1();
+                this.options.spec._renderingId = uuid();
             }
 
             this.fetchedTiles = {};

vite.config.js

@@ -74,11 +74,10 @@ const alias = {
     '@gosling-lang/dummy-track': path.resolve(__dirname, './src/tracks/dummy-track/index.ts'),
     '@data-fetchers': path.resolve(__dirname, './src/data-fetchers/index.ts'),
     zlib: path.resolve(__dirname, './src/alias/zlib.ts'),
-    uuid: path.resolve(__dirname, './node_modules/uuid/dist/esm-browser/index.js'),
     stream: path.resolve(__dirname, './node_modules/stream-browserify') //  gmod/gff uses stream-browserify
 };
 
-const skipExt = new Set(['@gmod/bbi', 'uuid']);
+const skipExt = new Set(['@gmod/bbi']);
 const external = [...Object.keys(pkg.dependencies), ...Object.keys(pkg.peerDependencies)].filter(
     dep => !skipExt.has(dep)
 );

yarn.lock

@@ -1278,11 +1278,6 @@
   resolved "https://registry.yarnpkg.com/@types/unist/-/unist-2.0.6.tgz#250a7b16c3b91f672a24552ec64678eeb1d3a08d"
   integrity sha512-PBjIUxZHOuj0R15/xuwJYjFi+KZdNFrehocChv4g5hu6aFroHue8m0lBP0POdK2nKzbw0cgV1mws8+V/JAcEkQ==
 
-"@types/uuid@^8.3.1":
-  version "8.3.4"
-  resolved "https://registry.yarnpkg.com/@types/uuid/-/uuid-8.3.4.tgz#bd86a43617df0594787d38b735f55c805becf1bc"
-  integrity sha512-c/I8ZRb51j+pYGAu5CrFMRxqZ2ke4y2grEBO5AUjgSkSk+qT2Ea+OdWElz/OiMf5MNpn2b17kuVBwZLQJXzihw==
-
 "@typescript-eslint/eslint-plugin@^5.56.0":
   version "5.58.0"
   resolved "https://registry.yarnpkg.com/@typescript-eslint/eslint-plugin/-/eslint-plugin-5.58.0.tgz#b1d4b0ad20243269d020ef9bbb036a40b0849829"