influxdata / influxdata/ui

IOX data explorer: clicking graph view after graph properties panel closed leads to null pointer error

Open
#6,817 2 comments 0 reactions 0 assignees View on GitHub
Dominant language
TypeScript
Stars
117
Forks
51
Avg merge
2d 15h
Merged PRs (30d)
4

Description

## About the bug

**Steps to reproduce:**
List the minimal actions needed to reproduce the behavior.

Note Subject line is my best guess as to what went wrong. A few minutes before doing the following, the Graph Properties panel was closed in the last successful Graph View.

1. Generated test data using the JavaClient 3 version 0.3.0 and line protocol - e.g. `sConfig1,meas=gepard,id=0c61d4d8-4039-4275-832e-2bf7021dd834,team=Arsenal dbl=5.408528,flt=-34.791825 1696939159054`
2. Opened Data Explorer and built an SQL query
3. Modified the select statement as in the example below
4. Switched viewer to __Table__ results
5. Clicked __Run__ - and the results in the table look correct.
6. In viewer clicked __Graph__ to get the graph view. - Influxdb GUI reports "An InfluxDB error has occurred. Please report the issue
[here](https://github.com/influxdata/ui/issues/new?template=bug_report.md)"

__Select used__

```
SELECT dbl, flt, time
FROM "sConfig1"
WHERE
time >= now() - interval '1 hour'
AND
("dbl" IS NOT NULL OR "flt" IS NOT NULL)
Order by time
```
Note that `Order by time` was added, because previously the graph looked like a spider's web. This has worked in the past.

**Expected behavior:**
Expected to see a line Graph

**Actual behavior:**

Getting "an error has occured" as in screenshot below.

**Visual Proof:**

![Screenshot from 2023-10-10 14-19-09](https://github.com/influxdata/ui/assets/25881301/9e23fe59-48c7-4941-a9d9-4cd3d09d0c57)

## About your environment

**Environment info:**

Locally: Linux 6.2.0-34-generic x86_64 (ubuntu 22.04) - Chromium browser: 117

Latest public IOX in the cloud.

Account is "iox@bonitoo.io"

**Config:**

**Logs:**

From console.log

```
react-dom.production.min.js:216 TypeError: Cannot read properties of null (reading '0')
at ys (index.ts:30:36)
at j (view.tsx:248:29)
at sa (react-dom.production.min.js:157:137)
at qs (react-dom.production.min.js:267:460)
at Ml (react-dom.production.min.js:250:347)
at Tl (react-dom.production.min.js:250:278)
at Dl (react-dom.production.min.js:250:138)
at Al (react-dom.production.min.js:243:163)
at react-dom.production.min.js:123:115
at t.unstable_runWithPriority (scheduler.production.min.js:18:343)
```

Contributor guide

No contributing guide indexed for this repository

Research direction

Start in the Data Explorer graph-view path identified by view.tsx and the null-access stack frame in index.ts. Reproduce the SQL query flow by closing Graph Properties, switching from Table to Graph, and clicking Run; done means the graph renders a line instead of the null pointer error.

Written by the indexing model from the issue text.

Assessment

Tech stack
sql, typescript
Domain
data-visualization, frontend
Issue type
Bug
Difficulty
3/5
Estimated time
1-2 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
42/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.