How to use the terriajs-cesium/Source/Core/defined function in terriajs-cesium

enterUpdateAndExit(
    d3Element,
    titleSettings,
    margin,
    state,
    transitionDuration
  ) {
    // The title might be the legend, or a simple string.
    const title = d3Element
      .select("." + Title.className(titleSettings))
      .style("top", margin.top + "px");
    title
      .transition()
      .duration(transitionDuration)
      .style("opacity", Title.getHeight(titleSettings) > 0 ? 1 : 1e-6);
    if (defined(titleSettings)) {
      let titleData = state.data;
      if (titleSettings.type === "string") {
        titleData = [{ id: "_string__", name: titleSettings.title }];
      }

      // in d3 v4,  selection.data method returns new selections
      // rather than modifying the selection in-place.
      const titleComponents = title
        .selectAll(".title-component")
        .data(titleData, d => d.id);
      // Check whether there are multiple category names and/or column names.
      const numberOfCategories = d3Nest().key(d => d.categoryName).length;
      const numberOfColumnNames = d3Nest().key(d => d.name).length;
      // This is to only show the interesting parts of the name & categoryName in the title,
      // similar to Tooltip.js.
      const getName = function(d, index) {

descriptionFromFeature() {
    const feature = this.props.feature;
    // This description could contain injected 

updateForced = false;
                            if (that.isMounted()) {
                                that.forceUpdate();
                            }
                        });
                    }
                }

                // We also need to update on change of anything in props with a __knockoutSubscribable property.  This
                // property is added to arrays by knockout-es5 and is notified whenever the array is modified.
                // Without this, changes in an observable array passed as props won't trigger re-render of the component,
                // even if the array is used in rendering.  This is because Knockout observable arrays don't note a
                // dependency when accessing individual elements of the array.
                for (const prop in that.props) {
                    if (that.props.hasOwnProperty(prop)) {
                        if (defined(that.props[prop]) && defined(that.props[prop].__knockoutSubscribable)) {
                            that.__observeModelChangeSubscriptions.push(that.props[prop].__knockoutSubscribable.subscribe(disposeAndForceUpdate));
                        }
                    }
                }

                that.__observeModelChangeSubscriptions.push(computed.subscribe(disposeAndForceUpdate));

                return computed();
            });
        };

};
    const maxColumnNamesAndUnits = Math.max(
      (props.columnNames || []).length,
      (props.columnUnits || []).length
    );
    for (
      let columnNumber = 0;
      columnNumber < maxColumnNamesAndUnits;
      columnNumber++
    ) {
      tableStyleOptions.columns[columnNumber] = {};
      if (defined(props.columnNames) && props.columnNames[columnNumber]) {
        tableStyleOptions.columns[columnNumber].name =
          props.columnNames[columnNumber];
      }
      if (defined(props.columnUnits) && props.columnUnits[columnNumber]) {
        tableStyleOptions.columns[columnNumber].units =
          props.columnUnits[columnNumber];
      }
    }
    // Set the active columns via tableStyle too.
    // This is a bit inconsistent with the above, since above we index with column number
    // and here we may be indexing with number or id or name.
    // But it works. (TableStyle.columns may have multiple references to the same column.)
    if (defined(props.xColumn)) {
      tableStyleOptions.xAxis = props.xColumn;
    }
    if (defined(props.yColumns)) {
      props.yColumns.forEach(nameOrIndex => {
        tableStyleOptions.columns[nameOrIndex] = defaultValue(
          tableStyleOptions.columns[nameOrIndex],
          {}

function determineCatalogItem(nowViewing, feature) {
  if (!defined(nowViewing)) {
    // So that specs do not need to define a nowViewing.
    return undefined;
  }

  if (feature._catalogItem) {
    return feature._catalogItem;
  }

  // "Data sources" (eg. czml, geojson, kml, csv) have an entity collection defined on the entity
  // (and therefore the feature).
  // Then match up the data source on the feature with a now-viewing item's data source.
  //
  // Gpx, Ogr, WebFeatureServiceCatalogItem, ArcGisFeatureServerCatalogItem, WebProcessingServiceCatalogItem
  // all have a this._geoJsonItem, which we also need to check.
  let result;
  let i;

if (defined(item.discreteTime)) {
      const time = item.discreteTime;
      if (defined(item.dateFormat.currentTime)) {
        format = item.dateFormat;
        discreteTime = dateFormat(time, item.dateFormat.currentTime);
      } else {
        discreteTime = formatDateTime(time);
      }
    }

    // We explicitly check that the item has a .clock defined as some layers may have .availableDates but are unable to be
    // set to a specific date or shown on the timeline (layers that have timeseries chart data are one instance of this).
    if (
      !defined(item.clock) ||
      !defined(item.availableDates) ||
      item.availableDates.length === 0
    ) {
      return null;
    }
    return (
      <div>
        <div>Time:</div>
        <div>
          <div>
            <button title="{t(&quot;dateTime.previous&quot;)}" disabled="{!item.isPreviousTimeAvaliable()}">
              </button></div></div></div>

if (feature._catalogItem) {
    return feature._catalogItem;
  }

  // "Data sources" (eg. czml, geojson, kml, csv) have an entity collection defined on the entity
  // (and therefore the feature).
  // Then match up the data source on the feature with a now-viewing item's data source.
  //
  // Gpx, Ogr, WebFeatureServiceCatalogItem, ArcGisFeatureServerCatalogItem, WebProcessingServiceCatalogItem
  // all have a this._geoJsonItem, which we also need to check.
  let result;
  let i;
  let item;
  if (
    defined(feature.entityCollection) &&
    defined(feature.entityCollection.owner)
  ) {
    const dataSource = feature.entityCollection.owner;

    if (dataSource.name === LOCATION_MARKER_DATA_SOURCE_NAME) {
      return {
        name: "Location Marker"
      };
    }

    for (i = nowViewing.items.length - 1; i >= 0; i--) {
      item = nowViewing.items[i];
      if (item.dataSource === dataSource) {
        result = item;
        break;
      }

this._pickedFeaturesSubscription = reaction(() => this.terria.pickedFeatures, (pickedFeatures: PickedFeatures | undefined) => {
            if (defined(pickedFeatures)) {
                this.featureInfoPanelIsVisible = true;
                this.featureInfoPanelIsCollapsed = false;
            }
        });

catalogItem =>
          defined(catalogItem) && catalogItem.canFilterIntervalsByFeature
      )

renderStyleSelectorForLayer(layer) {
    const item = this.props.item;
    const styles = item.availableStyles[layer.name];
    if (!defined(styles) || styles.length < 2) {
      return null;
    }

    const label =
      item.layers.indexOf(",") >= 0 ? layer.title + " Style" : "Style";

    return (
      <div>
        <label>
          {label}
        </label>
        </div>