GraphNG: Make the GraphNG / uPlot flow sync (#33215)

* Move data alignment to panel

* Make uPlot plugins sync, bring back alignment to GraphNG

* Update GraphNG-like panels

* Update explore graph ng

* Cleanup unnecessary tests

Co-authored-by: Leon Sorokin <leeoniya@gmail.com>

public/app/features/explore/ExploreGraphNGPanel.tsx

@@ -57,6 +57,7 @@ export function ExploreGraphNGPanel({
 }: Props) {
   const theme = useTheme();
   const [showAllTimeSeries, setShowAllTimeSeries] = useState(false);
+  const [structureRev, setStructureRev] = useState(1);
   const [fieldConfig, setFieldConfig] = useState<FieldConfigSource>({
     defaults: {
       color: {
@@ -95,6 +96,7 @@ export function ExploreGraphNGPanel({
 
   const onLegendClick = useCallback(
     (event: GraphNGLegendEvent) => {
+      setStructureRev((r) => r + 1);
       setFieldConfig(hideSeriesConfigFactory(event, fieldConfig, data));
     },
     [fieldConfig, data]
@@ -122,6 +124,7 @@ export function ExploreGraphNGPanel({
       <Collapse label="Graph" loading={isLoading} isOpen>
         <GraphNG
           data={seriesToShow}
+          structureRev={structureRev}
           width={width}
           height={400}
           timeRange={timeRange}
@@ -129,10 +132,28 @@ export function ExploreGraphNGPanel({
           legend={{ displayMode: LegendDisplayMode.List, placement: 'bottom', calcs: [] }}
           timeZone={timeZone}
         >
-          <ZoomPlugin onZoom={onUpdateTimeRange} />
-          <TooltipPlugin data={data} mode={TooltipDisplayMode.Single} timeZone={timeZone} />
-          <ContextMenuPlugin data={data} timeZone={timeZone} />
-          {annotations && <ExemplarsPlugin exemplars={annotations} timeZone={timeZone} getFieldLinks={getFieldLinks} />}
+          {(config, alignedDataFrame) => {
+            return (
+              <>
+                <ZoomPlugin config={config} onZoom={onUpdateTimeRange} />
+                <TooltipPlugin
+                  config={config}
+                  data={alignedDataFrame}
+                  mode={TooltipDisplayMode.Single}
+                  timeZone={timeZone}
+                />
+                <ContextMenuPlugin config={config} data={alignedDataFrame} timeZone={timeZone} />
+                {annotations && (
+                  <ExemplarsPlugin
+                    config={config}
+                    exemplars={annotations}
+                    timeZone={timeZone}
+                    getFieldLinks={getFieldLinks}
+                  />
+                )}
+              </>
+            );
+          }}
         </GraphNG>
       </Collapse>
     </>