How to use @bentley/presentation-frontend - 10 common examples

setCustomFavoritePropertiesManager();

    // __PUBLISH_EXTRACT_START__ Presentation.Frontend.Initialization
    Presentation.initialize({
      // specify `clientId` so Presentation framework can share caches
      // between sessions for the same clients
      clientId: MyAppFrontend.getClientId(),

      // specify locale for localizing presentation data
      activeLocale: IModelApp.i18n.languageList()[0],
    });
    // __PUBLISH_EXTRACT_END__

    // __PUBLISH_EXTRACT_START__ Presentation.Frontend.SetSelectionScope
    Presentation.selection.scopes.activeScope = "top-assembly";
    // __PUBLISH_EXTRACT_END__

    readyPromises.push(UiCore.initialize(IModelApp.i18n));
    readyPromises.push(UiComponents.initialize(IModelApp.i18n));
    this._ready = Promise.all(readyPromises).then(() => { });
  }

PresentationBackend.initialize(backendProps);

  // set up rpc interfaces
  initializeRpcInterfaces([SnapshotIModelRpcInterface, IModelReadRpcInterface, PresentationRpcInterface]);

  if (!isFrontendAppInitialized) {
    // init frontend
    frontendApp.startup();
    setCustomFavoritePropertiesManager();
    isFrontendAppInitialized = true;
  }

  const defaultFrontendProps: PresentationFrontendProps = {
    activeLocale: IModelApp.i18n.languageList()[0],
  };
  PresentationFrontend.initialize({ ...defaultFrontendProps, ...frontendProps });

  isInitialized = true;
};

