Merge pull request #138 from diffix/edon/notebook-nav

Implement notebook side navigation

Author: edongashi

CHANGELOG.md

@@ -1,25 +1,26 @@
-### Version 0.1.4
-
- - Added UI feedback on data export.
- - Added support for column generalization.
- - Removed anonymized count value in low count rows.
- - Added relative noise column in combined view.
-
-### Version 0.1.3
-
-- Keep detected column types in anonymization output.
-- Include .NET libraries in deployment.
-- Added anonymization summary to notebooks.
-
-### Version 0.1.2
-
-- Fix `reference` CLI executable binary generation on MacOS.
-
-### Version 0.1.1
-
-- Added application icon.
-- Made path resolution for reference CLI absolute in production builds.
-- Dropped noise magnitude limiting.
-- Noisy `count` aggregator doesn't return `NULL` anymore on insufficient data.
-- Reduced the amount of rows used for data / result preview.
-- Added notice about rows limit in data / result preview.
+### Version 0.1.4
+
+- Added UI feedback on data export.
+- Added support for column generalization.
+- Removed anonymized count value in low count rows.
+- Added relative noise column in combined view.
+- Added side navigation in Notebooks.
+
+### Version 0.1.3
+
+- Keep detected column types in anonymization output.
+- Include .NET libraries in deployment.
+- Added anonymization summary to notebooks.
+
+### Version 0.1.2
+
+- Fix `reference` CLI executable binary generation on MacOS.
+
+### Version 0.1.1
+
+- Added application icon.
+- Made path resolution for reference CLI absolute in production builds.
+- Dropped noise magnitude limiting.
+- Noisy `count` aggregator doesn't return `NULL` anymore on insufficient data.
+- Reduced the amount of rows used for data / result preview.
+- Added notice about rows limit in data / result preview.

src/AnonymizationStep/AnonymizationStep.tsx

@@ -2,6 +2,7 @@ import React, { FunctionComponent, useEffect, useState } from 'react';
 import { Button, Descriptions, Divider, message, Result, Typography } from 'antd';
 import { DownloadOutlined } from '@ant-design/icons';
 
+import { NotebookNavAnchor, NotebookNavStep } from '../Notebook';
 import { anonymizer, computeAnonymizationStats, formatPercentage, useCachedData } from '../shared';
 import { AnonymizationStats, AnonymizedQueryResult, BucketColumn, TableSchema } from '../types';
 import { AnonymizedResultsTable } from './AnonymizedResultsTable';
