IDynamicRootQueryStep Why are steps hardcoded in HTML?

[rsoeteman]

Trying to implement IDynamicRootQueryStep but wonder why all Custom implementations need to go through the Custom Option in the UI? Why not have an alias on the interface itself and then all implemementations are shown in the UI that the user can select? (Like how almost everything in Umbraco)

<div class="umb-insert-code-boxes">
      <button type="button" class="btn-reset umb-insert-code-box" ng-click="vm.choose('NearestAncestorOrSelf')">
          <h2 class="umb-insert-code-box__title"><localize key="dynamicRoot_queryStepNearestAncestorOrSelfTitle">Nearest Ancestor Or Self</localize></h2>
          <p class="umb-insert-code-box__description"><localize key="dynamicRoot_queryStepNearestAncestorOrSelfDesc">Query the nearest ancestor or self that fits with one of the configured types</localize></p>
      </button>
      <button type="button" class="btn-reset umb-insert-code-box" ng-click="vm.choose('FurthestAncestorOrSelf')">
          <h2 class="umb-insert-code-box__title"><localize key="dynamicRoot_queryStepFurthestAncestorOrSelfTitle">Furthest Ancestor Or Self</localize></h2>
          <p class="umb-insert-code-box__description"><localize key="dynamicRoot_queryStepFurthestAncestorOrSelfDesc">Query the Furthest ancestor or self that fits with one of the configured types</localize></p>
      </button>
      <button type="button" class="btn-reset umb-insert-code-box" ng-click="vm.choose('NearestDescendantOrSelf')">
          <h2 class="umb-insert-code-box__title"><localize key="dynamicRoot_queryStepNearestDescendantOrSelfTitle">Nearest Descendant Or Self</localize></h2>
          <p class="umb-insert-code-box__description"><localize key="dynamicRoot_queryStepNearestDescendantOrSelfDesc">Query the nearest descendant or self that fits with one of the configured types</localize></p>
      </button>
      <button type="button" class="btn-reset umb-insert-code-box" ng-click="vm.choose('FurthestDescendantOrSelf')">
          <h2 class="umb-insert-code-box__title"><localize key="dynamicRoot_queryStepFurthestDescendantOrSelfTitle">Furthest Descendant Or Self</localize></h2>
          <p class="umb-insert-code-box__description"><localize key="dynamicRoot_queryStepFurthestDescendantOrSelfDesc">Query the Furthest descendant or self that fits with one of the configured types</localize></p>
      </button>
      <button type="button" class="btn-reset umb-insert-code-box" ng-click="vm.chooseCustom()">
          <h2 class="umb-insert-code-box__title"><localize key="dynamicRoot_queryStepCustomTitle">Custom</localize></h2>
          <p class="umb-insert-code-box__description"><localize key="dynamicRoot_queryStepCustomDesc">Query via a custom Query Step</localize></p>
      </button>
  </div>