mongodb-js · mabaasit · May 22, 2025
diff --git a/packages/compass-data-modeling/src/components/analysis-failed.tsx b/packages/compass-data-modeling/src/components/analysis-failed.tsx
@@ -0,0 +1,50 @@
+import React from 'react';
+import { Banner, Button, css, spacing } from '@mongodb-js/compass-components';
+import { connect } from 'react-redux';
+import type { DataModelingState } from '../store/reducer';
+import { retryAnalysis } from '../store/analysis-process';
+
+const bannerStyles = css({
+  margin: spacing[200],
+  '& > div': {
+    display: 'flex',
+    alignItems: 'center',
+  },
+});
+
+const bannerButtonStyles = css({
+  marginLeft: 'auto',
+});
+
+const AnalysisFailed = ({
+  error,
+  onRetryClick,
+}: {
+  error: Error | null;
+  onRetryClick: () => void;
+}) => {
+  return (
+    <Banner variant="danger" className={bannerStyles}>
+      <div>Analysis failed: {error?.message}</div>
+      <Button
+        className={bannerButtonStyles}
+        size="xsmall"
+        onClick={onRetryClick}
+      >
+        Retry
+      </Button>
+    </Banner>
+  );
+};
+
+export default connect(
+  ({ step, analysisProgress: { error } }: DataModelingState) => {
+    if (step !== 'ANALYSIS_FAILED') {
+      throw new Error('Unexpected state when analyzing collections failed');
+    }
+    return { error };
+  },
+  {
+    onRetryClick: retryAnalysis,
+  }
+)(AnalysisFailed);
diff --git a/packages/compass-data-modeling/src/components/analysis-in-progress.tsx b/packages/compass-data-modeling/src/components/analysis-in-progress.tsx
@@ -0,0 +1,142 @@
+import React from 'react';
+import {
+  Body,
+  css,
+  Subtitle,
+  palette,
+  cx,
+  useDarkMode,
+  Button,
+  spacing,
+} from '@mongodb-js/compass-components';
+import { connect } from 'react-redux';
+import type { DataModelingState } from '../store/reducer';
+import { cancelAnalysis } from '../store/analysis-process';
+
+const containerStyles = css({
+  display: 'flex',
+  justifyContent: 'center',
+  alignItems: 'center',
+  height: '100%',
+});
+const contentStyles = css({
+  display: 'flex',
+  flexDirection: 'column',
+  gap: spacing[200],
+  width: 600,
+});
+
+const titleAndProgressStyles = css({
+  display: 'flex',
+  flexDirection: 'row',
+  gap: 8,
+  justifyContent: 'space-between',
+  alignItems: 'center',
+});
+
+const titleStyles = css({
+  color: palette.green.dark2,
+  textAlign: 'center',
+});
+
+const titleDarkStyles = css({
+  color: palette.green.light2,
+});
+
+const actionContainerStyles = css({
+  display: 'flex',
+  justifyContent: 'center',
+  marginTop: 32,
+});
+
+const progressBarStyles = css({
+  background: palette.gray.light1,
+  borderRadius: spacing[100],
+  height: spacing[200],
+  width: '100%',
+});
+
+const activeProgressBarStyles = css({
+  backgroundImage: `linear-gradient(90deg, ${palette.blue.light1}, ${palette.blue.dark1}, ${palette.blue.light1})`,
+  backgroundSize: '200% 100%',
+  borderRadius: 4,
+  height: '100%',
+  content: '""',
+  display: 'block',
+  animation: 'animateBar 1s ease-in infinite',
+  '@keyframes animateBar': {
+    '0%': {
+      backgroundPosition: '0 50%',
+    },
+    '50%': {
+      backgroundPosition: '100% 50%',
+    },
+    '100%': {
+      backgroundPosition: '0 50%',
+    },
+  },
+});
+
+type AnalysisInProgressProps = {
+  progress: number;
+  description: string;
+  onCancel: () => void;
+};
+
+const AnalysisInProgress = ({
+  progress,
+  description,
+  onCancel,
+}: AnalysisInProgressProps) => {
+  const darkMode = useDarkMode();
+  return (
+    <div className={containerStyles}>
+      <div className={contentStyles}>
+        <div className={titleAndProgressStyles}>
+          <Subtitle className={cx(titleStyles, darkMode && titleDarkStyles)}>
+            Analyzing Documents ...
+          </Subtitle>
+          <Body>{progress}%</Body>
+        </div>
+        <div>
+          <div className={progressBarStyles}>
+            <div
+              className={cx(activeProgressBarStyles)}
+              style={{ width: `${progress}%` }}
+            />
+          </div>
+        </div>
+        <Body>{description}</Body>
+        <div className={actionContainerStyles}>
+          <Button onClick={onCancel} variant="primaryOutline">
+            Cancel
+          </Button>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default connect(
+  ({
+    step,
+    analysisProgress: { currentAnalysisOptions, schemasAnalyzed },
+  }: DataModelingState) => {
+    if (!currentAnalysisOptions || step !== 'ANALYZING') {
+      throw new Error('Unexpected state when analyzing collections');
+    }
+    const progress = currentAnalysisOptions
+      ? (schemasAnalyzed / currentAnalysisOptions.collections.length) * 100
+      : 0;
+    const description = `Analyzing ${schemasAnalyzed + 1} of ${
+      currentAnalysisOptions.collections.length
+    } collections`;
+    return {
+      progress: Math.round(progress),
+      description,
+    };
+  },
+  {
+    onCancel: cancelAnalysis,
+  }
+)(AnalysisInProgress);
diff --git a/packages/compass-data-modeling/src/components/data-modeling.tsx b/packages/compass-data-modeling/src/components/data-modeling.tsx
@@ -1,31 +1,44 @@
 import React from 'react';
 import { connect } from 'react-redux';
+import { WorkspaceContainer } from '@mongodb-js/compass-components';
 import DiagramEditor from './diagram-editor';
 import SavedDiagramsList from './saved-diagrams-list';
 import NewDiagramFormModal from './new-diagram-form';
+import EditingDiagramToolbar from './editing-diagram-toolbar';
+import AnalysisInProgress from './analysis-in-progress';
+import AnalysisFailed from './analysis-failed';
 import type { DataModelingState } from '../store/reducer';
+import type { StepState } from '../store/step';
 
 type DataModelingPluginInitialProps = {
-  showList: boolean;
+  step: StepState;
 };
 
 const DataModeling: React.FunctionComponent<DataModelingPluginInitialProps> = ({
-  showList,
+  step,
 }) => {
   return (
-    <>
-      {showList ? (
-        <SavedDiagramsList></SavedDiagramsList>
+    <WorkspaceContainer
+      // Currently toolbar is only shown when editing a diagram or viewing a list of diagrams.
+      // When viewing diagrams, the component renders its own toolbar using VirtualGrid.
+      toolbar={step === 'EDITING' ? <EditingDiagramToolbar /> : null}
+    >
+      {step === 'NO_DIAGRAM_SELECTED' ? (
+        <SavedDiagramsList />
+      ) : step === 'ANALYZING' ? (
+        <AnalysisInProgress />
+      ) : step === 'ANALYSIS_FAILED' ? (
+        <AnalysisFailed />
       ) : (
-        <DiagramEditor></DiagramEditor>
+        <DiagramEditor />
       )}
       <NewDiagramFormModal></NewDiagramFormModal>
-    </>
+    </WorkspaceContainer>
   );
 };
 
-export default connect((state: DataModelingState) => {
+export default connect(({ step }: DataModelingState) => {
   return {
-    showList: state.step === 'NO_DIAGRAM_SELECTED',
+    step,
   };
 })(DataModeling);