@@ -34,6 +35,7 @@ function AnonymizationSummary({ result, loading }: CommonProps) {
 
   return (
     <div className="AnonymizationSummary loading notebook-step">
+      <NotebookNavAnchor step={NotebookNavStep.AnonymizationSummary} status={loading ? 'loading' : 'done'} />
       <Title level={3}>Anonymization summary</Title>
       {result.rows.length === MAX_ROWS && (
         <div className="mb-1">
@@ -78,21 +80,34 @@ async function exportResult(schema: TableSchema, bucketColumns: BucketColumn[])
 }
 
 function AnonymizationResults({ schema, bucketColumns, result, loading }: CommonProps) {
+  const [exported, setExported] = useState(false);
+  useEffect(() => {
+    setExported(false);
+  }, [bucketColumns]);
+
   return (
     <div className="AnonymizationResults notebook-step">
+      <NotebookNavAnchor step={NotebookNavStep.AnonymizedResults} status={loading ? 'loading' : 'done'} />
       <Title level={3}>Anonymized data</Title>
       <div className="mb-1">
         <Text>Here is what the result looks like:</Text>
         {result.rows.length === MAX_ROWS && <Text type="secondary"> (only the first {MAX_ROWS} rows are shown)</Text>}
       </div>
       <AnonymizedResultsTable loading={loading} result={result} />
+      <NotebookNavAnchor
+        step={NotebookNavStep.CsvExport}
+        status={loading ? 'inactive' : exported ? 'done' : 'active'}
+      />
       <Button
         icon={<DownloadOutlined />}
         className="AnonymizationResults-export-button"
         type="primary"
         size="large"
         disabled={loading || !result.rows.length}
-        onClick={() => exportResult(schema, bucketColumns)}
+        onClick={() => {
+          exportResult(schema, bucketColumns);
+          setExported(true);
+        }}
       >
         Export anonymized data to CSV
       </Button>
@@ -125,6 +140,8 @@ export const AnonymizationStep: FunctionComponent<AnonymizationStepProps> = ({ b
     case 'failed':
       return (
         <div className="AnonymizationStep notebook-step failed">
+          <NotebookNavAnchor step={NotebookNavStep.AnonymizationSummary} status="failed" />
+          <NotebookNavAnchor step={NotebookNavStep.AnonymizedResults} status="failed" />
           <Result status="error" title="Anonymization failed" subTitle="Something went wrong." />
         </div>
       );

src/ColumnSelectionStep/ColumnSelectionStep.tsx

@@ -4,6 +4,7 @@ import { CloseCircleOutlined } from '@ant-design/icons';
 import { useImmer } from 'use-immer';
 import { assign } from 'lodash';
 
+import { NotebookNavAnchor, NotebookNavStep } from '../Notebook';
 import { useMemoStable } from '../shared';
 import { BucketColumn, ColumnType, NumericGeneralization, StringGeneralization, TableSchema } from '../types';
 
@@ -140,6 +141,7 @@ export const ColumnSelectionStep: FunctionComponent<ColumnSelectionStepProps> =
   return (
     <>
       <div className="ColumnSelectionStep notebook-step">
+        <NotebookNavAnchor step={NotebookNavStep.ColumnSelection} status={anySelected ? 'done' : 'active'} />
         <Title level={3}>Select columns for anonymization</Title>
         <table className="ColumnSelectionStep-table">
           <thead>

src/FileLoadStep/FileLoadStep.tsx

@@ -2,6 +2,7 @@ import React, { FunctionComponent, useCallback, useState } from 'react';
 import { Divider, Typography, Upload } from 'antd';
 import { FileOutlined } from '@ant-design/icons';
 
+import { NotebookNavAnchor, NotebookNavStep } from '../Notebook';
 import { File } from '../types';
 
 const { Dragger } = Upload;
@@ -24,6 +25,7 @@ export const FileLoadStep: FunctionComponent<FileLoadStepProps> = ({ children, o
   return (
     <>
       <div className="FileLoadStep notebook-step">
+        <NotebookNavAnchor step={NotebookNavStep.CsvImport} status={file ? 'done' : 'active'} />
         <Title level={3}>Import data to anonymize</Title>
         <Dragger
           accept=".csv"

src/Notebook/Notebook.css

@@ -5,3 +5,14 @@
 .Notebook .notebook-step {
   margin: 32px 0;
 }
+
+.Notebook-nav {
+  position: fixed;
+  top: 60px;
+  left: 24px;
+  max-width: 300px;
+}
+
+.Notebook-content {
+  margin-left: 316px;
+}

src/Notebook/Notebook.tsx

@@ -1,8 +1,10 @@
 import React, { FunctionComponent } from 'react';
+
 import { FileLoadStep } from '../FileLoadStep';
 import { SchemaLoadStep } from '../SchemaLoadStep';
 import { ColumnSelectionStep } from '../ColumnSelectionStep';
 import { AnonymizationStep } from '../AnonymizationStep';
+import { NotebookNavProvider, NotebookNav } from './notebook-nav';
 
 import './Notebook.css';
 
@@ -12,18 +14,25 @@ export type NotebookProps = {
 
 export const Notebook: FunctionComponent<NotebookProps> = ({ onTitleChange }) => {
   return (
-    <div className="Notebook">
-      <FileLoadStep onLoad={(file) => onTitleChange(file.name)}>
-        {({ file }) => (
-          <SchemaLoadStep file={file}>
-            {({ schema }) => (
-              <ColumnSelectionStep schema={schema}>
-                {({ bucketColumns }) => <AnonymizationStep bucketColumns={bucketColumns} schema={schema} />}
-              </ColumnSelectionStep>
+    <NotebookNavProvider>
+      <div className="Notebook">
+        <div className="Notebook-nav">
+          <NotebookNav />
+        </div>
+        <div className="Notebook-content">
+          <FileLoadStep onLoad={(file) => onTitleChange(file.name)}>
+            {({ file }) => (
+              <SchemaLoadStep file={file}>
+                {({ schema }) => (
+                  <ColumnSelectionStep schema={schema}>
+                    {({ bucketColumns }) => <AnonymizationStep bucketColumns={bucketColumns} schema={schema} />}
+                  </ColumnSelectionStep>
+                )}
+              </SchemaLoadStep>
             )}
-          </SchemaLoadStep>
-        )}
-      </FileLoadStep>
-    </div>
+          </FileLoadStep>
+        </div>
+      </div>
+    </NotebookNavProvider>
   );
 };

src/Notebook/index.ts

@@ -1 +1,2 @@
 export * from './Notebook';
+export * from './notebook-nav';