Merge branch 'main' into code-viewer

Author: itssharmasandeep

projects/common/src/color/color-palette.test.ts

@@ -31,4 +31,30 @@ describe('Color palette', () => {
     expect(() => new ColorPalette(['black'])).toThrow();
     expect(() => new ColorPalette(['white', 'black'])).not.toThrow();
   });
+
+  test('should return color combinations correctly', () => {
+    const palette = new ColorPalette(['#fffbeb', '#140300']);
+    expect(palette.getColorCombinations(2)).toEqual([
+      {
+        background: 'rgb(255, 251, 235)',
+        foreground: '#080909'
+      },
+      {
+        background: 'rgb(20, 3, 0)',
+        foreground: '#FFFFFF'
+      }
+    ]);
+  });
+
+  test('should generate color for a string as expected from a limited set', () => {
+    const palette = new ColorPalette(['#fffbeb', '#140300', '#789ab7']);
+    expect(palette.getColorCombinationForId('test', 2)).toEqual({
+      background: 'rgb(255, 251, 235)',
+      foreground: '#080909'
+    });
+    expect(palette.getColorCombinationForId('test')).toEqual({
+      background: 'rgb(20, 3, 0)',
+      foreground: '#FFFFFF'
+    });
+  });
 });

projects/common/src/color/color-palette.ts

@@ -1,5 +1,7 @@
 import { rgb } from 'd3-color';
 import { interpolateRgbBasis, quantize } from 'd3-interpolate';
