IOX data explorer: clicking graph view after graph properties panel closed leads to null pointer error
- 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:**

## 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