[Onboarding] Search detail document list tweaks

packages/kbn-search-index-documents/components/result/index.ts

@@ -12,4 +12,5 @@ export {
   resultMetaData,
   resultToFieldFromMappingResponse,
   resultToFieldFromMappings as resultToField,
+  reorderFieldsInImportance,
 } from './result_metadata';

packages/kbn-search-index-documents/components/result/result.scss

@@ -1,20 +1,36 @@
-.resultField:nth-child(odd) {
-  background-color: $euiColorLightestShade;
-}
-
 .resultField {
-  padding: $euiSizeXS $euiSizeS;
+  padding: 0;
+  border-bottom: 1px solid $euiColorLightShade;
+  position: relative;
+
+  &:last-child {
+    border-bottom: none;
+  }
 
-  > .euiTableRowCell {
+  >.euiTableRow:hover {
+    background-color: $euiColorEmptyShade;
+  }
+
+  >.euiTableRowCell {
     border-top: none;
     border-bottom: none;
 
-    > .euiTableCellContent {
-      padding: $euiSizeXS;
+    >.euiTableCellContent {
+      padding: $euiSizeS;
+      font-family: $euiCodeFontFamily;
+      color: $euiColorMediumShade;
     }
   }
 }
 
+.denseVectorFieldValue {
+  position: absolute;
+  right: 0;
+  top: $euiSizeS;
+  background-color: $euiColorEmptyShade;
+  padding: 0 $euiSizeS;
+}
+
 .resultExpandColumn {
   border-left: $euiBorderThin;
   align-items: flex-start;
@@ -31,4 +47,4 @@
   display: flex;
   align-items: center;
   justify-content: flex-start;
-}
+}

packages/kbn-search-index-documents/components/result/result.tsx

@@ -13,8 +13,8 @@ import {
   EuiButtonIcon,
   EuiFlexGroup,
   EuiFlexItem,
-  EuiPanel,
-  EuiSpacer,
+  EuiHorizontalRule,
+  EuiSplitPanel,
   EuiToolTip,
 } from '@elastic/eui';
 
@@ -66,99 +66,65 @@ export const Result: React.FC<ResultProps> = ({
   const toolTipContent = <>{tooltipText}</>;
 
   return (
-    <EuiPanel
-      hasBorder
-      data-test-subj="search-index-documents-result"
-      paddingSize={compactCard ? 's' : 'l'}
-    >
-      <EuiFlexGroup gutterSize="none">
-        <EuiFlexItem>
-          <EuiFlexGroup
-            direction="column"
-            gutterSize="none"
-            responsive={false}
-            justifyContent="spaceAround"
-          >
-            <EuiFlexItem grow={false}>
-              {compactCard && (
-                <ResultHeader
-                  title={
-                    metaData.title ??
-                    i18n.translate('searchIndexDocuments.result.title.id', {
-                      defaultMessage: 'Document id: {id}',
-                      values: { id: metaData.id },
-                    })
-                  }
-                  metaData={{
-                    ...metaData,
-                    onDocumentDelete,
-                  }}
-                />
-              )}
-              {!compactCard && (
-                <RichResultHeader
-                  showScore={showScore}
-                  title={
-                    metaData.title ??
-                    i18n.translate('searchIndexDocuments.result.title.id', {
-                      defaultMessage: 'Document id: {id}',
-                      values: { id: metaData.id },
-                    })
-                  }
-                  onTitleClick={onDocumentClick}
-                  metaData={{
-                    ...metaData,
-                    onDocumentDelete,
-                  }}
-                  rightSideActions={
-                    <EuiFlexItem grow={false}>
-                      <EuiToolTip position="left" content={toolTipContent}>
-                        <EuiButtonIcon
-                          iconType={isExpanded ? 'fold' : 'unfold'}
-                          color={isExpanded ? 'danger' : 'primary'}
-                          onClick={(e: React.MouseEvent<HTMLElement>) => {
-                            e.stopPropagation();
-                            setIsExpanded(!isExpanded);
-                          }}
-                          aria-label={tooltipText}
-                        />
-                      </EuiToolTip>
-                    </EuiFlexItem>
-                  }
-                />
-              )}
-            </EuiFlexItem>
-            <EuiFlexItem>
-              {!compactCard &&
-                ((isExpanded && fields.length > 0) ||
-                  (!isExpanded && fields.slice(0, defaultVisibleFields).length > 0)) && (
-                  <EuiSpacer size="l" />
-                )}
-              <ResultFields
-                isExpanded={isExpanded}
-                fields={isExpanded ? fields : fields.slice(0, defaultVisibleFields)}
+    <EuiSplitPanel.Outer hasBorder={true}>
+      <EuiSplitPanel.Inner paddingSize="m" color="plain" className="resultHeaderContainer">
+        <EuiFlexGroup gutterSize="none" alignItems="center">
+          <EuiFlexItem>
+            {compactCard && (
+              <ResultHeader
+                title={
+                  metaData.title ??
+                  i18n.translate('searchIndexDocuments.result.title.id', {
+                    defaultMessage: 'Document id: {id}',
+                    values: { id: metaData.id },
+                  })
+                }
+                metaData={metaData}
               />
-            </EuiFlexItem>
-          </EuiFlexGroup>
-        </EuiFlexItem>
-        {compactCard && (
+            )}
+
+            {!compactCard && (
+              <RichResultHeader
+                showScore={showScore}
+                title={
+                  metaData.title ??
+                  i18n.translate('searchIndexDocuments.result.title.id', {
+                    defaultMessage: 'Document id: {id}',
+                    values: { id: metaData.id },
+                  })
+                }
+                onTitleClick={onDocumentClick}
+                metaData={{
+                  ...metaData,
+                  onDocumentDelete,
+                }}
+              />
+            )}
+          </EuiFlexItem>
           <EuiFlexItem grow={false}>
-            <div className="resultExpandColumn">
-              <EuiToolTip position="left" content={toolTipContent}>
-                <EuiButtonIcon
-                  iconType={isExpanded ? 'fold' : 'unfold'}
-                  color="text"
-                  onClick={(e: React.MouseEvent<HTMLElement>) => {
-                    e.stopPropagation();
-                    setIsExpanded(!isExpanded);
-                  }}
-                  aria-label={tooltipText}
-                />
-              </EuiToolTip>
-            </div>
+            <EuiToolTip position="left" content={toolTipContent}>
+              <EuiButtonIcon
+                size="xs"
+                iconType={isExpanded ? 'fold' : 'unfold'}
+                color={isExpanded ? 'danger' : 'primary'}
+                data-test-subj={isExpanded ? 'documentShowLessFields' : 'documentShowMoreFields'}
+                onClick={(e: React.MouseEvent<HTMLElement>) => {
+                  e.stopPropagation();
+                  setIsExpanded(!isExpanded);
+                }}
+                aria-label={tooltipText}
+              />
+            </EuiToolTip>
           </EuiFlexItem>
-        )}
-      </EuiFlexGroup>
-    </EuiPanel>
+        </EuiFlexGroup>
+      </EuiSplitPanel.Inner>
+      <EuiHorizontalRule margin="none" />
+      <EuiSplitPanel.Inner paddingSize="m">
+        <ResultFields
+          isExpanded={isExpanded}
+          fields={isExpanded ? fields : fields.slice(0, defaultVisibleFields)}
+        />
+      </EuiSplitPanel.Inner>
+    </EuiSplitPanel.Outer>
   );
 };

packages/kbn-search-index-documents/components/result/result_field.tsx

@@ -10,7 +10,11 @@
 import React from 'react';
 
 import {
+  EuiBadge,
   EuiCodeBlock,
+  EuiCopy,
+  EuiFlexGroup,
+  EuiFlexItem,
   EuiIcon,
   EuiTableRow,
   EuiTableRowCell,
@@ -19,6 +23,7 @@ import {
 } from '@elastic/eui';
 
 import { euiThemeVars } from '@kbn/ui-theme';
+import { i18n } from '@kbn/i18n';
 import { ResultFieldProps } from './result_types';
 
 const iconMap: Record<string, string> = {
@@ -60,13 +65,84 @@ const iconMap: Record<string, string> = {
 };
 const defaultToken = 'questionInCircle';
 
+const PERMANENTLY_TRUNCATED_FIELDS = ['dense_vector', 'sparse_vector'];
+
+interface ResultValueProps {
+  fieldValue: string;
+  fieldType: string;
+  isExpanded?: boolean;
+}
+
+const ResultValue: React.FC<ResultValueProps> = ({ fieldValue, fieldType, isExpanded = false }) => {
+  if (
+    isExpanded &&
+    fieldType &&
+    (['object', 'array', 'nested'].includes(fieldType) || Array.isArray(fieldValue))
+  ) {
+    return (
+      <EuiCodeBlock language="json" transparentBackground fontSize="s">
+        {fieldValue}
+      </EuiCodeBlock>
+    );
+  } else if (PERMANENTLY_TRUNCATED_FIELDS.includes(fieldType)) {
+    return (
+      <>
+        <EuiText size="s" color="default">
+          {fieldValue}
+        </EuiText>
+        {fieldType === 'dense_vector' && (
+          <div className={'denseVectorFieldValue'}>
+            <EuiFlexGroup justifyContent="center" alignItems="center" gutterSize="s">
+              <EuiFlexItem>
+                <EuiBadge color="hollow">
+                  {i18n.translate('searchIndexDocuments.result.value.denseVector.dimLabel', {
+                    defaultMessage: '{value} dims',
+                    values: {
+                      value: JSON.parse(fieldValue).length,
+                    },
+                  })}
+                </EuiBadge>
+              </EuiFlexItem>
+              <EuiFlexItem>
+                <EuiCopy textToCopy={fieldValue}>
+                  {(copy) => (
+                    <EuiIcon
+                      type="copyClipboard"
+                      onClick={copy}
+                      data-test-subj="copyDenseVector"
+                      aria-label={i18n.translate(
+                        'searchIndexDocuments.result.value.denseVector.copy',
+                        {
+                          defaultMessage: 'Copy vector',
+                        }
+                      )}
+                    />
+                  )}
+                </EuiCopy>
+              </EuiFlexItem>
+            </EuiFlexGroup>
+          </div>
+        )}
+      </>
+    );
+  } else {
+    return (
+      <EuiText size="s" color="default">
+        {fieldValue}
+      </EuiText>
+    );
+  }
+};
+
 export const ResultField: React.FC<ResultFieldProps> = ({
   iconType,
   fieldName,
   fieldValue,
-  fieldType,
+  fieldType = 'object',
   isExpanded,
 }) => {
+  const shouldTruncate = !isExpanded || PERMANENTLY_TRUNCATED_FIELDS.includes(fieldType);
+
   return (
     <EuiTableRow className="resultField">
       <EuiTableRowCell className="resultFieldRowCell" width={euiThemeVars.euiSizeL} valign="middle">
@@ -79,31 +155,16 @@ export const ResultField: React.FC<ResultFieldProps> = ({
       </EuiTableRowCell>
       <EuiTableRowCell
         className="resultFieldRowCell"
-        width="25%"
+        width="20%"
         truncateText={!isExpanded}
         valign="middle"
       >
-        <EuiText size="xs">{fieldName}</EuiText>
+        <EuiText size="s" color="default">
+          {fieldName}
+        </EuiText>
       </EuiTableRowCell>
-      <EuiTableRowCell
-        className="resultFieldRowCell"
-        width={euiThemeVars.euiSizeXXL}
-        valign="middle"
-      >
-        <EuiIcon type="sortRight" color="subdued" />
-      </EuiTableRowCell>
-      <EuiTableRowCell className="resultFieldRowCell" truncateText={!isExpanded} valign="middle">
-        {(fieldType === 'object' ||
-          fieldType === 'array' ||
-          fieldType === 'nested' ||
-          Array.isArray(fieldValue)) &&
-        isExpanded ? (
-          <EuiCodeBlock language="json" overflowHeight="250" transparentBackground>
-            {fieldValue}
-          </EuiCodeBlock>
-        ) : (
-          <EuiText size="xs">{fieldValue}</EuiText>
-        )}
+      <EuiTableRowCell className="resultFieldRowCell" truncateText={shouldTruncate} valign="middle">
+        <ResultValue fieldValue={fieldValue} fieldType={fieldType} isExpanded={isExpanded} />
       </EuiTableRowCell>
     </EuiTableRow>
   );