How to use the flightjs.component function in flightjs

$.each((span.attr('data-service-names') || '').split(','), (i, sn) => {
      const current = spansByService[sn] || [];
      current.push(id);
      spansByService[sn] = current;
    });
  });

  return {
    spans,
    childIds,
    parents,
    spansByService
  };
}

export default component(function trace() {
  /*
   * Next variables are setting up after initialization.
   * see initSpans
   *
   * this.spans = {};
   * this.parents = {};
   * this.childIds = {};
   * this.spansByService = {};
   */
  this.spansBackup = {};

  /* this is for a temporary rectangle which is shown on
   * user's mouse move over span view.*/
  this.rectElement = $('<div>').addClass('rect-element');

  /* This method stores original span details for later use.</div>

import LookbackUI from '../component_ui/lookback';
import InfoPanelUI from '../component_ui/infoPanel';
import InfoButtonUI from '../component_ui/infoButton';
import JsonPanelUI from '../component_ui/jsonPanel';
import TraceFiltersUI from '../component_ui/traceFilters';
import TracesUI from '../component_ui/traces';
import TimeStampUI from '../component_ui/timeStamp';
import BackToTop from '../component_ui/backToTop';
import {defaultTemplate} from '../templates';
import {searchDisabled} from '../templates';
import {contextRoot} from '../publicPath';
import {i18nInit} from '../component_ui/i18n';
import bootstrap // eslint-disable-line no-unused-vars
    from 'bootstrap/dist/js/bootstrap.bundle.min.js';

const DefaultPageComponent = component(function DefaultPage() {
  const sortOptions = [
    {value: 'service-percentage-desc', text: 'Service Percentage: Longest First'},
    {value: 'service-percentage-asc', text: 'Service Percentage: Shortest First'},
    {value: 'duration-desc', text: 'Longest First'},
    {value: 'duration-asc', text: 'Shortest First'},
    {value: 'timestamp-desc', text: 'Newest First'},
    {value: 'timestamp-asc', text: 'Oldest First'}
  ];

  const sortSelected = function getSelector(selectedSortValue) {
    return function selected() {
      if (this.value === selectedSortValue) {
        return 'selected';
      }
      return '';
    };

* See the License for the specific language governing permissions and
 * limitations under the License.
 */
import moment from 'moment';
import {component} from 'flightjs';
import $ from 'jquery';
import queryString from 'query-string';
import DependencyData from '../component_data/dependency';
import DependencyGraphUI from '../component_ui/dependencyGraph';
import ServiceDataModal from '../component_ui/serviceDataModal';
import TimeStampUI from '../component_ui/timeStamp';
import GoToDependencyUI from '../component_ui/goToDependency';
import {dependenciesTemplate} from '../templates';
import {i18nInit} from '../component_ui/i18n';

const DependencyPageComponent = component(function DependencyPage() {
  this.after('initialize', function() {
    window.document.title = 'Zipkin - Dependency';
    this.trigger(document, 'navigate', {route: 'zipkin/dependency'});

    this.$node.html(dependenciesTemplate());

    const {startTs, endTs} = queryString.parse(location.search);
    $('#endTs').val(endTs || moment().valueOf());
    // When #1185 is complete, the only visible granularity is day
    $('#startTs').val(startTs || moment().valueOf() - 86400000);

    DependencyData.attachTo('#dependency-container');
    DependencyGraphUI.attachTo('#dependency-container', {config: this.attr.config});
    ServiceDataModal.attachTo('#service-data-modal-container');
    TimeStampUI.attachTo('#end-ts');
    TimeStampUI.attachTo('#start-ts');

* (the "License"); you may not use this file except in compliance with
 * the License.  You may obtain a copy of the License at
 *
 *     http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * 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 {component} from 'flightjs';
import moment from 'moment';
import bootstrapDatepicker from 'bootstrap-datepicker'; // eslint-disable-line no-unused-vars

export default component(function timeStamp() {
  this.init = function() {
    this.$timestamp = this.$node.find('.timestamp-value');
    this.$date = this.$node.find('.date-input');
    this.$time = this.$node.find('.time-input');
    const ts = this.$timestamp.val();
    this.setDateTime((ts) ? moment(Number(ts)) : moment());
  };

  this.setDateTime = function(time) {
    this.$date.val(time.format('YYYY-MM-DD'));
    this.$time.val(time.format('HH:mm'));
  };

  this.setTimestamp = function(time) {
    this.$timestamp.val(time.valueOf());
  };

import $ from 'jquery';
import queryString from 'query-string';

import 'chosen-js';

  // Sorting based on the localCompare so that sorting can be
  // accomplished for non-ascii (non english) service names.
export function sortServiceNames(serviceNames) {
  if (serviceNames) {
    serviceNames.sort((a, b) =>
       a.localeCompare(b)
    );
  }
  return serviceNames;
}
export default component(function serviceName() {
  this.onChange = function() {
    Cookies.set('last-serviceName', this.$node.val());
    this.triggerChange(this.$node.val());
  };

  this.triggerChange = function(name) {
    this.$node.trigger('uiChangeServiceName', name);
  };

  this.updateServiceNameDropdown = function(ev, data) {
    $('#serviceName').empty();
    this.$node.append($($.parseHTML('<option value="all">all</option>')));
    const services = sortServiceNames(data.names);
    $.each(services, (i, item) =&gt; {
      $('<option>').val(item).text(item).appendTo('#serviceName');
    });</option>

var flight = require('flightjs');

module.exports = flight.component(componentA);

function componentA() {
  this.after('initialize', function() {
    console.log('componentA is ready!');
  });
}

* (the "License"); you may not use this file except in compliance with
 * the License.  You may obtain a copy of the License at
 *
 *     http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * 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 {component} from 'flightjs';
import $ from 'jquery';
import {i18nInit} from '../component_ui/i18n';

const NavbarUI = component(function navbar() {
  this.onNavigate = function(ev, {route}) {
    this.$node.find('[data-route]').each((i, el) => {
      const $el = $(el);
      if ($el.data('route') === route) {
        $el.addClass('active');
      } else {
        $el.removeClass('active');
      }
    });
  };

  this.after('initialize', function() {
    i18nInit('nav');
    this.on(document, 'navigate', this.onNavigate);
  });
});

* 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 {component} from 'flightjs';
import $ from 'jquery';
import FilterAllServicesUI from '../component_ui/filterAllServices';
import JsonPanelUI from '../component_ui/jsonPanel';
import SpanPanelUI from '../component_ui/spanPanel';
import TraceUI from '../component_ui/trace';
import ZoomOut from '../component_ui/zoomOutSpans';
import UploadTraceUI from '../component_ui/uploadTrace';
import {traceViewerTemplate} from '../templates';
import {contextRoot} from '../publicPath';

const TraceViewerPageComponent = component(function TraceViewerPage() {
  this.render = function(model) {
    try {
      this.$node.html(traceViewerTemplate({
        contextRoot,
        ...model
      }));
    } catch (e) {
      this.trigger('uiServerError',
                {desc: 'Failed to render template', message: e.message});
    }

    UploadTraceUI.attachTo('#traceFile');
  };

  this.attach = function() {
    FilterAllServicesUI.attachTo('#filterAllServices', {

* See the License for the specific language governing permissions and
 * limitations under the License.
 */
import {component} from 'flightjs';
import $ from 'jquery';
import TraceData from '../component_data/trace';
import FilterAllServicesUI from '../component_ui/filterAllServices';
import FullPageSpinnerUI from '../component_ui/fullPageSpinner';
import JsonPanelUI from '../component_ui/jsonPanel';
import SpanPanelUI from '../component_ui/spanPanel';
import TraceUI from '../component_ui/trace';
import ZoomOut from '../component_ui/zoomOutSpans';
import {traceTemplate} from '../templates';
import {contextRoot} from '../publicPath';

const TracePageComponent = component(function TracePage() {
  this.after('initialize', function() {
    window.document.title = 'Zipkin - Traces';
    $('body').tooltip({
      selector: '[data-toggle="tooltip"]'
    });
    TraceData.attachTo(document, {
      traceId: this.attr.traceId,
      logsUrl: this.attr.config('logsUrl')
    });
    this.on(document, 'tracePageModelView', function(ev, data) {
      this.$node.html(traceTemplate({
        contextRoot,
        ...data.modelview
      }));

      FilterAllServicesUI.attachTo('#filterAllServices', {

* (the "License"); you may not use this file except in compliance with
 * the License.  You may obtain a copy of the License at
 *
 *     http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * 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 {component} from 'flightjs';
import moment from 'moment';
import $ from 'jquery';

export default component(function dependency() {
  let services = {};
  let dependencies = {};

  this.getDependency = function(endTs, lookback) {
    let url = `api/v2/dependencies?endTs=${endTs}`;
    if (lookback) {
      url += `&lookback=${lookback}`;
    }
    $.ajax(url, {
      type: 'GET',
      dataType: 'json',
      success: links => {
        this.links = links.sort((a, b) => a.parent - b.parent || a.child - b.child);
        this.buildServiceData(links);
        this.trigger('dependencyDataReceived', links);
      },