chore: add prettier-plugin-sort-imports (tensorflow#5453)

Prettier by default does not sort the imports because it believes in no
source code transformation (just does re-print). As such, imports were
left to the developer and causes cognitive overhead when authoring a
module since we have a soft rule about how it should be ordered.

This addition of the plugin automates the formatting of import
statements and this change applies the format onto TypeScript files.

package.json

@@ -57,6 +57,7 @@
     "karma-requirejs": "^1.1.0",
     "karma-sourcemap-loader": "^0.3.8",
     "prettier": "2.4.1",
+    "prettier-plugin-organize-imports": "2.3.4",
     "requirejs": "^2.3.6",
     "rollup": "^2.56.2",
     "terser": "^5.7.1",

tensorboard/components/experimental/plugin_lib/index.ts

@@ -12,8 +12,8 @@ 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.
 ==============================================================================*/
-import * as _runs from './runs';
 import * as _core from './core';
+import * as _runs from './runs';
 
 export const core = _core;
 export const runs = _runs;

tensorboard/components/experimental/plugin_lib/runs.ts

@@ -12,7 +12,7 @@ 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.
 ==============================================================================*/
-import {sendMessage, listen} from './plugin-guest';
+import {listen, sendMessage} from './plugin-guest';
 
 export async function getRuns() {
   return sendMessage('experimental.GetRuns');

tensorboard/components/experimental/plugin_util/core-host-impl.ts

@@ -18,7 +18,6 @@ limitations under the License.
 import {Injectable} from '@angular/core';
 import {Store} from '@ngrx/store';
 import {distinctUntilChanged, filter} from 'rxjs/operators';
-
 import {State} from '../../../webapp/app_state';
 import {getAppLastLoadedTimeInMs} from '../../../webapp/selectors';
 import {TfStorageElement} from '../../../webapp/tb_polymer_interop_types';

tensorboard/components/experimental/plugin_util/plugin-host-ipc.ts

@@ -13,7 +13,6 @@ See the License for the specific language governing permissions and
 limitations under the License.
 ==============================================================================*/
 import {Injectable} from '@angular/core';
-
 import {IPC, MessageCallback, MessageType, PayloadType} from './message';
 
 /**

tensorboard/components/experimental/plugin_util/plugin_api_host_module.ts

@@ -17,7 +17,6 @@ import {NgModule} from '@angular/core';
 import {AppRoutingModule} from '../../../webapp/app_routing/app_routing_module';
 import {CoreModule} from '../../../webapp/core/core_module';
 import {RunsModule} from '../../../webapp/runs/runs_module';
-
 import {PluginCoreApiHostImpl} from './core-host-impl';
 import {Ipc, registerPluginIframe} from './plugin-host-ipc';
 import {PluginRunsApiHostImpl} from './runs-host-impl';

tensorboard/components/experimental/plugin_util/plugin_api_host_test.ts

@@ -16,7 +16,6 @@ import {TestBed} from '@angular/core/testing';
 import {Store} from '@ngrx/store';
 import {MockStore, provideMockStore} from '@ngrx/store/testing';
 import {of} from 'rxjs';
-
 import {State} from '../../../webapp/app_state';
 import {buildRun} from '../../../webapp/runs/store/testing';
 import {

tensorboard/components/experimental/plugin_util/runs-host-impl.ts

@@ -19,7 +19,6 @@ import {Injectable} from '@angular/core';
 import {Store} from '@ngrx/store';
 import {combineLatest, of} from 'rxjs';
 import {distinctUntilChanged, map, mergeMap, take} from 'rxjs/operators';
-
 import {State} from '../../../webapp/app_state';
 import {getExperimentIdsFromRoute, getRuns} from '../../../webapp/selectors';
 import {MessageId} from './message_types';

tensorboard/components/experimental/plugin_util/testing.ts

@@ -13,7 +13,6 @@ See the License for the specific language governing permissions and
 limitations under the License.
 ==============================================================================*/
 import {Injectable} from '@angular/core';
-
 import {MessageType, PayloadType} from './message';
 import {Ipc, PluginHostCallback} from './plugin-host-ipc';
 import {PluginApiHostModule} from './plugin_api_host_module';

tensorboard/components/polymer/irons_and_papers.ts

@@ -27,8 +27,8 @@ import '@polymer/iron-list/iron-list';
 import '@polymer/iron-pages';
 import '@polymer/paper-button';
 import '@polymer/paper-checkbox';
-import '@polymer/paper-dialog-scrollable';
 import '@polymer/paper-dialog';
+import '@polymer/paper-dialog-scrollable';
 import '@polymer/paper-dropdown-menu/paper-dropdown-menu';
 import '@polymer/paper-header-panel';
 import '@polymer/paper-icon-button/paper-icon-button';
@@ -42,8 +42,8 @@ import '@polymer/paper-progress';
 import '@polymer/paper-radio-button';
 import '@polymer/paper-radio-group';
 import '@polymer/paper-slider';
-import '@polymer/paper-spinner/paper-spinner-lite';
 import '@polymer/paper-spinner/paper-spinner';
+import '@polymer/paper-spinner/paper-spinner-lite';
 import '@polymer/paper-styles/paper-styles';
 import '@polymer/paper-tabs';
 import '@polymer/paper-toast';

tensorboard/components/polymer3_interop_helper.ts

@@ -17,7 +17,7 @@ limitations under the License.
  * Exports components necessary for Polymer <-> Angular interop.
  */
 import './tf_backend/tf-backend-polymer';
+import './tf_color_scale/tf-color-scale-polymer';
 import './tf_globals/globals-polymer';
-import './tf_storage/tf-storage-polymer';
 import './tf_paginated_view/tf-paginated-view-store';
-import './tf_color_scale/tf-color-scale-polymer';
+import './tf_storage/tf-storage-polymer';

tensorboard/components/polymer3_lib.ts

@@ -22,9 +22,8 @@ import '../plugins/histogram/tf_histogram_dashboard/tf-histogram-dashboard';
 import '../plugins/hparams/tf_hparams_dashboard/tf-hparams-dashboard';
 import '../plugins/image/tf_image_dashboard/tf-image-dashboard';
 import '../plugins/mesh/tf_mesh_dashboard/tf-mesh-dashboard';
-import '../plugins/pr_curve/tf_pr_curve_dashboard/tf-pr-curve-dashboard';
 import '../plugins/profile_redirect/tf_profile_redirect_dashboard/tf-profile-redirect-dashboard';
+import '../plugins/pr_curve/tf_pr_curve_dashboard/tf-pr-curve-dashboard';
 import '../plugins/scalar/tf_scalar_dashboard/tf-scalar-dashboard';
 import '../plugins/text/tf_text_dashboard/tf-text-dashboard';
-
 import './polymer3_interop_helper';

tensorboard/components/tensor_widget/selection-test.ts

@@ -15,8 +15,8 @@ limitations under the License.
 
 /** Unit tests for selection. */
 
-import {MoveDirection, Shape, TensorViewSlicingSpec, TensorView} from './types';
 import {TensorElementSelection} from './selection';
+import {MoveDirection, Shape, TensorViewSlicingSpec} from './types';
 
 describe('TensorElementSelection', () => {
   it('Scalar shape', () => {

tensorboard/components/tensor_widget/shape-utils-test.ts

@@ -14,9 +14,9 @@ limitations under the License.
 ==============================================================================*/
 
 import {
+  areSlicingSpecsCompatible,
   formatShapeForDisplay,
   getDefaultSlicingSpec,
-  areSlicingSpecsCompatible,
   numElements,
 } from './shape-utils';
 import {TensorViewSlicingSpec} from './types';

tensorboard/components/tensor_widget/string-utils-test.ts

@@ -18,8 +18,8 @@ import {
   ELLIPSES,
   formatTensorName,
   numericValueToString,
-  TENSOR_NAME_LENGTH_CUTOFF,
   stringValueToDisplayString,
+  TENSOR_NAME_LENGTH_CUTOFF,
 } from './string-utils';
 
 function stringRepeat(str: string, times: number) {

tensorboard/components/tensor_widget/tensor-widget-impl.ts

@@ -13,12 +13,22 @@ See the License for the specific language governing permissions and
 limitations under the License.
 ==============================================================================*/
 
+import {
+  ColorMap,
+  ColorMapConfig,
+  GrayscaleColorMap,
+  JetColorMap,
+} from './colormap';
 import {
   isBooleanDType,
   isFloatDType,
   isIntegerDType,
   isStringDType,
 } from './dtype-utils';
+import {
+  BaseTensorNumericSummary,
+  BooleanOrNumericTensorNumericSummary,
+} from './health-pill-types';
 import {
   ChoiceMenuItemConfig,
   Menu,
@@ -27,9 +37,9 @@ import {
 } from './menu';
 import {TensorElementSelection} from './selection';
 import {
+  areSlicingSpecsCompatible,
   formatShapeForDisplay,
   getDefaultSlicingSpec,
-  areSlicingSpecsCompatible,
 } from './shape-utils';
 import {SlicingControl} from './slicing-control';
 import {
@@ -41,20 +51,10 @@ import {
 import {
   MoveDirection,
   TensorView,
+  TensorViewSlicingSpec,
   TensorWidget,
   TensorWidgetOptions,
-  TensorViewSlicingSpec,
 } from './types';
-import {
-  BaseTensorNumericSummary,
-  BooleanOrNumericTensorNumericSummary,
-} from './health-pill-types';
-import {
-  ColorMap,
-  ColorMapConfig,
-  GrayscaleColorMap,
-  JetColorMap,
-} from './colormap';
 
 const DETAILED_VALUE_ATTR_KEY = 'detailed-value';
 

tensorboard/components/tensor_widget/tensor-widget.ts

@@ -14,7 +14,7 @@ limitations under the License.
 ==============================================================================*/
 
 import {TensorWidgetImpl} from './tensor-widget-impl';
-import {TensorWidget, TensorWidgetOptions, TensorView} from './types';
+import {TensorView, TensorWidget, TensorWidgetOptions} from './types';
 
 export {Shape, TensorView} from './types';
 export {VERSION} from './version';

tensorboard/components/tf_backend/backend.ts

@@ -13,7 +13,6 @@ See the License for the specific language governing permissions and
 limitations under the License.
 ==============================================================================*/
 import * as _ from 'lodash';
-
 import * as vz_sorting from '../vz_sorting/sorting';
 
 export type RunToTag = {

tensorboard/components/tf_backend/environmentStore.ts

@@ -13,9 +13,8 @@ See the License for the specific language governing permissions and
 limitations under the License.
 ==============================================================================*/
 import * as _ from 'lodash';
-
-import {getRouter} from './router';
 import {BaseStore} from './baseStore';
+import {getRouter} from './router';
 
 interface Environment {
   dataLocation: string;

tensorboard/components/tf_backend/experimentsStore.ts

@@ -13,9 +13,8 @@ See the License for the specific language governing permissions and
 limitations under the License.
 ==============================================================================*/
 import * as _ from 'lodash';
-
-import {getRouter} from './router';
 import {BaseStore} from './baseStore';
+import {getRouter} from './router';
 import {Experiment} from './type';
 
 export class ExperimentsStore extends BaseStore {

tensorboard/components/tf_backend/runsStore.ts

@@ -13,9 +13,8 @@ See the License for the specific language governing permissions and
 limitations under the License.
 ==============================================================================*/
 import * as _ from 'lodash';
-
-import {getRouter} from './router';
 import {BaseStore} from './baseStore';
+import {getRouter} from './router';
 
 export class RunsStore extends BaseStore {
   private _runs: string[] = [];

tensorboard/components/tf_backend/tf-backend-polymer.ts

@@ -12,9 +12,8 @@ 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.
 ==============================================================================*/
-import {PolymerElement} from '@polymer/polymer';
 import {customElement} from '@polymer/decorators';
-
+import {PolymerElement} from '@polymer/polymer';
 import * as tf_backend from './tf-backend';
 
 // HACK: this Polymer component allows stores to be accessible from

tensorboard/components/tf_card_heading/tf-card-heading.ts

@@ -13,14 +13,12 @@ See the License for the specific language governing permissions and
 limitations under the License.
 ==============================================================================*/
 
-import {PolymerElement, html} from '@polymer/polymer';
 import {computed, customElement, property} from '@polymer/decorators';
-
-import '../tf_markdown_view/tf-markdown-view';
+import {html, PolymerElement} from '@polymer/polymer';
 import '../polymer/irons_and_papers';
-
-import {pickTextColor} from './util';
+import '../tf_markdown_view/tf-markdown-view';
 import './tf-card-heading-style';
+import {pickTextColor} from './util';
 
 /**
  * A compact heading to appear above a single visualization, summarizing

tensorboard/components/tf_categorization_utils/categorizationUtils.ts

@@ -19,8 +19,8 @@ limitations under the License.
  * `tf-category-paginated-view`.
  */
 import * as _ from 'lodash';
-import {Experiment, Run} from '../tf_backend/type';
 import {getTags} from '../tf_backend/backend';
+import {Experiment, Run} from '../tf_backend/type';
 import {compareTagNames} from '../vz_sorting/sorting';
 
 export type RunToTag = {

tensorboard/components/tf_categorization_utils/tf-tag-filterer.ts

@@ -13,9 +13,8 @@ See the License for the specific language governing permissions and
 limitations under the License.
 ==============================================================================*/
 
-import {PolymerElement, html} from '@polymer/polymer';
 import {customElement, property} from '@polymer/decorators';
-
+import {html, PolymerElement} from '@polymer/polymer';
 import '../polymer/irons_and_papers';
 import {getStringInitializer, getStringObserver} from '../tf_storage/storage';
 

tensorboard/components/tf_color_scale/colorScale.ts

@@ -13,12 +13,10 @@ See the License for the specific language governing permissions and
 limitations under the License.
 ==============================================================================*/
 import * as d3 from 'd3';
-
-import {standard} from './palettes';
-
 import {BaseStore} from '../tf_backend/baseStore';
-import {runsStore} from '../tf_backend/runsStore';
 import {experimentsStore} from '../tf_backend/experimentsStore';
+import {runsStore} from '../tf_backend/runsStore';
+import {standard} from './palettes';
 
 // Example usage:
 // runs = ["train", "test", "test1", "test2"]

tensorboard/components/tf_color_scale/tf-color-scale-polymer.ts

@@ -12,9 +12,8 @@ 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.
 ==============================================================================*/
-import {PolymerElement} from '@polymer/polymer';
 import {customElement} from '@polymer/decorators';
-
+import {PolymerElement} from '@polymer/polymer';
 import {runsColorScale} from './colorScale';
 
 // HACK: this Polymer component allows stores to be accessible from

tensorboard/components/tf_dashboard_common/dashboard-style.ts

@@ -13,8 +13,8 @@ See the License for the specific language governing permissions and
 limitations under the License.
 ==============================================================================*/
 
-import {registerStyleDomModule} from '../polymer/register_style_dom_module';
 import '../polymer/irons_and_papers';
+import {registerStyleDomModule} from '../polymer/register_style_dom_module';
 
 registerStyleDomModule({
   moduleName: 'dashboard-style',

tensorboard/components/tf_dashboard_common/data-loader-behavior.ts

@@ -14,9 +14,7 @@ limitations under the License.
 ==============================================================================*/
 import {PolymerElement} from '@polymer/polymer';
 import * as _ from 'lodash';
-
-import {CancelResult, Canceller} from '../tf_backend/canceller';
-import {RequestManager} from '../tf_backend/requestManager';
+import {Canceller, CancelResult} from '../tf_backend/canceller';
 
 type CacheKey = string;
 

tensorboard/components/tf_dashboard_common/tf-dashboard-layout.ts

@@ -13,12 +13,11 @@ See the License for the specific language governing permissions and
 limitations under the License.
 ==============================================================================*/
 
-import {PolymerElement, html} from '@polymer/polymer';
 import {customElement} from '@polymer/decorators';
-
-import './tensorboard-color';
-import './scrollbar-style';
+import {html, PolymerElement} from '@polymer/polymer';
 import {DarkModeMixin} from '../polymer/dark_mode_mixin';
+import './scrollbar-style';
+import './tensorboard-color';
 
 @customElement('tf-dashboard-layout')
 class TfDashboardLayout extends DarkModeMixin(PolymerElement) {

tensorboard/components/tf_dashboard_common/tf-downloader.ts

@@ -13,9 +13,8 @@ See the License for the specific language governing permissions and
 limitations under the License.
 ==============================================================================*/
 
-import {PolymerElement, html} from '@polymer/polymer';
 import {customElement, property} from '@polymer/decorators';
-
+import {html, PolymerElement} from '@polymer/polymer';
 import '../polymer/irons_and_papers';
 import {addParams} from '../tf_backend/urlPathHelpers';
 

tensorboard/components/tf_dashboard_common/tf-dropdown-trigger.ts

@@ -13,12 +13,11 @@ See the License for the specific language governing permissions and
 limitations under the License.
 ==============================================================================*/
 
-import {PolymerElement, html} from '@polymer/polymer';
+import {customElement, observe, property} from '@polymer/decorators';
+import {html, PolymerElement} from '@polymer/polymer';
+import '../polymer/irons_and_papers';
 import {LegacyElementMixin} from '../polymer/legacy_element_mixin';
-import {customElement, property, observe} from '@polymer/decorators';
-
 import {PaperInkyFocusBehavior} from '../polymer/paper_inky_focus_behavior';
-import '../polymer/irons_and_papers';
 
 /**
  * tf-dropdown-trigger is a paper-menu-button trigger that has similar asthetics