public static startup() {
    IModelApp.startup();
    const readyPromises = new Array>();

    const localizationNamespace = IModelApp.i18n.registerNamespace("Sample");
    readyPromises.push(localizationNamespace.readFinished);

    // Configure a CORS proxy in development mode.
    if (process.env.NODE_ENV === "development")
      Config.App.set("imjs_dev_cors_proxy_server", `http://${window.location.hostname}:3001`); // By default, this will run on port 3001

    setCustomFavoritePropertiesManager();

    // __PUBLISH_EXTRACT_START__ Presentation.Frontend.Initialization
    Presentation.initialize({
      // specify `clientId` so Presentation framework can share caches
      // between sessions for the same clients
      clientId: MyAppFrontend.getClientId(),

      // specify locale for localizing presentation data
      activeLocale: IModelApp.i18n.languageList()[0],
    });
    // __PUBLISH_EXTRACT_END__

    // __PUBLISH_EXTRACT_START__ Presentation.Frontend.SetSelectionScope
    Presentation.selection.scopes.activeScope = "top-assembly";
    // __PUBLISH_EXTRACT_END__

    readyPromises.push(UiCore.initialize(IModelApp.i18n));
    readyPromises.push(UiComponents.initialize(IModelApp.i18n));
    this._ready = Promise.all(readyPromises).then(() => { });

public static async initialize() {
    Presentation.initialize();
    Presentation.selection.scopes.activeScope = "top-assembly";
    UiCore.initialize(IModelApp.i18n); // tslint:disable-line:no-floating-promises
    UiComponents.initialize(IModelApp.i18n); // tslint:disable-line:no-floating-promises

    const oidcConfiguration = this.getOidcConfiguration();
    await UiFramework.initialize(SampleAppIModelApp.store, IModelApp.i18n, oidcConfiguration, "frameworkState");

    // initialize Presentation
    Presentation.initialize({
      activeLocale: IModelApp.i18n.languageList()[0],
    });

    // Register tools.
    Tool1.register(this.sampleAppNamespace);
    Tool2.register(this.sampleAppNamespace);
    ToolWithSettings.register(this.sampleAppNamespace);

export const terminate = (frontendApp = IModelApp) => {
  if (!isInitialized)
    return;

  // store directory that needs to be cleaned-up
  const tempDirectory = (PresentationBackend.initProps && PresentationBackend.initProps.id)
    ? path.join(KnownLocations.tmpdir, "ecpresentation", PresentationBackend.initProps.id) : undefined;

  // terminate backend
  PresentationBackend.terminate();
  IModelHost.shutdown();
  if (tempDirectory)
    rimraf.sync(tempDirectory);

  // terminate frontend
  PresentationFrontend.terminate();
  frontendApp.shutdown();

  isInitialized = false;
  isFrontendAppInitialized = false;
};

public static setActiveSelectionScope(selectionScopeId: string): void {
    // istanbul ignore else
    if (UiFramework.frameworkState) {
      const foundIndex = UiFramework.frameworkState.sessionState.availableSelectionScopes.findIndex((selectionScope: PresentationSelectionScope) => selectionScope.id === selectionScopeId);
      if (-1 !== foundIndex) {
        const scope = UiFramework.frameworkState.sessionState.availableSelectionScopes[foundIndex];
        UiFramework.dispatchActionToStore(SessionStateActionId.SetSelectionScope, scope.id);
        Presentation.selection.scopes.activeScope = scope.id;
      }
    }
  }

(iModelConnection.iModelToken && iModelConnection.iModelToken.iModelId) ? UiFramework.setActiveIModelId(iModelConnection.iModelToken.iModelId) : "";
    if (SyncUiEventDispatcher._unregisterListenerFunc)
      SyncUiEventDispatcher._unregisterListenerFunc();

    // listen for changes from presentation rules selection manager (this is done once an iModelConnection is available to ensure Presentation.selection is valid)
    SyncUiEventDispatcher._unregisterListenerFunc = Presentation.selection.selectionChange.addListener((args: SelectionChangeEventArgs, provider: ISelectionProvider) => {
      if (args.level !== 0) {
        // don't need to handle sub-selections
        return;
      }
      const selection = provider.getSelection(args.imodel, args.level);
      const numSelected = getInstancesCount(selection);
      UiFramework.dispatchActionToStore(SessionStateActionId.SetNumItemsSelected, numSelected);
    });

    Presentation.selection.scopes.getSelectionScopes(iModelConnection).then((availableScopes: SelectionScope[]) => { // tslint:disable-line:no-floating-promises
      // istanbul ignore else
      if (availableScopes) {
        const presentationScopes: PresentationSelectionScope[] = [];
        availableScopes.map((scope) => presentationScopes.push(scope));
        UiFramework.dispatchActionToStore(SessionStateActionId.SetAvailableSelectionScopes, presentationScopes);
      }
    });

    const activeSelectionScope = Presentation.selection.scopes.activeScope;
    if (activeSelectionScope) {
      if (typeof (activeSelectionScope) === "object") {
        UiFramework.dispatchActionToStore(SessionStateActionId.SetSelectionScope, (activeSelectionScope as SelectionScope).id);
      } else {
        UiFramework.dispatchActionToStore(SessionStateActionId.SetSelectionScope, activeSelectionScope);
      }
    }

private getDefaultContentDescriptor = _.memoize(async (): Promise => {
    // istanbul ignore if
    if (this.keys.size > DEFAULT_KEYS_BATCH_SIZE) {
      const msg = `ContentDataProvider.getContentDescriptor requesting descriptor with ${this.keys.size} keys which
        exceeds the suggested size of ${DEFAULT_KEYS_BATCH_SIZE}. Possible "HTTP 413 Payload Too Large" error.`;
      Logger.logWarning("Presentation.Components", msg);
    }
    return Presentation.presentation.getContentDescriptor(this.createRequestOptions(),
      this._displayType, this.keys, this.selectionInfo);
  });

private _initCategoryState = async () => {
    return Presentation.presentation
      .rulesets()
      .add(require("../../../../rulesets/Categories.json")) // tslint:disable-line:no-floating-promises
      .then((ruleset: RegisteredRuleset) => {
        this._categoryRuleset = ruleset;

        this._setViewType(ruleset).then(() => {
          // tslint:disable-line:no-floating-promises
          this._updateCategoriesWithViewport(this.state.activeView); // tslint:disable-line:no-floating-promises
        });
      });
  }

private async registerRuleset(ruleset: Ruleset) {
    this._registeredRuleset = await Presentation.presentation.rulesets().add(ruleset);
    if (this._isDisposed) {
      // ensure we don't keep a hanging registered ruleset if the data provider
      // gets destroyed before the ruleset finishes registration
      this.disposeRegisteredRuleset();
    }
  }