Prettier 2.0 (#393)

src/Explorer/Graph/GraphStyleComponent/GraphStyle.test.ts

@@ -1,51 +1,51 @@
-import * as ko from "knockout";
-import { GraphStyleComponent, GraphStyleParams } from "./GraphStyleComponent";
-import * as ViewModels from "../../../Contracts/ViewModels";
-
-function buildComponent(buttonOptions: any) {
-  document.body.innerHTML = GraphStyleComponent.template as any;
-  const vm = new GraphStyleComponent.viewModel(buttonOptions);
-  ko.applyBindings(vm);
-}
-
-describe("Graph Style Component", () => {
-  let buildParams = (config: ViewModels.GraphConfigUiData): GraphStyleParams => {
-    return {
-      config: config
-    };
-  };
-
-  afterEach(() => {
-    ko.cleanNode(document);
-  });
-
-  describe("Rendering", () => {
-    it("should display proper list of choices passed in component parameters", () => {
-      const PROP2 = "prop2";
-      const PROPC = "prop3";
-      const params = buildParams({
-        nodeCaptionChoice: ko.observable(null),
-        nodeIconChoice: ko.observable(null),
-        nodeColorKeyChoice: ko.observable(null),
-        nodeIconSet: ko.observable(null),
-        nodeProperties: ko.observableArray(["prop1", PROP2]),
-        nodePropertiesWithNone: ko.observableArray(["propa", "propb", PROPC]),
-        showNeighborType: ko.observable(null)
-      });
-
-      buildComponent(params);
-
-      var e: any = document.querySelector(".graphStyle #nodeCaptionChoices");
-      expect(e.options.length).toBe(2);
-      expect(e.options[1].value).toBe(PROP2);
-
-      e = document.querySelector(".graphStyle #nodeColorKeyChoices");
-      expect(e.options.length).toBe(3);
-      expect(e.options[2].value).toBe(PROPC);
-
-      e = document.querySelector(".graphStyle #nodeIconChoices");
-      expect(e.options.length).toBe(3);
-      expect(e.options[2].value).toBe(PROPC);
-    });
-  });
-});
+import * as ko from "knockout";
+import { GraphStyleComponent, GraphStyleParams } from "./GraphStyleComponent";
+import * as ViewModels from "../../../Contracts/ViewModels";
+
+function buildComponent(buttonOptions: any) {
+  document.body.innerHTML = GraphStyleComponent.template as any;
+  const vm = new GraphStyleComponent.viewModel(buttonOptions);
+  ko.applyBindings(vm);
+}
+
+describe("Graph Style Component", () => {
+  let buildParams = (config: ViewModels.GraphConfigUiData): GraphStyleParams => {
+    return {
+      config: config,
+    };
+  };
+
+  afterEach(() => {
+    ko.cleanNode(document);
+  });
+
+  describe("Rendering", () => {
+    it("should display proper list of choices passed in component parameters", () => {
+      const PROP2 = "prop2";
+      const PROPC = "prop3";
+      const params = buildParams({
+        nodeCaptionChoice: ko.observable(null),
+        nodeIconChoice: ko.observable(null),
+        nodeColorKeyChoice: ko.observable(null),
+        nodeIconSet: ko.observable(null),
+        nodeProperties: ko.observableArray(["prop1", PROP2]),
+        nodePropertiesWithNone: ko.observableArray(["propa", "propb", PROPC]),
+        showNeighborType: ko.observable(null),
+      });
+
+      buildComponent(params);
+
+      var e: any = document.querySelector(".graphStyle #nodeCaptionChoices");
+      expect(e.options.length).toBe(2);
+      expect(e.options[1].value).toBe(PROP2);
+
+      e = document.querySelector(".graphStyle #nodeColorKeyChoices");
+      expect(e.options.length).toBe(3);
+      expect(e.options[2].value).toBe(PROPC);
+
+      e = document.querySelector(".graphStyle #nodeIconChoices");
+      expect(e.options.length).toBe(3);
+      expect(e.options[2].value).toBe(PROPC);
+    });
+  });
+});

src/Explorer/Graph/GraphStyleComponent/GraphStyleComponent.ts

@@ -1,103 +1,103 @@
-import * as Constants from "../../../Common/Constants";
-import * as ViewModels from "../../../Contracts/ViewModels";
-import { WaitsForTemplateViewModel } from "../../WaitsForTemplateViewModel";
-
-/**
- * Parameters for this component
- */
-export interface GraphStyleParams {
-  config: ViewModels.GraphConfigUiData;
-  firstFieldHasFocus?: ko.Observable<boolean>;
-
-  /**
-   * Callback triggered when the template is bound to the component (for testing purposes)
-   */
-  onTemplateReady?: () => void;
-}
-
-class GraphStyleViewModel extends WaitsForTemplateViewModel {
-  private params: GraphStyleParams;
-
-  public constructor(params: GraphStyleParams) {
-    super();
-    super.onTemplateReady((isTemplateReady: boolean) => {
-      if (isTemplateReady && params.onTemplateReady) {
-        params.onTemplateReady();
-      }
-    });
-
-    this.params = params;
-  }
-
-  public onAllNeighborsKeyPress = (source: any, event: KeyboardEvent): boolean => {
-    if (event.keyCode === Constants.KeyCodes.Space || event.keyCode === Constants.KeyCodes.Enter) {
-      this.params.config.showNeighborType(ViewModels.NeighborType.BOTH);
-      event.stopPropagation();
-      return false;
-    }
-
-    return true;
-  };
-
-  public onSourcesKeyPress = (source: any, event: KeyboardEvent): boolean => {
-    if (event.keyCode === Constants.KeyCodes.Space || event.keyCode === Constants.KeyCodes.Enter) {
-      this.params.config.showNeighborType(ViewModels.NeighborType.SOURCES_ONLY);
-      event.stopPropagation();
-      return false;
-    }
-
-    return true;
-  };
-
-  public onTargetsKeyPress = (source: any, event: KeyboardEvent): boolean => {
-    if (event.keyCode === Constants.KeyCodes.Space || event.keyCode === Constants.KeyCodes.Enter) {
-      this.params.config.showNeighborType(ViewModels.NeighborType.TARGETS_ONLY);
-      event.stopPropagation();
-      return false;
-    }
-
-    return true;
-  };
-}
-
-const template = `
-<div id="graphStyle" class="graphStyle" data-bind="setTemplateReady: true, with:params.config">
-    <div class="seconddivpadding">
-        <p>Show vertex (node) as</p>
-        <select id="nodeCaptionChoices" class="formTree paneselect" required data-bind="options:nodeProperties,
-                                            value:nodeCaptionChoice, hasFocus: $parent.params.firstFieldHasFocus"></select>
-    </div>
-    <div class="seconddivpadding">
-        <p>Map this property to node color</p>
-        <select id="nodeColorKeyChoices" class="formTree paneselect" required data-bind="options:nodePropertiesWithNone,
-                                                                            value:nodeColorKeyChoice"></select>
-    </div>
-    <div class="seconddivpadding">
-        <p>Map this property to node icon</p>
-        <select id="nodeIconChoices" class="formTree paneselect" required data-bind="options:nodePropertiesWithNone,
-                                                                            value:nodeIconChoice"></select>
-        <input type="text" data-bind="value:nodeIconSet" placeholder="Icon set: blank for collection id" class="nodeIconSet" autocomplete="off" />
-    </div>
-
-    <p class="seconddivpadding">Show</p>
-
-    <div class="tabs">
-        <div class="tab">
-            <input type="radio" id="tab11" name="graphneighbortype" class="radio" data-bind="checkedValue:2, checked:showNeighborType" />
-            <label for="tab11" tabindex="0" data-bind="event: { keypress: $parent.onAllNeighborsKeyPress }">All neighbors</label>
-        </div>
-        <div class="tab">
-            <input type="radio" id="tab12" name="graphneighbortype" class="radio" data-bind="checkedValue:0, checked:showNeighborType" />
-            <label for="tab12" tabindex="0" data-bind="event: { keypress: $parent.onSourcesKeyPress }">Sources</label>
-        </div>
-        <div class="tab">
-            <input type="radio" id="tab13" name="graphneighbortype" class="radio" data-bind="checkedValue:1, checked:showNeighborType" />
-            <label for="tab13" tabindex="0" data-bind="event: { keypress: $parent.onTargetsKeyPress }">Targets</label>
-        </div>
-    </div>
-</div>`;
-
-export const GraphStyleComponent = {
-  viewModel: GraphStyleViewModel,
-  template
-};
+import * as Constants from "../../../Common/Constants";
+import * as ViewModels from "../../../Contracts/ViewModels";
+import { WaitsForTemplateViewModel } from "../../WaitsForTemplateViewModel";
+
+/**
+ * Parameters for this component
+ */
+export interface GraphStyleParams {
+  config: ViewModels.GraphConfigUiData;
+  firstFieldHasFocus?: ko.Observable<boolean>;
+
+  /**
+   * Callback triggered when the template is bound to the component (for testing purposes)
+   */
+  onTemplateReady?: () => void;
+}
+
+class GraphStyleViewModel extends WaitsForTemplateViewModel {
+  private params: GraphStyleParams;
+
+  public constructor(params: GraphStyleParams) {
+    super();
+    super.onTemplateReady((isTemplateReady: boolean) => {
+      if (isTemplateReady && params.onTemplateReady) {
+        params.onTemplateReady();
+      }
+    });
+
+    this.params = params;
+  }
+
+  public onAllNeighborsKeyPress = (source: any, event: KeyboardEvent): boolean => {
+    if (event.keyCode === Constants.KeyCodes.Space || event.keyCode === Constants.KeyCodes.Enter) {
+      this.params.config.showNeighborType(ViewModels.NeighborType.BOTH);
+      event.stopPropagation();
+      return false;
+    }
+
+    return true;
+  };
+
+  public onSourcesKeyPress = (source: any, event: KeyboardEvent): boolean => {
+    if (event.keyCode === Constants.KeyCodes.Space || event.keyCode === Constants.KeyCodes.Enter) {
+      this.params.config.showNeighborType(ViewModels.NeighborType.SOURCES_ONLY);
+      event.stopPropagation();
+      return false;
+    }
+
+    return true;
+  };
+
+  public onTargetsKeyPress = (source: any, event: KeyboardEvent): boolean => {
+    if (event.keyCode === Constants.KeyCodes.Space || event.keyCode === Constants.KeyCodes.Enter) {
+      this.params.config.showNeighborType(ViewModels.NeighborType.TARGETS_ONLY);
+      event.stopPropagation();
+      return false;
+    }
+
+    return true;
+  };
+}
+
+const template = `
+<div id="graphStyle" class="graphStyle" data-bind="setTemplateReady: true, with:params.config">
+    <div class="seconddivpadding">
+        <p>Show vertex (node) as</p>
+        <select id="nodeCaptionChoices" class="formTree paneselect" required data-bind="options:nodeProperties,
+                                            value:nodeCaptionChoice, hasFocus: $parent.params.firstFieldHasFocus"></select>
+    </div>
+    <div class="seconddivpadding">
+        <p>Map this property to node color</p>
+        <select id="nodeColorKeyChoices" class="formTree paneselect" required data-bind="options:nodePropertiesWithNone,
+                                                                            value:nodeColorKeyChoice"></select>
+    </div>
+    <div class="seconddivpadding">
+        <p>Map this property to node icon</p>
+        <select id="nodeIconChoices" class="formTree paneselect" required data-bind="options:nodePropertiesWithNone,
+                                                                            value:nodeIconChoice"></select>
+        <input type="text" data-bind="value:nodeIconSet" placeholder="Icon set: blank for collection id" class="nodeIconSet" autocomplete="off" />
+    </div>
+
+    <p class="seconddivpadding">Show</p>
+
+    <div class="tabs">
+        <div class="tab">
+            <input type="radio" id="tab11" name="graphneighbortype" class="radio" data-bind="checkedValue:2, checked:showNeighborType" />
+            <label for="tab11" tabindex="0" data-bind="event: { keypress: $parent.onAllNeighborsKeyPress }">All neighbors</label>
+        </div>
+        <div class="tab">
+            <input type="radio" id="tab12" name="graphneighbortype" class="radio" data-bind="checkedValue:0, checked:showNeighborType" />
+            <label for="tab12" tabindex="0" data-bind="event: { keypress: $parent.onSourcesKeyPress }">Sources</label>
+        </div>
+        <div class="tab">
+            <input type="radio" id="tab13" name="graphneighbortype" class="radio" data-bind="checkedValue:1, checked:showNeighborType" />
+            <label for="tab13" tabindex="0" data-bind="event: { keypress: $parent.onTargetsKeyPress }">Targets</label>
+        </div>
+    </div>
+</div>`;
+
+export const GraphStyleComponent = {
+  viewModel: GraphStyleViewModel,
+  template,
+};

src/Explorer/Graph/GraphStyleComponent/graph-style-component.html

@@ -1,74 +1,74 @@
-<div id="graphStyle" class="graphStyle" data-bind="setTemplateReady: true, with:params.config">
-  <div class="seconddivpadding">
-    <p>Show vertex (node) as</p>
-    <select
-      id="nodeCaptionChoices"
-      class="formTree paneselect"
-      required
-      data-bind="options:nodeProperties,
-                                            value:nodeCaptionChoice, hasFocus: $parent.params.firstFieldHasFocus"
-    ></select>
-  </div>
-  <div class="seconddivpadding">
-    <p>Map this property to node color</p>
-    <select
-      id="nodeColorKeyChoices"
-      class="formTree paneselect"
-      required
-      data-bind="options:nodePropertiesWithNone,
-                                                                            value:nodeColorKeyChoice"
-    ></select>
-  </div>
-  <div class="seconddivpadding">
-    <p>Map this property to node icon</p>
-    <select
-      id="nodeIconChoices"
-      class="formTree paneselect"
-      required
-      data-bind="options:nodePropertiesWithNone,
-                                                                            value:nodeIconChoice"
-    ></select>
-    <input
-      type="text"
-      data-bind="value:nodeIconSet"
-      placeholder="Icon set: blank for collection id"
-      class="nodeIconSet"
-      autocomplete="off"
-    />
-  </div>
-
-  <p class="seconddivpadding">Show</p>
-
-  <div class="tabs">
-    <div class="tab">
-      <input
-        type="radio"
-        id="tab11"
-        name="graphneighbortype"
-        class="radio"
-        data-bind="checkedValue:2, checked:showNeighborType"
-      />
-      <label for="tab11">All neighbors</label>
-    </div>
-    <div class="tab">
-      <input
-        type="radio"
-        id="tab12"
-        name="graphneighbortype"
-        class="radio"
-        data-bind="checkedValue:0, checked:showNeighborType"
-      />
-      <label for="tab12">Sources</label>
-    </div>
-    <div class="tab">
-      <input
-        type="radio"
-        id="tab13"
-        name="graphneighbortype"
-        class="radio"
-        data-bind="checkedValue:1, checked:showNeighborType"
-      />
-      <label for="tab13">Targets</label>
-    </div>
-  </div>
-</div>
+<div id="graphStyle" class="graphStyle" data-bind="setTemplateReady: true, with:params.config">
+  <div class="seconddivpadding">
+    <p>Show vertex (node) as</p>
+    <select
+      id="nodeCaptionChoices"
+      class="formTree paneselect"
+      required
+      data-bind="options:nodeProperties,
+                                            value:nodeCaptionChoice, hasFocus: $parent.params.firstFieldHasFocus"
+    ></select>
+  </div>
+  <div class="seconddivpadding">
+    <p>Map this property to node color</p>
+    <select
+      id="nodeColorKeyChoices"
+      class="formTree paneselect"
+      required
+      data-bind="options:nodePropertiesWithNone,
+                                                                            value:nodeColorKeyChoice"
+    ></select>
+  </div>
+  <div class="seconddivpadding">
+    <p>Map this property to node icon</p>
+    <select
+      id="nodeIconChoices"
+      class="formTree paneselect"
+      required
+      data-bind="options:nodePropertiesWithNone,
+                                                                            value:nodeIconChoice"
+    ></select>
+    <input
+      type="text"
+      data-bind="value:nodeIconSet"
+      placeholder="Icon set: blank for collection id"
+      class="nodeIconSet"
+      autocomplete="off"
+    />
+  </div>
+
+  <p class="seconddivpadding">Show</p>
+
+  <div class="tabs">
+    <div class="tab">
+      <input
+        type="radio"
+        id="tab11"
+        name="graphneighbortype"
+        class="radio"
+        data-bind="checkedValue:2, checked:showNeighborType"
+      />
+      <label for="tab11">All neighbors</label>
+    </div>
+    <div class="tab">
+      <input
+        type="radio"
+        id="tab12"
+        name="graphneighbortype"
+        class="radio"
+        data-bind="checkedValue:0, checked:showNeighborType"
+      />
+      <label for="tab12">Sources</label>
+    </div>
+    <div class="tab">
+      <input
+        type="radio"
+        id="tab13"
+        name="graphneighbortype"
+        class="radio"
+        data-bind="checkedValue:1, checked:showNeighborType"
+      />
+      <label for="tab13">Targets</label>
+    </div>
+  </div>
+</div>