Skip to content
This repository was archived by the owner on Jan 19, 2025. It is now read-only.

feat: load usage data into editor #499

Merged
merged 4 commits into from
May 19, 2022
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
106 changes: 45 additions & 61 deletions api-editor/gui/src/app/App.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -34,10 +34,7 @@ import OptionalForm from '../features/annotations/forms/OptionalForm';
import RenameForm from '../features/annotations/forms/RenameForm';
import { PythonFilter } from '../features/packageData/model/PythonFilter';
import PythonPackage from '../features/packageData/model/PythonPackage';
import {
parsePythonPackageJson,
PythonPackageJson,
} from '../features/packageData/model/PythonPackageBuilder';
import { parsePythonPackageJson, PythonPackageJson } from '../features/packageData/model/PythonPackageBuilder';
import PackageDataImportDialog from '../features/packageData/PackageDataImportDialog';
import {
selectShowPackageDataImportDialog,
Expand All @@ -48,22 +45,34 @@ import TreeView from '../features/packageData/treeView/TreeView';
import { useAppDispatch, useAppSelector } from './hooks';
import PythonFunction from '../features/packageData/model/PythonFunction';
import AttributeForm from '../features/annotations/forms/AttributeForm';
import { UsageCountJson, UsageCountStore } from '../features/usages/model/UsageCountStore';
import { selectShowUsageImportDialog } from '../features/usages/usageSlice';
import UsageImportDialog from '../features/usages/UsageImportDialog';

const App: React.FC = function () {
const [pythonPackage, setPythonPackage] = useState<PythonPackage>(
new PythonPackage('empty', 'empty', '0.0.1'),
);
const dispatch = useAppDispatch();
const currentUserAction = useAppSelector(selectCurrentUserAction);
const currentPathName = useLocation().pathname;

// Initialize package data
const [pythonPackage, setPythonPackage] = useState<PythonPackage>(new PythonPackage('empty', 'empty', '0.0.1'));

useEffect(() => {
// noinspection JSIgnoredPromiseFromCall
getPythonPackageFromIndexedDB(setPythonPackage);
}, []);

// Initialize usages
const [usages, setUsages] = useState<UsageCountStore>(new UsageCountStore());

useEffect(() => {
// noinspection JSIgnoredPromiseFromCall
getUsagesFromIndexedDB(setUsages);
});

// Initialize annotations
const annotationStore = useAppSelector(selectAnnotations);

const dispatch = useAppDispatch();
useEffect(() => {
dispatch(initializeAnnotations());
}, [dispatch]);
Expand All @@ -87,16 +96,11 @@ const App: React.FC = function () {
const pythonFilter = PythonFilter.fromFilterBoxInput(filter);
const filteredPythonPackage = pythonPackage.filter(pythonFilter);

const userActionTarget = pythonPackage.getByRelativePathAsString(
currentUserAction.target,
);
const userActionTarget = pythonPackage.getByRelativePathAsString(currentUserAction.target);

const showAnnotationImportDialog = useAppSelector(
selectShowAnnotationImportDialog,
);
const showPackageDataImportDialog = useAppSelector(
selectShowPackageDataImportDialog,
);
const showAnnotationImportDialog = useAppSelector(selectShowAnnotationImportDialog);
const showPackageDataImportDialog = useAppSelector(selectShowPackageDataImportDialog);
const showUsagesImportDialog = useAppSelector(selectShowUsageImportDialog);

const [showInferErrorDialog, setShowInferErrorDialog] = useState(false);
const [inferErrors, setInferErrors] = useState<string[]>([]);
Expand Down Expand Up @@ -133,67 +137,44 @@ const App: React.FC = function () {
resize="horizontal"
>
{currentUserAction.type === 'attribute' && (
<AttributeForm
target={userActionTarget || pythonPackage}
/>
<AttributeForm target={userActionTarget || pythonPackage} />
)}
{currentUserAction.type === 'boundary' && (
<BoundaryForm
target={userActionTarget || pythonPackage}
/>
<BoundaryForm target={userActionTarget || pythonPackage} />
)}
{currentUserAction.type === 'calledAfter' &&
userActionTarget instanceof PythonFunction && (
<CalledAfterForm target={userActionTarget} />
)}
{currentUserAction.type === 'constant' && (
<ConstantForm
target={userActionTarget || pythonPackage}
/>
{currentUserAction.type === 'calledAfter' && userActionTarget instanceof PythonFunction && (
<CalledAfterForm target={userActionTarget} />
)}
{currentUserAction.type === 'enum' && (
<EnumForm target={userActionTarget || pythonPackage} />
{currentUserAction.type === 'constant' && (
<ConstantForm target={userActionTarget || pythonPackage} />
)}
{currentUserAction.type === 'enum' && <EnumForm target={userActionTarget || pythonPackage} />}
{currentUserAction.type === 'group' && (
<GroupForm
target={userActionTarget || pythonPackage}
groupName={
(currentUserAction as GroupUserAction)
?.groupName
? (currentUserAction as GroupUserAction)
?.groupName
(currentUserAction as GroupUserAction)?.groupName
? (currentUserAction as GroupUserAction)?.groupName
: ''
}
/>
)}
{currentUserAction.type === 'move' && (
<MoveForm target={userActionTarget || pythonPackage} />
)}
{currentUserAction.type === 'none' && (
<TreeView pythonPackage={filteredPythonPackage} />
)}
{currentUserAction.type === 'move' && <MoveForm target={userActionTarget || pythonPackage} />}
{currentUserAction.type === 'none' && <TreeView pythonPackage={filteredPythonPackage} />}
{currentUserAction.type === 'optional' && (
<OptionalForm
target={userActionTarget || pythonPackage}
/>
)}
{currentUserAction.type === 'rename' && (
<RenameForm
target={userActionTarget || pythonPackage}
/>
<OptionalForm target={userActionTarget || pythonPackage} />
)}
{currentUserAction.type === 'rename' && <RenameForm target={userActionTarget || pythonPackage} />}
</GridItem>
<GridItem gridArea="rightPane" overflow="auto">
<SelectionView pythonPackage={pythonPackage} />
</GridItem>

{showAnnotationImportDialog && <AnnotationImportDialog />}
{showPackageDataImportDialog && (
<PackageDataImportDialog
setPythonPackage={setPythonPackage}
setFilter={setFilter}
/>
<PackageDataImportDialog setPythonPackage={setPythonPackage} setFilter={setFilter} />
)}
{showUsagesImportDialog && <UsageImportDialog setUsages={setUsages} />}
</Grid>
<Modal
isOpen={showInferErrorDialog}
Expand All @@ -219,18 +200,21 @@ const App: React.FC = function () {
);
};

const getPythonPackageFromIndexedDB = async function (
setPythonPackage: Setter<PythonPackage>,
) {
const getPythonPackageFromIndexedDB = async function (setPythonPackage: Setter<PythonPackage>) {
const storedPackage = (await idb.get('package')) as PythonPackageJson;
if (storedPackage) {
setPythonPackage(parsePythonPackageJson(storedPackage));
}
};

const setAnnotationsInIndexedDB = async function (
annotationStore: AnnotationsState,
) {
const getUsagesFromIndexedDB = async function (setUsages: Setter<UsageCountStore>) {
const storedUsages = (await idb.get('usages')) as UsageCountJson;
if (storedUsages) {
setUsages(UsageCountStore.fromJson(storedUsages));
}
};

const setAnnotationsInIndexedDB = async function (annotationStore: AnnotationsState) {
await idb.set('annotations', annotationStore);
};

Expand Down
2 changes: 2 additions & 0 deletions api-editor/gui/src/app/store.ts
Original file line number Diff line number Diff line change
Expand Up @@ -2,11 +2,13 @@ import { configureStore } from '@reduxjs/toolkit';
import { setupListeners } from '@reduxjs/toolkit/query';
import annotationReducer from '../features/annotations/annotationSlice';
import packageDataReducer from '../features/packageData/packageDataSlice';
import usageReducer from '../features/usages/usageSlice';

export const store = configureStore({
reducer: {
annotations: annotationReducer,
packageData: packageDataReducer,
usages: usageReducer,
},
});

Expand Down
Loading