#168 add option to choose first rendered page

README.md

@@ -63,6 +63,11 @@ Relative width of the info column on the left (in percent)
 `HTMLSelectElement` default: `undefined`
 DOM `<select>` element to use to select a run if the HAR contains multiple runs.
 
+### `selectedPage`
+`number` default: `0`
+Zero-based index of the page to initially render.<br/>
+If `selectedPage` is larger than the number of pages the last page will be selected.
+
 ### `legendHolder`
 `HTMLElement` (DOM element) default: `undefined` (not shown)
 If set a legend explaining the waterfall colours is rendered in the `legendHolder` DOM element.

src/ts/helpers/parse.ts

@@ -1,3 +1,4 @@
+import { ChartOptions } from "../typing/options";
 import { roundNumber } from "./misc";
 
 /**
@@ -143,9 +144,33 @@ export function escapeHtml(unsafe: string | number | boolean = ""): string {
 
 /** Ensures `input` is casted to `number` */
 export function toInt(input: string | number): number {
-  if (typeof input === "string") {
+  if (typeof input === "number") {
+    return input;
+  } else if (typeof input === "string") {
     return parseInt(input, 10);
   } else {
-    return input;
+    return undefined;
   }
 }
+
+/** Validates the `ChartOptions` attributes types */
+export function validateOptions(options: ChartOptions): ChartOptions {
+  let validateInt = (name: keyof ChartOptions) => {
+    options[name] = toInt(options[name] as any);
+    if (options[name] === undefined) {
+      throw TypeError(`option "${name}" needs to be a number`);
+    }
+  };
+  let ensureBoolean = (name: keyof ChartOptions) => {
+    options[name] = !!options[name];
+  };
+
+  validateInt("leftColumnWith");
+  validateInt("rowHeight");
+  validateInt("selectedPage");
+  ensureBoolean("showAlignmentHelpers");
+  ensureBoolean("showIndicatorIcons");
+  ensureBoolean("showMimeTypeIcon");
+
+  return options;
+}

src/ts/main.ts

@@ -1,3 +1,4 @@
+import { validateOptions } from "./helpers/parse";
 import { makeLegend } from "./legend/legend";
 import Paging from "./paging/paging";
 import * as HarTransformer from "./transformers/har";
@@ -12,16 +13,17 @@ const defaultOptions: Readonly<ChartOptions> = {
   legendHolder: undefined,
   pageSelector: undefined,
   rowHeight: 23,
+  selectedPage: 0,
   showAlignmentHelpers: true,
   showIndicatorIcons: true,
   showMimeTypeIcon: true,
 };
 
 function PerfCascade(waterfallDocsData: WaterfallDocs, chartOptions: Partial<ChartOptions> = {}): SVGSVGElement {
-  const options: ChartOptions = {...defaultOptions, ...chartOptions};
+  const options: ChartOptions = validateOptions({...defaultOptions, ...chartOptions});
 
   // setup paging helper
-  let paging = new Paging(waterfallDocsData);
+  let paging = new Paging(waterfallDocsData, options.selectedPage);
 
   let doc = createWaterfallSvg(paging.getSelectedPage(), options);
 

src/ts/paging/paging.ts

@@ -1,14 +1,16 @@
 import { removeChildren } from "../helpers/dom";
-import {OnPagingCb} from "../typing/paging";
-import {WaterfallData, WaterfallDocs} from "../typing/waterfall";
+import { OnPagingCb } from "../typing/paging";
+import { WaterfallData, WaterfallDocs } from "../typing/waterfall";
 
 /** Class to keep track of run of a multi-run har is beeing shown  */
 export default class Paging {
-  private selectedPageIndex = 0;
   private onPageUpdateCbs: OnPagingCb[] = [];
 
-  constructor(private doc: WaterfallDocs) {
-
+  constructor(private doc: WaterfallDocs, private selectedPageIndex = 0) {
+    if (selectedPageIndex >= this.doc.pages.length) {
+      // fall back to last item if doc has too few pages.
+      this.selectedPageIndex = this.doc.pages.length - 1;
+    }
   }
 
   /**
@@ -44,7 +46,7 @@ export default class Paging {
     if (this.selectedPageIndex === pageIndex) {
       return;
     }
-    if (pageIndex < 0 || pageIndex >=  this.getPageCount()) {
+    if (pageIndex < 0 || pageIndex >= this.getPageCount()) {
       throw new Error("Page does not exist - Invalid pageIndex selected");
     }
 
@@ -80,7 +82,7 @@ export default class Paging {
     // remove all existing options, like placeholders
     removeChildren(selectbox);
     this.doc.pages.forEach((p, i) => {
-      let option = new Option(p.title, i.toString(), i === this.selectedPageIndex);
+      let option = new Option(p.title, i.toString(), false, i === this.selectedPageIndex);
       selectbox.add(option);
     });
 

src/ts/typing/options.ts

@@ -1,16 +1,18 @@
 export interface ChartOptions {
   /** Height of every request bar block plus spacer pixel (in px) */
   rowHeight: number;
-  /** show vertical lines to easier spot potential dependencies/blocking between requests */
+  /** Show vertical lines to easier spot potential dependencies/blocking between requests */
   showAlignmentHelpers: boolean;
-  /** show mime type icon on the left */
+  /** Show mime type icon on the left */
   showMimeTypeIcon: boolean;
-  /** show warning icons for potential issues on the left */
+  /** Show warning icons for potential issues on the left */
   showIndicatorIcons: boolean;
-  /** relative width of the info column on the left (in percent) */
+  /** Relative width of the info column on the left (in percent) */
   leftColumnWith: number;
-  /** select element to use for paging  */
+  /** Select element to use for paging (if not set no Selector is rendered)   */
   pageSelector: HTMLSelectElement;
-  /** element that holds the Legend (if not set no Legend is shown) */
+  /** Zero-based index of the pre-selected page */
+  selectedPage: number;
+  /** Element that holds the Legend (if not set no Legend is sendered) */
   legendHolder: HTMLElement;
 }