loadFileAccess(trial1: string, trial2: string) {
    let sub = this.node.getElementsByClassName("file-accesses")[0];

    json("File Accesses", sub, DiffInfoWidget.accesses_url(trial1, trial2), (data: DiffAccessData) => {
      let accesses = this.d3node.select(".file-accesses").html("");
      if ((data.fa_added.length > 0) ||
          (data.fa_removed.length > 0) ||
          (data.fa_replaced.length > 0)) {
        let fold = TrialInfoWidget.createFold(accesses, "File Accesses");
        let foldable = accesses.append("div").classed("foldable show-toolbar", true);
        let filter = FileAccessesInfoWidget.createFilter(foldable);
        let ul = foldable.append("ul")
          .classed("fac-list", true)
        this.filter_trial(filter, (strial: number) => {
          ul.html("");

          if ((strial & 1) == 1) {
            for (var element of data.fa_removed) {
              if (!filter.valid(data.t1_path, element)) {
                continue;
              }
              this.fa_li(ul, 'libefore', element);
            }
          }
          if ((strial & 2) == 2) {
            for (var element of data.fa_added) {
              if (!filter.valid(data.t2_path, element)) {
                continue;
              }
              this.fa_li(ul, 'liafter', element);
            }
          }
          if (strial >= 3) {
            for (var elements of data.fa_replaced) {
              let rem = elements[0],
                  add = elements[1];
              if (!filter.valid(data.t1_path, rem) ||
                  !filter.valid(data.t2_path, add)) {
                continue;
              }
              let li = ul.append("li")

              this.fa_cfield(li, 'name', 'Name', rem.name, add.name);
              this.fa_cfield(li, 'mode', 'Mode', rem.mode, add.mode);
              this.fa_cfield(li, 'buffering', 'Buffering', rem.buffering, add.buffering);
              li.append("div")
                .classed("clear", true)
              this.fa_cfield(li, 'timestamp', 'Time', rem.timestamp, add.timestamp);
              this.fa_cfield(li, 'content_hash_before hash', 'Content hash before', rem.content_hash_before, add.content_hash_before);
              this.fa_cfield(li, 'content_hash_after hash', 'Content hash after', rem.content_hash_after, add.content_hash_after);
              this.fa_cfield(li, 'stack', 'Stack', rem.stack, add.stack);
            }
          }
        });
        TrialInfoWidget.createFilterFold(fold, filter);
      }
    });
  }

 load(trial1: string, trial2: string) {
   let sub = this.node.getElementsByClassName("trial-info")[0];
   json("Info", sub, DiffInfoWidget.url(trial1, trial2), (data: DiffInfoData) => {
     this.createMain(data);
     this.loadModules(trial1, trial2);
     this.loadEnvironment(trial1, trial2);
     this.loadFileAccess(trial1, trial2);
   })
 }

  load(selectedGraph: string = "namespace_match", useCache: boolean = true) {
    let sub = this.node.getElementsByClassName("sub-content")[0];
    json("Diff", sub, DiffGraphWidget.url(this.t1, this.t2, selectedGraph, useCache), (data: TrialGraphData) => {
      let selectorDiv = this.d3node.select(".trial-content .graphselector");

      let useCacheDiv = selectorDiv.select(".use-cache");
      useCacheDiv.property("checked", useCache);

      this.configureGraph(selectedGraph, useCache, data);
    })
  }

  loadEnvironment() {
    let sub = this.node.getElementsByClassName("environment")[0];

    json("Environment", sub, EnvironmentInfoWidget.url(this.trial.title), (data: EnvironmentData) => {
      let environment = this.d3node.select(".environment").html("");

      let fold = TrialInfoWidget.createFold(environment, "Environment");
      let filter = EnvironmentInfoWidget.createList(
        environment.append("div").classed("foldable show-toolbar", true),
        data.all, "1"
      );
      TrialInfoWidget.createFilterFold(fold, filter);
    })
  }

 loadModules() {
   let sub = this.node.getElementsByClassName("modules")[0];
   json("Modules", sub, ModulesInfoWidget.url(this.trial.title), (data: ModuleListData) => {
     let modules = this.d3node.select(".modules").html("");
     if (data.all.length > 0) {
       
       let fold = TrialInfoWidget.createFold(modules, "Modules");
       let filter = ModulesInfoWidget.createList(
         modules.append("div").classed("foldable show-toolbar", true),
         data.all, data.trial_path, "1"
       );
       TrialInfoWidget.createFilterFold(fold, filter);
     }
   });
 }

  loadEnvironment(trial1: string, trial2: string) {
    let sub = this.node.getElementsByClassName("environment")[0];

    json("Environment", sub, DiffInfoWidget.environment_url(trial1, trial2), (data: DiffEnvironmentData) => {
      let environment = this.d3node.select(".environment").html("");
      if ((data.env_added.length > 0) ||
          (data.env_removed.length > 0) ||
          (data.env_replaced.length > 0)) {
        let fold = TrialInfoWidget.createFold(environment, "Environment");
        let foldable = environment.append("div").classed("foldable show-toolbar", true);
        let filter = EnvironmentInfoWidget.createFilter(foldable);
        let ul = foldable.append("ul")
          .classed("env-list", true)
        this.filter_trial(filter, (strial: number) => {
          ul.html("");
          if ((strial & 1) == 1) {
            for (var element of data.env_removed) {
              if (!filter.valid(element)) {
                continue;
              }
              this.env_li(ul, 'dbefore', element);
            }
          }
          if ((strial & 2) == 2) {
            for (var element of data.env_added) {
              if (!filter.valid(element)) {
                continue;
              }
              this.env_li(ul, 'dafter', element);
            }
          }
          if (strial >= 3) {
            for (var elements of data.env_replaced) {
              let rem = elements[0],
                  add = elements[1];
              if (!filter.valid(rem) ||
                  !filter.valid(add)) {
                continue;
              }
              this.env_cli(ul, rem, add);
            }
          }
        });
        TrialInfoWidget.createFilterFold(fold, filter);
      }
    })
  }

  loadFileAccess() {
    let sub = this.node.getElementsByClassName("file-accesses")[0];

    json("File Accesses", sub, FileAccessesInfoWidget.url(this.trial.title), (data: FileAccessListData) => {
      let accesses = this.d3node.select(".file-accesses").html("");

      if (data.file_accesses.length > 0) {

        let fold = TrialInfoWidget.createFold(accesses, "File Accesses");
        let filter = FileAccessesInfoWidget.createList(
          accesses.append("div").classed("foldable show-toolbar", true),
          data.file_accesses, data.trial_path
        );
        TrialInfoWidget.createFilterFold(fold, filter);
      }
    });
  }

  loadModules(trial1: string, trial2: string) {
    let sub = this.node.getElementsByClassName("modules")[0];

    json("Modules", sub, DiffInfoWidget.modules_url(trial1, trial2), (data: DiffModuleData) => {
      let modules = this.d3node.select(".modules").html("");
      if ((data.modules_added.length > 0) ||
          (data.modules_removed.length > 0) ||
          (data.modules_replaced.length > 0)) {
        let fold = TrialInfoWidget.createFold(modules, "Modules");
        let foldable = modules.append("div").classed("foldable show-toolbar", true);
        let filter = ModulesInfoWidget.createFilter(foldable);
        let ul = foldable.append("ul")
          .classed("mod-list", true)
        this.filter_trial(filter, (strial: number) => {
          ul.html("");
          if ((strial & 1) == 1) {
            for (var element of data.modules_removed) {
              if (!filter.valid(data.t1_path, element)) {
                continue;
              }
              this.mod_li(ul, 'libefore', element);
            }
          }
          if ((strial & 2) == 2) {
            for (var element of data.modules_added) {
              if (!filter.valid(data.t2_path, element)) {
                continue;
              }
              this.mod_li(ul, 'liafter', element);
            }
          }
          if (strial >= 3) {
            for (var elements of data.modules_replaced) {
              let rem = elements[0],
                  add = elements[1];
              if (!filter.valid(data.t1_path, rem) ||
                  !filter.valid(data.t2_path, add)) {
                continue;
              }
              let li = ul.append("li")

              li.append("div")
                .classed("name", true)
                .text(rem.name);

              let version = li.append("div")
                .classed("version", true)
              version.append("div")
                .classed("dbefore", true)
                .text(rem.version)
              version.append("div")
                .classed("dafter", true)
                .text(add.version)

              li.append("div")
                .classed("clear", true)

              li.append("div")
                .classed("hash dbefore", true)
                .attr("title", rem.path)
                .text(rem.code_hash);

              li.append("div")
                .classed("hash dafter", true)
                .attr("title", add.path)
                .text(add.code_hash);
            }
          }
        });
        TrialInfoWidget.createFilterFold(fold, filter);
      }
    });
  }

  load(script = "*", execution = "*", summarize=true) {
    let sub = this.node.getElementsByClassName("sub-content")[0];

    json("History", sub, HistoryWidget.url(script, execution, summarize), (data: HistoryGraphData) => {
      this.setGraph(data, {
        width: this.node.getBoundingClientRect().width - 24,
        height: this.node.getBoundingClientRect().height - 24,
        customCtrlClick: (g: HistoryGraph, d: VisibleHistoryNode) => {
          var redTrial = g.state.selectedNode;
          if (redTrial == null) {
            return true;
          }
          var greenTrial = d;
          let diffGraphWidget = new DiffGraphWidget(
            "Diff " + redTrial.display + "-" + greenTrial.display,
            "diff-" + redTrial.title + "-" + greenTrial.title + makeid(),
            +redTrial.title, +greenTrial.title
          );
          let parentDock: NowVisPanel = this.parent as NowVisPanel;

          if (this.config.showInfo()) {
            let diffInfoWidget = new DiffInfoWidget(redTrial.display, greenTrial.display, redTrial.title, greenTrial.title);
            parentDock.addInfoWidget(diffInfoWidget);
            parentDock.activateWidget(diffInfoWidget);
          }

          if (this.config.showTrial()) {
            parentDock.addGraphWidget(diffGraphWidget);
            parentDock.activateWidget(diffGraphWidget);
            diffGraphWidget.load(
              this.config.graphType(),
              this.config.useCache()
            );
          }
          return true;
        },
        customSelectNode: (g: HistoryGraph, d: VisibleHistoryNode) => {
          let trialGraphWidget = new TrialGraphWidget("Trial " + d.display, "trial-" + d.title + makeid(), +d.title, +d.title);
          let parentDock: NowVisPanel = this.parent as NowVisPanel;

          if (this.config.showInfo()) {
            let trialInfoWidget = new TrialInfoWidget(d);
            parentDock.addInfoWidget(trialInfoWidget);
            parentDock.activateWidget(trialInfoWidget);
          }
          if (this.config.showTrial()) {
            parentDock.addGraphWidget(trialGraphWidget);
            parentDock.activateWidget(trialGraphWidget);
            trialGraphWidget.load(
              this.config.graphType(),
              this.config.useCache()
            );
          }
          return true;
        },
        customForm: (graph: HistoryGraph, form: d3_Selection<d3_BaseType, {}, HTMLElement | null, any>) => {
          // Toggle Tooltips
          let filterDiv = this.d3node.select(".history-content .filter");

          let scriptOptions = filterDiv.select(".script-options");

          let currentScript = scriptOptions.property("value");

          scriptOptions.html("");

          scriptOptions.append("option")
            .attr("value", "*")
            .text("All Scripts");

          for (let script of data.scripts) {
            scriptOptions.append("option")
              .attr("value", script)
              .text(script);
          }

          scriptOptions.property("value", currentScript);

          let filterToggle = form.append("input")
            .attr("id", "history-" + graph.graphId + "-toolbar-filter-check")
            .attr("type", "checkbox")
            .attr("name", "history-toolbar-filter-check")
            .attr("value", "show")
            .property("checked", filterDiv.classed('visible'))
            .on("change", () => {
              let visible = filterToggle.property("checked");
              filterToggleI
                .classed('fa-circle-o', visible)
                .classed('fa-circle', !visible);
              filterDiv
                .classed('visible', visible)
                .classed('show-toolbar', visible)
                  .classed('hide-toolbar', !visible)
            });
          let filterLabel = form.append("label")
            .attr("for", "history-" + graph.graphId + "-toolbar-filter-check")
          let filterToggleI = filterLabel.append("i")
            .classed('fa', true)
            .classed("fa-circle", !filterDiv.classed('visible'))
            .classed("fa-circle-o", filterDiv.classed('visible'))
        }
//.........这里部分代码省略.........

 load(selectedGraph: string = "namespace_match", useCache: boolean = true) {
   let sub = this.node.getElementsByClassName("sub-content")[0];
   json("Trial", sub, TrialGraphWidget.url(this.t1, selectedGraph, useCache), (data: TrialGraphData) => {
     this.configureGraph(selectedGraph, useCache, data);
   })
 }