+import { hashCode } from '../utilities/math/math-utilities';
+import { Color, ColorCombination } from './color';
 
 export class ColorPalette {
   private readonly basisColors: string[];
@@ -10,6 +12,25 @@ export class ColorPalette {
     this.basisColors = basisColors.map(color => rgb(color).toString());
   }
 
+  public getColorCombinations(count: number): ColorCombination[] {
+    return this.forNColors(count).map(color => ({ background: color, foreground: this.getContrast(color) }));
+  }
+
+  public getColorCombinationForId(id: string, colorSetSize: number = this.basisColors.length): ColorCombination {
+    return this.getColorCombinations(colorSetSize)[Math.abs(hashCode(id)) % colorSetSize];
+  }
+
+  private getContrast(rgbColorString: string): string {
+    // Convert to RGB value
+    const rgbColor = rgb(rgbColorString);
+
+    // Get YIQ ratio
+    const yiq = (rgbColor.r * 299 + rgbColor.g * 587 + rgbColor.b * 114) / 1000;
+
+    // Check contrast
+    return yiq >= 128 ? Color.Gray9 : Color.White;
+  }
+
   public forNColors(count: number): string[] {
     if (count === this.basisColors.length) {
       // Use as is if palette size matches, don't interpolate

projects/common/src/color/color.ts

@@ -1,3 +1,5 @@
+import { hashCode } from '../utilities/math/math-utilities';
+
 export const enum Color {
   Blue1 = '#f0f6ff',
   Blue2 = '#b8d3ff',
@@ -60,3 +62,20 @@ export const enum Color {
   Transparent = 'transparent',
   OffWhite = '#f6f6f64d'
 }
+
+export interface ColorCombination {
+  background: string;
+  foreground: string;
+}
+
+export const getHexColorForString = (id: string): string => {
+  const hash = hashCode(id);
+  let rgb = '#';
+  for (let i = 0; i < 3; i++) {
+    // tslint:disable-next-line: no-bitwise
+    const value = (hash >> (i * 8)) & 0xff;
+    rgb += `00${value.toString(16)}`.substr(-2);
+  }
+
+  return rgb;
+};

projects/common/src/public-api.ts

@@ -124,3 +124,6 @@ export * from './time/page-time-range-preference.service';
 
 // Validators
 export * from './utilities/validators';
+
+// Color Palette
+export * from './color/color-palette';

projects/common/src/utilities/browser/storage/abstract-storage.test.ts

@@ -1,15 +1,12 @@
 import { runFakeRxjs } from '@hypertrace/test-utils';
 import { AbstractStorage } from './abstract-storage';
+import { DictionaryStorageImpl } from './dictionary-storage-impl';
 
 describe('Abstract storage', () => {
   let storage: AbstractStorage;
 
   beforeEach(() => {
-    storage = new (class extends AbstractStorage {})(localStorage);
-  });
-
-  afterEach(() => {
-    localStorage.clear();
+    storage = new (class extends AbstractStorage {})(new DictionaryStorageImpl());
   });
 
   test('should support basic crud operations', () => {
@@ -37,4 +34,60 @@ describe('Abstract storage', () => {
       expectObservable(storage.watch('bar')).toBe('u--b-----', { u: undefined, b: 'b' });
     });
   });
+
+  test('should support scoped storage with no fallback', () => {
+    const globalDictionary = new DictionaryStorageImpl({ foo: 'bad-foo' });
+
+    const scopedStorage = new (class extends AbstractStorage {})(globalDictionary, {
+      scopeKey: 'test-scope'
+    });
+
+    expect(scopedStorage.get('foo')).toBeUndefined();
+    expect(scopedStorage.contains('foo')).toBe(false);
+    scopedStorage.set('foo', 'bar');
+    expect(scopedStorage.get('foo')).toBe('bar');
+    expect(globalDictionary.toJsonString()).toBe('{"foo":"bad-foo","test-scope":"{\\"foo\\":\\"bar\\"}"}');
+    expect(scopedStorage.contains('foo')).toBe(true);
+    scopedStorage.set('foo', 'baz');
+    expect(globalDictionary.toJsonString()).toBe('{"foo":"bad-foo","test-scope":"{\\"foo\\":\\"baz\\"}"}');
+    scopedStorage.set('a', 'b');
+    scopedStorage.delete('foo');
+    expect(globalDictionary.toJsonString()).toBe('{"foo":"bad-foo","test-scope":"{\\"a\\":\\"b\\"}"}');
+  });
+
+  test('should support scoped storage with readonly fallback', () => {
+    const globalDictionary = new DictionaryStorageImpl({ foo: 'original-foo' });
+
+    const scopedStorage = new (class extends AbstractStorage {})(globalDictionary, {
+      scopeKey: 'test-scope',
+      fallbackPolicy: 'read-only'
+    });
+
+    expect(scopedStorage.get('foo')).toBe('original-foo');
+    expect(scopedStorage.contains('foo')).toBe(true);
+    scopedStorage.set('foo', 'bar');
+    expect(scopedStorage.get('foo')).toBe('bar');
+    expect(globalDictionary.toJsonString()).toBe('{"foo":"original-foo","test-scope":"{\\"foo\\":\\"bar\\"}"}');
+    scopedStorage.delete('foo');
+    expect(scopedStorage.contains('foo')).toBe(true);
+    expect(scopedStorage.get('foo')).toBe('original-foo');
+    expect(globalDictionary.toJsonString()).toBe('{"foo":"original-foo","test-scope":"{}"}');
+  });
+
+  test('should migrate on read if configured', () => {
+    const globalDictionary = new DictionaryStorageImpl({ foo: 'original-foo' });
+
+    const scopedStorage = new (class extends AbstractStorage {})(globalDictionary, {
+      scopeKey: 'test-scope',
+      fallbackPolicy: 'read-and-migrate'
+    });
+
+    expect(scopedStorage.get('foo')).toBe('original-foo');
+    expect(scopedStorage.contains('foo')).toBe(true);
+    expect(globalDictionary.toJsonString()).toBe('{"test-scope":"{\\"foo\\":\\"original-foo\\"}"}');
+
+    scopedStorage.delete('foo');
+    expect(scopedStorage.contains('foo')).toBe(false);
+    expect(globalDictionary.toJsonString()).toBe('{"test-scope":"{}"}');
+  });
 });

projects/common/src/utilities/browser/storage/abstract-storage.ts

@@ -1,17 +1,36 @@
 import { Observable, Subject } from 'rxjs';
 import { distinctUntilChanged, filter, map, startWith } from 'rxjs/operators';
+import { DictionaryStorageImpl } from './dictionary-storage-impl';
 
 // A small abstraction on browser's storage for mocking and cleaning up the API a bit
 export abstract class AbstractStorage {
   private readonly changeSubject: Subject<string> = new Subject();
-  public constructor(private readonly storage: Storage) {}
+  private readonly scopedStorage?: DictionaryStorageImpl;
+
+  public constructor(private readonly storage: Storage, private readonly scopeConfig?: ScopedStorageConfiguration) {
+    if (scopeConfig) {
+      this.scopedStorage = DictionaryStorageImpl.fromString(storage.getItem(scopeConfig.scopeKey) ?? '{}');
+    }
+  }
 
   public contains(key: string): boolean {
-    return this.storage.getItem(key) !== null;
+    return this.get(key) !== undefined;
   }
 
   public get<T extends string = string>(key: string): T | undefined {
-    const value = this.storage.getItem(key);
+    const value =
+      this.scopeConfig && !this.scopeConfig.fallbackPolicy
+        ? this.scopedStorage!.getItem(key) // Only read from scoped storage if in use AND no fallback policy
+        : this.scopedStorage?.getItem(key) ?? this.storage.getItem(key);
+
+    if (
+      this.scopeConfig?.fallbackPolicy === 'read-and-migrate' &&
+      value !== null &&
+      this.scopedStorage?.getItem(key) === null
+    ) {
+      this.set(key, value);
+      this.storage.removeItem(key);
+    }
 
     return value !== null ? (value as T) : undefined;
   }
@@ -26,12 +45,25 @@ export abstract class AbstractStorage {
   }
 
   public set(key: string, value: string): void {
-    this.storage.setItem(key, value);
+    (this.scopedStorage ?? this.storage).setItem(key, value);
+    this.flushAnyScopedStorage();
     this.changeSubject.next(key);
   }
 
   public delete(key: string): void {
-    this.storage.removeItem(key);
+    (this.scopedStorage ?? this.storage).removeItem(key);
+    this.flushAnyScopedStorage();
     this.changeSubject.next(key);
   }
+
+  private flushAnyScopedStorage(): void {
+    if (this.scopedStorage && this.scopeConfig?.scopeKey) {
+      this.storage.setItem(this.scopeConfig.scopeKey, this.scopedStorage?.toJsonString());
+    }
+  }
+}
+
+export interface ScopedStorageConfiguration {
+  scopeKey: string;
+  fallbackPolicy?: 'read-only' | 'read-and-migrate';
 }

projects/common/src/utilities/browser/storage/dictionary-storage-impl.test.ts

@@ -0,0 +1,49 @@
+import { DictionaryStorageImpl } from './dictionary-storage-impl';
+
+describe('Dictionary Storage impl', () => {
+  test('can read and write values', () => {
+    const storage = new DictionaryStorageImpl();
+
+    storage.setItem('foo', 'bar');
+    expect(storage.getItem('foo')).toBe('bar');
+    expect(storage.getItem('non-existent')).toBeNull();
+    storage.setItem('foo', 'bar-update');
+    expect(storage.getItem('foo')).toBe('bar-update');
+  });
+
+  test('can detect length', () => {
+    const storage = new DictionaryStorageImpl();
+    expect(storage.length).toBe(0);
+    storage.setItem('foo', 'bar');
+    expect(storage.length).toBe(1);
+
+    storage.setItem('a', 'b');
+    expect(storage.length).toBe(2);
+    storage.removeItem('a');
+    expect(storage.length).toBe(1);
+    storage.clear();
+    expect(storage.length).toBe(0);
+  });
+
+  test('can be initialized from a dictionary', () => {
+    const storage = new DictionaryStorageImpl({ foo: 'bar', a: 'b' });
+    storage.setItem('x', 'y');
+    expect(storage.length).toBe(3);
+
+    expect(storage.getItem('foo')).toBe('bar');
+    expect(storage.getItem('a')).toBe('b');
+    expect(storage.getItem('x')).toBe('y');
+  });
+
+  test('can serialize to and from JSON string', () => {
+    const storageFromDictionary = new DictionaryStorageImpl({ foo: 'bar', a: 'b' });
+    storageFromDictionary.setItem('c', 'd');
+    storageFromDictionary.removeItem('a');
+    expect(storageFromDictionary.toJsonString()).toBe('{"foo":"bar","c":"d"}');
+
+    const storageFromString = DictionaryStorageImpl.fromString('{"foo":"bar","a":"b"}');
+    expect(storageFromString.length).toBe(2);
+    expect(storageFromString.getItem('foo')).toBe('bar');
+    expect(storageFromString.getItem('a')).toBe('b');
+  });
+});

projects/common/src/utilities/browser/storage/dictionary-storage-impl.ts

@@ -0,0 +1,44 @@
+import { Dictionary } from '../../types/types';
+
+export class DictionaryStorageImpl implements Storage {
+  private readonly data: Dictionary<string>;
+
+  public static fromString(jsonString: string): DictionaryStorageImpl {
+    return new DictionaryStorageImpl(JSON.parse(jsonString));
+  }
+
+  public constructor(data: Dictionary<string> = {}) {
+    this.data = { ...data };
+  }
+
+  public get length(): number {
+    return Object.keys(this.data).length;
+  }
+
+  public clear(): void {
+    Object.keys(this.data).forEach(key => this.removeItem(key));
+  }
+
+  public getItem(key: string): string | null {
+    // tslint:disable-next-line: no-null-keyword
+    return this.data[key] ?? null;
+  }
+
+  public key(index: number): string | null {
+    // tslint:disable-next-line: no-null-keyword
+    return Object.keys(this.data)[index] ?? null;
+  }
+
+  public removeItem(key: string): void {
+    // tslint:disable-next-line:no-dynamic-delete
+    delete this.data[key];
+  }
+
+  public setItem(key: string, value: string): void {
+    this.data[key] = value;
+  }
+
+  public toJsonString(): string {
+    return JSON.stringify(this.data);
+  }
+}

projects/common/src/utilities/browser/storage/in-memory-storage.ts

@@ -1,39 +1,10 @@
 import { Injectable } from '@angular/core';
 import { AbstractStorage } from './abstract-storage';
+import { DictionaryStorageImpl } from './dictionary-storage-impl';
 
 @Injectable({ providedIn: 'root' })
 export class InMemoryStorage extends AbstractStorage {
   public constructor() {
-    super(
-      new (class {
-        private readonly data: Map<string, string> = new Map();
-
-        public get length(): number {
-          return this.data.size;
-        }
-
-        public clear(): void {
-          this.data.clear();
-        }
-
-        public getItem(key: string): string | null {
-          // tslint:disable-next-line: no-null-keyword
-          return this.data.get(key) ?? null;
-        }
-
-        public key(index: number): string | null {
-          // tslint:disable-next-line: no-null-keyword
-          return Array.from(this.data.keys())[index] ?? null;
-        }
-
-        public removeItem(key: string): void {
-          this.data.delete(key);
-        }
-
-        public setItem(key: string, value: string): void {
-          this.data.set(key, value);
-        }
-      })()
-    );
+    super(new DictionaryStorageImpl());
   }
 }

projects/common/src/utilities/math/math-utilities.ts

@@ -110,6 +110,11 @@ export const getPercentage = (numerator: number | undefined, denominator: number
   return (numerator / denominator) * 100;
 };
 
+// Trying to recreate Java hashcode
+export const hashCode = (str: string): number =>
+  // tslint:disable-next-line: no-bitwise
+  Array.from(str).reduce((s, c) => (Math.imul(31, s) + c.charCodeAt(0)) | 0, 0);
+
 export interface Point {
   x: number;
   y: number;