Properly virtualize the table and fields list (#47)

* Merged

* Remove old LogsView file

* Swap to the new constants

* Revert unneeded changes

* Fixed double hash

src/datasource/components/Logs/LogsCell.tsx

@@ -6,7 +6,6 @@ import { Button, useTheme2 } from '@grafana/ui'
 import { dateTimeParse, getTimeZone } from '@grafana/data'
 import { DARK_THEME_HIGHLIGHTED_BACKGROUND, DARK_THEME_OUTLINE, LIGHT_THEME_HIGHLIGHTED_BACKGROUND, LIGHT_THEME_OUTLINE } from './styles'
 
-
 interface LogKeyValProps {
     field: string,
     val: any
@@ -305,8 +304,6 @@ const LogCell = ({ columnIndex, rowIndex, style, data }) => {
 
     style['borderBottom'] =  outline;
 
-
-
     // Header row
     if (rowIndex === 0) {
         return HeaderCell(column, style)

src/datasource/components/Logs/styles.ts

@@ -1,7 +1,7 @@
 
-export const DARK_THEME_BACKGROUND = '';
+export const DARK_THEME_BACKGROUND = '#181B1F';
 export const DARK_THEME_HIGHLIGHTED_BACKGROUND = '#343741'
-export const LIGHT_THEME_BACKGROUND = ''
+export const LIGHT_THEME_BACKGROUND = '#FFFFFF'
 export const LIGHT_THEME_HIGHLIGHTED_BACKGROUND = '#E6F1FA'
 export const LIGHT_THEME_OUTLINE = '1px solid rgba(36, 41, 46, 0.12)';
 export const DARK_THEME_OUTLINE = '1px solid rgba(204, 204, 220, 0.07)';

src/pages/explore.tsx

@@ -26,8 +26,6 @@ import { AppRootProps, DataFrame } from '@grafana/data';
 import {
   Button,
   DrawStyle,
-  HorizontalGroup,
-  VerticalGroup,
   IconButton,
   InlineField,
   InlineLabel,
@@ -43,7 +41,8 @@ import { Field, Log } from 'datasource/types';
 import FieldValueFrequency from '../datasource/components/FieldValueFrequency';
 import LogsView from 'datasource/components/Logs/LogsView';
 import { FixedSizeList as List } from 'react-window'
-import { DARK_THEME_HIGHLIGHTED_BACKGROUND, LIGHT_THEME_HIGHLIGHTED_BACKGROUND } from 'datasource/components/Logs/styles';
+import { DARK_THEME_BACKGROUND, DARK_THEME_HIGHLIGHTED_BACKGROUND, LIGHT_THEME_BACKGROUND, LIGHT_THEME_HIGHLIGHTED_BACKGROUND } from 'datasource/components/Logs/styles';
+import AutoSizer from 'react-virtualized-auto-sizer'
 
 /**
  * The main explore component for KalDB, using the new Grafana scenes implementation.
@@ -257,21 +256,30 @@ const KalDBFieldsList = (fields: Field[], topTenMostPopularFields: Field[]) => {
     return 'Unknown field';
   };
 
-  const ListItem = ({ index,  data }) => {
-    const field = data[index];
+  const ListItem = ({ index,  data, style }) => {
+    const field = data.fields[index];
+    const isTopTenMostPopularField = index <= data.topTenMostPopularFieldsLength;
+
+    const isDarkTheme = useTheme2().isDark;
+    let fieldBackgroundColor = isDarkTheme ? DARK_THEME_BACKGROUND : LIGHT_THEME_BACKGROUND;
+    if (isTopTenMostPopularField) {
+      fieldBackgroundColor= isDarkTheme ?  DARK_THEME_HIGHLIGHTED_BACKGROUND : LIGHT_THEME_HIGHLIGHTED_BACKGROUND;
+
+    }
 
     return (<div key={index} style={{
-      cursor: 'pointer'
+      cursor: 'pointer',
+      ...style
     }}>
+
       <FieldValueFrequency
         field={field}
         onPlusClick={(field: Field, value: string) => queryComponent.appendToQuery(`${field.name}: ${value}`)}
         onMinusClick={(field: Field, value: string) =>
           queryComponent.appendToQuery(`NOT ${field.name}: ${value}`)
         }
       >
-        <div>
-          <HorizontalGroup>
+        <div style={{backgroundColor: fieldBackgroundColor, display: 'flex', flexDirection: 'row', paddingLeft: '15px', alignItems: 'center', gap: '10px'}}>
             <i className={getIcon(field)} title={getTitle(field)} style={{ paddingTop: '12px' }}></i>
             <span
               style={{
@@ -281,62 +289,49 @@ const KalDBFieldsList = (fields: Field[], topTenMostPopularFields: Field[]) => {
             >
               {field.name}
             </span>
-          </HorizontalGroup>
         </div>
       </FieldValueFrequency>
     </div>);
   }
 
 
   return (
-    <div>
-      <div
-        style={{
-          backgroundColor: useTheme2().isDark ? DARK_THEME_HIGHLIGHTED_BACKGROUND : LIGHT_THEME_HIGHLIGHTED_BACKGROUND,
-          paddingLeft:'15px',
-        }}
-      >
-        <span
-          style={{
-            padding: '15px',
-            fontWeight: 'bold',
-          }}
-        >
-          Popular
-        </span>
-        <List
-          height={30*topTenMostPopularFields.length} 
-          width={"100%"}
-          itemCount={topTenMostPopularFields.length}
-          itemData={topTenMostPopularFields}
-          itemSize={30}
-          style={{
-            overflow: 'hidden',
-            maxWidth: '250px'
-          }}
-        >
-          {ListItem}
-        </List>
-      </div>
-      <div
-        style={{
-          paddingLeft:'15px',
-        }}
-      >
-        <List
-          height={33*fields.length} // TODO: This breaks virtualization since we're setting the height to the total. We should set it to a percentage of the screen.
-          width={"100%"}
-          itemCount={fields.length}
-          itemData={fields}
-          itemSize={30}
-          style={{
-            overflow: 'hidden',
-            maxWidth: '250px'
-          }}
-        >
-          {ListItem}
-        </List>
-        </div>
+    <div style={{width: '100%', height: '100%'}}>
+      <AutoSizer>
+        {
+          ({height, width}) => {
+            return (
+              <div
+                style={{
+                  paddingLeft:'15px',
+                  width: '100%', 
+                  height: '100%'
+                }}
+              >
+
+                <List
+                  height={height} 
+                  width={width}
+                  itemCount={topTenMostPopularFields.length + fields.length}
+                  itemData={
+                    {
+                      fields: [...topTenMostPopularFields, ...fields],
+                      topTenMostPopularFieldsLength: topTenMostPopularFields.length
+                    }}
+
+                  itemSize={30}
+                  style={{
+                    overflowX: 'hidden',
+                    maxWidth: '250px',
+                  }}
+                >
+                  {ListItem}
+                </List>
+              </div>
+            );
+          }
+        }
+      </AutoSizer>
     </div>
   );
 };
@@ -356,9 +351,9 @@ const KalDBFieldsRenderer = ({ model }: SceneComponentProps<FieldStats>) => {
       {loading ? (
         <LoadingPlaceholder text={'Loading...'} />
       ) : (
-        <VerticalGroup>
-          <HorizontalGroup spacing={'lg'} justify={'space-between'}>
-            <HorizontalGroup spacing={'xs'} justify={'flex-start'}>
+        <div style={{height: "100%", display: 'flex', flexDirection: 'column', justifyContent: 'flex-start'}}>
+          <div style={{display: 'flex', alignItems: 'center'}}>
+            <div style={{display: 'flex', justifyContent:'flex-start', alignItems: 'center'}}>
               <Button
                 size={'sm'}
                 variant={'secondary'}
@@ -373,12 +368,12 @@ const KalDBFieldsRenderer = ({ model }: SceneComponentProps<FieldStats>) => {
               >
                 Available fields:
               </span>
-            </HorizontalGroup>
+            </div>
 
             <Counter value={fields.length} />
-          </HorizontalGroup>
+          </div>
           {visible ? KalDBFieldsList(fields, topTenMostPopularFields) : null}
-        </VerticalGroup>
+        </div>
       )}
     </>
   );
@@ -708,6 +703,7 @@ const parseAndExtractLogData = (data: DataFrame[]) => {
           (value: object) => (
             new Map(Object.entries(value))
           ));
+        continue;
       }
 
       let mapped_field: Field = {