Trend: Support disconnect values and connect nulls options

[drew08t]

What this PR does / why we need it:
Currently in trend, a user has the option to connect all null values or null values within a certain threshold of time range. Users do not however have the ability to disconnect non-null values that are outside of a time range from each other. This adds the option for users to disconnect non-null values that are outside of a threshold of time range.

• Define refField inside of applyNullInsertThreshold for trend (currently undefined because not time field)
• Support connect nulls option - testing locally and it seems like this isn't working as expected

Screen.Recording.2023-07-07.at.9.29.20.PM.mov

Closes #70284

Key	Value
Panel	trend @ 10.1.0-pre (2b7af77)
Grafana	10.1.0-pre (2b7af77) // Open Source

Panel debug snapshot dashboard

{
  "panels": [
    {
      "datasource": {
        "type": "grafana",
        "uid": "grafana"
      },
      "fieldConfig": {
        "defaults": {
          "custom": {
            "drawStyle": "line",
            "lineInterpolation": "linear",
            "barAlignment": 0,
            "lineWidth": 1,
            "fillOpacity": 0,
            "gradientMode": "none",
            "spanNulls": false,
            "insertNulls": 25,
            "showPoints": "auto",
            "pointSize": 5,
            "stacking": {
              "mode": "none",
              "group": "A"
            },
            "axisPlacement": "auto",
            "axisLabel": "",
            "axisColorMode": "text",
            "scaleDistribution": {
              "type": "linear"
            },
            "axisCenteredZero": false,
            "hideFrom": {
              "tooltip": false,
              "viz": false,
              "legend": false
            },
            "thresholdsStyle": {
              "mode": "off"
            }
          },
          "color": {
            "mode": "palette-classic"
          },
          "mappings": [],
          "thresholds": {
            "mode": "absolute",
            "steps": [
              {
                "color": "green",
                "value": null
              },
              {
                "color": "red",
                "value": 80
              }
            ]
          }
        },
        "overrides": []
      },
      "gridPos": {
        "h": 13,
        "w": 15,
        "x": 0,
        "y": 0
      },
      "id": 2,
      "options": {
        "tooltip": {
          "mode": "single",
          "sort": "none"
        },
        "legend": {
          "showLegend": true,
          "displayMode": "list",
          "placement": "bottom",
          "calcs": []
        }
      },
      "targets": [
        {
          "refId": "A",
          "datasource": {
            "type": "grafana",
            "uid": "grafana"
          },
          "queryType": "snapshot",
          "snapshot": [
            {
              "schema": {
                "refId": "A",
                "fields": [
                  {
                    "name": "x",
                    "type": "number",
                    "typeInfo": {
                      "frame": "int64",
                      "nullable": true
                    },
                    "config": {}
                  },
                  {
                    "name": "y",
                    "type": "number",
                    "typeInfo": {
                      "frame": "int64",
                      "nullable": true
                    },
                    "config": {}
                  }
                ]
              },
              "data": {
                "values": [
                  [
                    0,
                    5,
                    10,
                    20,
                    30,
                    40,
                    60
                  ],
                  [
                    5,
                    5,
                    10,
                    20,
                    20,
                    20,
                    10
                  ]
                ]
              }
            }
          ]
        }
      ],
      "title": "Reproduced with embedded data",
      "type": "trend"
    },
    {
      "gridPos": {
        "h": 7,
        "w": 9,
        "x": 15,
        "y": 0
      },
      "id": 5,
      "options": {
        "content": "<table width=\"100%\">\n    <tr>\n      <th width=\"2%\">Panel</th>\n      <td >trend @ 10.1.0-pre (2b7af7798c)</td>\n    </tr>\n    <tr>\n      <th>Queries</th>\n      <td>A[testdata]</td>\n    </tr>\n    \n    <tr><th>Data</th><td> 1 frames, 2 fields, 7 rows </td></tr>\n    \n    <tr>\n      <th>Grafana</th>\n      <td>10.1.0-pre (2b7af7798c) // Open Source</td>\n    </tr>\n  </table>",
        "mode": "html"
      },
      "title": "Debug info",
      "type": "text"
    },
    {
      "id": 6,
      "title": "Original Panel JSON",
      "type": "text",
      "gridPos": {
        "h": 13,
        "w": 9,
        "x": 15,
        "y": 7
      },
      "options": {
        "content": "{\n  \"datasource\": {\n    \"type\": \"testdata\",\n    \"uid\": \"PD8C576611E62080A\"\n  },\n  \"fieldConfig\": {\n    \"defaults\": {\n      \"custom\": {\n        \"drawStyle\": \"line\",\n        \"lineInterpolation\": \"linear\",\n        \"barAlignment\": 0,\n        \"lineWidth\": 1,\n        \"fillOpacity\": 0,\n        \"gradientMode\": \"none\",\n        \"spanNulls\": false,\n        \"insertNulls\": 25,\n        \"showPoints\": \"auto\",\n        \"pointSize\": 5,\n        \"stacking\": {\n          \"mode\": \"none\",\n          \"group\": \"A\"\n        },\n        \"axisPlacement\": \"auto\",\n        \"axisLabel\": \"\",\n        \"axisColorMode\": \"text\",\n        \"scaleDistribution\": {\n          \"type\": \"linear\"\n        },\n        \"axisCenteredZero\": false,\n        \"hideFrom\": {\n          \"tooltip\": false,\n          \"viz\": false,\n          \"legend\": false\n        },\n        \"thresholdsStyle\": {\n          \"mode\": \"off\"\n        }\n      },\n      \"color\": {\n        \"mode\": \"palette-classic\"\n      },\n      \"mappings\": [],\n      \"thresholds\": {\n        \"mode\": \"absolute\",\n        \"steps\": [\n          {\n            \"color\": \"green\",\n            \"value\": null\n          },\n          {\n            \"color\": \"red\",\n            \"value\": 80\n          }\n        ]\n      }\n    },\n    \"overrides\": []\n  },\n  \"gridPos\": {\n    \"h\": 8,\n    \"w\": 12,\n    \"x\": 0,\n    \"y\": 0\n  },\n  \"id\": 3,\n  \"options\": {\n    \"tooltip\": {\n      \"mode\": \"single\",\n      \"sort\": \"none\"\n    },\n    \"legend\": {\n      \"showLegend\": true,\n      \"displayMode\": \"list\",\n      \"placement\": \"bottom\",\n      \"calcs\": []\n    }\n  },\n  \"targets\": [\n    {\n      \"csvContent\": \"x, y\\n0, 5\\n5, 5\\n10, 10\\n20, 20\\n30, 20\\n40, 20\\n60, 10\",\n      \"datasource\": {\n        \"type\": \"testdata\",\n        \"uid\": \"PD8C576611E62080A\"\n      },\n      \"refId\": \"A\",\n      \"scenarioId\": \"csv_content\"\n    }\n  ],\n  \"title\": \"Panel Title\",\n  \"type\": \"trend\"\n}",
        "mode": "code",
        "code": {
          "language": "json",
          "showLineNumbers": true,
          "showMiniMap": true
        }
      }
    },
    {
      "id": 3,
      "title": "Data from panel above",
      "type": "table",
      "datasource": {
        "type": "datasource",
        "uid": "-- Dashboard --"
      },
      "gridPos": {
        "h": 7,
        "w": 15,
        "x": 0,
        "y": 13
      },
      "options": {
        "showTypeIcons": true
      },
      "targets": [
        {
          "datasource": {
            "type": "datasource",
            "uid": "-- Dashboard --"
          },
          "panelId": 2,
          "withTransforms": true,
          "refId": "A"
        }
      ]
    }
  ],
  "schemaVersion": 37,
  "title": "Debug: Panel Title // 2023-07-07 21:30:03",
  "tags": [
    "debug",
    "debug-trend"
  ],
  "time": {
    "from": "1970-01-01T00:01:40.000Z",
    "to": "1970-01-01T00:33:20.000Z"
  }
}

[github-actions]

⚠️   Possible breaking changes

(Open the links below in a new tab to go to the correct steps)

grafana-ui has possible breaking changes (more info)

Console output
Read our guideline

[nmarrs]

This block determines how we handle user input for threshold - by default isTime is set to true - in the case of trend panel we are passing false in module.tsx

[tolzhabayev]

@drew08t can you please take a look at breaking changes report?

[leeoniya]

@drew08t can you please take a look at breaking changes report

GraphNG and its util funcs are all internal, so these arent real breaking changes. do we know if annotating them with @internal will help avoid this breaking-changes noise?