TypeError: anomalyData is null

44 Views Asked by At

I managed to get the Watson Discovery API working. However when I enter a search string in the UI search field and hit enter, I receive the below error:

TypeError: anomalyData is null
hasAnomalies
C:/technology/WatsonDiscovery/watson-discovery-ui/discovery-nodejs/src/AnomalyDetection/index.jsx:41

  38 | }
  39 | 
  40 | static hasAnomalies(anomalyData) {
> 41 |   return anomalyData.some(result => result.anomaly);
     | ^  42 | }
  43 | 
  44 | static propTypes = {

AnomalyDetection
C:/technology/WatsonDiscovery/watson-discovery-ui/discovery-nodejs/src/AnomalyDetection/index.jsx:64

  61 | 
  62 | state = {
  63 |   showQuery: false,
> 64 |   showOverlay: !AnomalyDetection.hasAnomalies(this.props.anomalyData),
     | ^  65 | };
  66 | 
  67 | onShowQuery = () => {

Demo/this.fetchNewData/</<
C:/technology/WatsonDiscovery/watson-discovery-ui/discovery-nodejs/src/demo.jsx:101

   98 | }).then(response => {
   99 |   if (response.ok) {
  100 |     response.json().then(json => {
> 101 |       this.setState({ loading: false, data: parseQueryResults(json) });
      | ^  102 |     });
  103 |   } else {
  104 |     response

promise callback*Demo/this.fetchNewData/<
C:/technology/WatsonDiscovery/watson-discovery-ui/discovery-nodejs/src/demo.jsx:100

   97 |   body: JSON.stringify(query),
   98 | }).then(response => {
   99 |   if (response.ok) {
> 100 |     response.json().then(json => {
      | ^  101 |       this.setState({ loading: false, data: parseQueryResults(json) });
  102 |     });
  103 |   } else {

discovery-nodejs/src/AnomalyDetection/index.jsx has the following code:

import React, { Component } from 'react';
import classNames from 'classnames';
import { string, number, shape, arrayOf } from 'prop-types';
import {
  ResponsiveContainer,
  LineChart,
  Line,
  XAxis,
  YAxis,
  CartesianGrid,
  Tooltip,
  ComposedChart,
} from 'recharts';
import moment from 'moment';
import WidgetHeader from '../WidgetHeader/index';
import QuerySyntax from '../QuerySyntax/index';
import NoContent from '../NoContent/index';
import AnomalyDot from './AnomalyDot';
import AnomalyTooltip from './AnomalyTooltip';
import NoAnomaliesOverlay from './NoAnomaliesOverlay';
import queryBuilder from '../query-builder';

export default class AnomalyDetection extends Component {
  static widgetTitle() {
    return 'Anomaly Detection';
  }

  static widgetDescription() {
    return 'Anomalies - days with an unusually high number of mentions - can be detected in news articles over a specified timeframe.';
  }

  static formatDate(date) {
    return moment(date).format('MM/DD');
  }

  static hasAnomaly(payload) {
    return payload && payload.anomaly;
  }

  static hasAnomalies(anomalyData) {
    return anomalyData.some(result => result.anomaly);
  }

  static propTypes = {
    anomalyData: arrayOf(
      shape({
        key_as_string: string.isRequired,
        matching_results: number.isRequired,
        anomaly: number,
      })
    ).isRequired,
    query: shape({
      text: string.isRequired,
    }).isRequired,
    colorLine: string.isRequired,
  };

  static defaultProps = {
    colorLine: '#00a78f',
  };

  state = {
    showQuery: false,
    showOverlay: !AnomalyDetection.hasAnomalies(this.props.anomalyData),
  };

  onShowQuery = () => {
    this.setState({ showQuery: true });
  };

  onShowResults = () => {
    this.setState({ showQuery: false });
  };

  handleViewData = () => {
    this.setState({ showOverlay: false });
  };

  render() {
    const { query, anomalyData, colorLine } = this.props;
    return (
      <div>
        {!this.state.showQuery ? (
          <div className="anomaly-detection widget">
            <WidgetHeader
              title={AnomalyDetection.widgetTitle()}
              description={AnomalyDetection.widgetDescription()}
              onShowQuery={this.onShowQuery}
            />
            {anomalyData.length > 0 ? (
              <div className="anomaly-chart-container--div">
                <ResponsiveContainer height={250}>
                  <LineChart
                    data={anomalyData}
                    className={classNames('anomaly-chart--svg', {
                      faded: this.state.showOverlay,
                    })}
                    margin={{
                      ...ComposedChart.defaultProps.margin,
                      top: 15,
                      right: 15,
                    }}
                  >
                    <Line
                      type="linear"
                      dataKey="matching_results"
                      name="Matching Results"
                      stroke={colorLine}
                      strokeWidth="3"
                      dot={<AnomalyDot />}
                      activeDot={<AnomalyDot active />}
                    />
                    <CartesianGrid stroke="#ccc" />
                    <XAxis
                      dataKey="key_as_string"
                      tickFormatter={AnomalyDetection.formatDate}
                      tickLine={false}
                    />
                    <YAxis domain={['auto', 'auto']} tickLine={false} />
                    <Tooltip
                      labelFormatter={AnomalyDetection.formatDate}
                      content={<AnomalyTooltip />}
                    />
                  </LineChart>
                </ResponsiveContainer>
                {this.state.showOverlay && (
                  <NoAnomaliesOverlay text={query.text} onViewData={this.handleViewData} />
                )}
              </div>
            ) : (
              <NoContent query={query} message="There are no analytics available for your query." />
            )}
          </div>
        ) : (
          <QuerySyntax
            title={AnomalyDetection.widgetTitle()}
            query={queryBuilder.build(query, queryBuilder.widgetQueries.anomalyDetection)}
            response={{ results: anomalyData }}
            onGoBack={this.onShowResults}
          />
        )}
      </div>
    );
  }
}

I did search on this error. Couldn't find a solution. Any help to fix this error would be appreciated.

Thanks R

0

There are 0 best solutions below