ngOnInit()

in toolings/tfjs-debugger/src/app/components/graph_panel/graph_panel.component.ts [48:100]


  ngOnInit() {
    // Fetch model.json file (if the model type is tfjs model) when the "Run"
    // button in the app bar is clicked.
    this.store.select(selectRunCurrentConfigsTrigger)
        .pipe(
            filter(trigger => trigger != null),
            withLatestFrom(this.store.select(selectCurrentConfigs)))
        .subscribe(([unusedTrigger, curConfigs]) => {
          const prevConfigs: Configs|undefined =
              !this.curConfigs ? undefined : {...this.curConfigs};
          this.curConfigs = curConfigs;
          this.fetchModelJsonFilesIfChanged(prevConfigs, this.curConfigs);
        });

    // Send the loaded ModelGraph (converted from model.json) to worker to do
    // layout.
    combineLatest([
      this.store.select(selectModelGraph(0)),
      this.store.select(selectModelGraph(1))
    ]).subscribe(([modelGraph1, modelGraph2]) => {
      if (!this.curConfigs) {
        return;
      }

      // TODO: for now we only handle laying out the TFJS model graph from
      // config1. In the future when we support diffing two model graphs, we
      // will merge those two graphs into one graph and send that graph to the
      // worker for layout.
      if (this.curConfigs.config1.modelType === ModelTypeId.TFJS &&
          this.curConfigs.config2.modelType === ModelTypeId.SAME_AS_CONFIG1 &&
          modelGraph1 != null) {
        const msg: WorkerMessage = {
          cmd: WorkerCommand.LAYOUT,
          configIndex: 0,
          modelGraph: modelGraph1,
        };
        this.layoutWorker.postMessage(msg);
      }
    });

    // Listen to worker's response.
    this.layoutWorker.onmessage = ({data}) => {
      const msg = data as WorkerMessage;
      switch (msg.cmd) {
        case WorkerCommand.LAYOUT_RESULT:
          console.log('got layout result', msg);
          break;

        default:
          break;
      }
    };
  }