+
+ );
+}
diff --git a/SwanProjects/src/components/help-tooltip.tsx b/SwanProjects/src/components/help-tooltip.tsx
new file mode 100644
index 00000000..bdd276f7
--- /dev/null
+++ b/SwanProjects/src/components/help-tooltip.tsx
@@ -0,0 +1,22 @@
+import React from 'react';
+import ReactTooltip from 'react-tooltip';
+
+export function HelpTooltip(props: {
+ id: string;
+ message: string;
+}): React.ReactElement
+ {
+
+
+
+ {props.label}
+
+
+ ?
+
+ `${dataTip}`}
+ />
+
+ );
+}
+
diff --git a/SwanProjects/src/components/project-header.tsx b/SwanProjects/src/components/project-header.tsx
new file mode 100644
index 00000000..f4f3d7e5
--- /dev/null
+++ b/SwanProjects/src/components/project-header.tsx
@@ -0,0 +1,57 @@
+import React from 'react';
+import { LabIcon, folderIcon } from '@jupyterlab/ui-components';
+import Button from '@material-ui/core/Button';
+import { ProjectData } from '../types';
+import { ThemeProvider } from './theme-provider';
+
+export function ProjectHeader(props: {
+ project?: ProjectData | null;
+ isProjectAllowedInPath: boolean;
+ cwd: string;
+ onClickChangeStack: () => void;
+}): JSX.Element {
+ const softwareStackMessage =
+ props.project?.stack?.type && props.project?.stack?.type != 'default'
+ ? `${props.project?.stack?.release} (${props.project?.stack?.release})`
+ : 'Default LCG release selected for this SWAN session.';
+
+ return (
+
+
+
+
+ {props.project && (
+ + {props.cwd || 'Home'} +
+
+
+
+
+ Notebooks in this folder run using the environment defined in {props.project?.full_path}
+
+ )}
+
+
+
+ Software Environment
+
+ {softwareStackMessage}
+
+
+ );
+ sections.push(section);
+ }
+ });
+
+ // Wrap the sections in body and content divs.
+ return (
+
+
+ {cat}
+
+ {toArray(
+ map(categories[cat], (item: ILauncher.IItemOptions) => {
+ return Card(
+ kernel,
+ item,
+ this,
+ this._commands,
+ this._callback
+ );
+ })
+ )}
+
+
+
+ );
+ }
+
+ protected translator: ITranslator;
+ private _trans: TranslationBundle;
+ private _commands: CommandRegistry;
+ private _callback: (widget: Widget) => void;
+ private _pending = false;
+ private _cwd = '';
+ private _spinner: Spinner; // EDIT
+}
+
+/**
+ * A pure tsx component for a launcher card.
+ *
+ * @param kernel - whether the item takes uses a kernel.
+ *
+ * @param item - the launcher item to render.
+ *
+ * @param launcher - the Launcher instance to which this is added.
+ *
+ * @param launcherCallback - a callback to call after an item has been launched.
+ *
+ * @returns a vdom `VirtualElement` for the launcher card.
+ */
+export function Card(
+ kernel: boolean,
+ item: ILauncher.IItemOptions,
+ launcher: any,
+ commands: CommandRegistry,
+ launcherCallback: (widget: Widget) => void
+): React.ReactElement
+ {
+ this.projectsPlugin.showProjectDialog(
+ this.cwd,
+ this.project || undefined
+ );
+ }}
+ />
+
+ {sections}
+
+
+
+ );
+}
+
+/**
+ * The namespace for module private data.
+ */
+namespace Private {
+ /**
+ * An incrementing counter for keys.
+ */
+ let id = 0;
+
+ /**
+ * An attached property for an item's key.
+ */
+ export const keyProperty = new AttachedProperty<
+ ILauncher.IItemOptions,
+ number
+ >({
+ name: 'key',
+ create: () => id++
+ });
+
+ /**
+ * Create a fully specified item given item options.
+ */
+ export function createItem(
+ options: ILauncher.IItemOptions
+ ): ILauncher.IItemOptions {
+ return {
+ ...options,
+ category: options.category || '',
+ rank: options.rank !== undefined ? options.rank : Infinity
+ };
+ }
+
+ /**
+ * A sort comparison function for a launcher item.
+ */
+ export function sortCmp(
+ a: ILauncher.IItemOptions,
+ b: ILauncher.IItemOptions,
+ cwd: string,
+ commands: CommandRegistry
+ ): number {
+ // First, compare by rank.
+ const r1 = a.rank;
+ const r2 = b.rank;
+ if (r1 !== r2 && r1 !== undefined && r2 !== undefined) {
+ return r1 < r2 ? -1 : 1; // Infinity safe
+ }
+
+ // Finally, compare by display name.
+ const aLabel = commands.label(a.command, { ...a.args, cwd });
+ const bLabel = commands.label(b.command, { ...b.args, cwd });
+ return aLabel.localeCompare(bLabel);
+ }
+}
diff --git a/SwanProjects/src/project-dialog.tsx b/SwanProjects/src/project-dialog.tsx
new file mode 100644
index 00000000..9f1c32e5
--- /dev/null
+++ b/SwanProjects/src/project-dialog.tsx
@@ -0,0 +1,89 @@
+import React from 'react';
+import { ReactWidget } from '@jupyterlab/apputils';
+import { Widget } from '@lumino/widgets';
+
+import Dialog from '@material-ui/core/Dialog';
+import DialogContent from '@material-ui/core/DialogContent';
+
+import { ThemeProvider } from './components/theme-provider';
+import { ProjectData } from './types';
+import { SwanProjectsPlugin } from './project-plugin';
+import { ProjectForm } from './project-form';
+
+export class ProjectDialog extends ReactWidget {
+ private theme: 'light' | 'dark' = 'light';
+ private stacks?: any;
+ private project?: ProjectData;
+ private path?: string;
+ private errorMessage = '';
+ private isLoading = true;
+ private isLoadingFormSubmit = false;
+
+ constructor(private projectsPlugin: SwanProjectsPlugin) {
+ super();
+ this.loadSoftwareStacks();
+ }
+
+ private async loadSoftwareStacks() {
+ this.isLoading = true;
+ this.stacks = await this.projectsPlugin.getAvailableSoftwareStacks();
+ this.isLoading = false;
+ if (this.isAttached) {
+ this.update();
+ }
+ }
+
+ private async onSubmitDialog(args: any) {
+ this.isLoadingFormSubmit = true;
+ this.update();
+ const result = await this.projectsPlugin.editProject(this.path!, args);
+ if (!result.status) {
+ this.errorMessage = result.errorMessage;
+ this.isLoadingFormSubmit = false;
+ this.update();
+ }
+ if (result.status) {
+ this.isLoadingFormSubmit = false;
+ await this.projectsPlugin.changeLauncherPath(this.path!);
+ Widget.detach(this);
+ }
+ }
+
+ public async showEditProjectDialog(path: string, project?: ProjectData) {
+ this.path = path;
+ this.project = project;
+ this.errorMessage = '';
+ if (this.isAttached) {
+ Widget.detach(this);
+ }
+ Widget.attach(this, document.body);
+ }
+
+ public render() {
+ return (
+
+ {kernel ? (
+ item.kernelIconUrl ? (
+ 
+ ) : (
+
+
+ {label[0].toUpperCase()}
+
+ )
+ ) : (
+
+
+ {label}
+
+
+
+
+ {availableReleases.map((release, index) => {
+ return (
+
+ );
+ })}
+
+
+
+ Release
+
+
+
+
+ {availablePlatforms.map((platform: any, index: any) => {
+ return (
+
+ );
+ })}
+
+
+
+ Platform
+
+
+
+
+
+ );
+
+ const form = (
+ <>
+
+
+ User environment
+
+
+
+
+ {stackType != 'default' ? (
+ stackOptionsControls
+ ) : (
+
+ Software Stack
+
+
+
+ onChangeStack('default')}
+ isSelected={stackType === 'default'}
+ />
+
+ {availableStacks.map(item => (
+ onChangeStack(item)}
+ isSelected={stackType === item}
+ />
+ ))}
+
+
+ {props.errorMessage && (
+ {props.errorMessage}
+ )}
+
+ );
+};
diff --git a/SwanProjects/src/project-plugin.ts b/SwanProjects/src/project-plugin.ts
new file mode 100644
index 00000000..94428c2e
--- /dev/null
+++ b/SwanProjects/src/project-plugin.ts
@@ -0,0 +1,74 @@
+import { Token } from '@lumino/coreutils';
+
+import {
+ JupyterFrontEnd,
+ JupyterFrontEndPlugin
+} from '@jupyterlab/application';
+import { ICommandPalette, IThemeManager } from '@jupyterlab/apputils';
+
+import {
+ editProjectRequest,
+ getAvailableSoftwareStacksRequest,
+ getProjectRequest
+} from './requests';
+import { ISWANStackOptions, ProjectData } from './types';
+import { ProjectDialog } from './project-dialog';
+
+export class SwanProjectsPlugin {
+ private availableSoftwareStacks?: ISWANStackOptions;
+ private projectDialog: ProjectDialog;
+
+ constructor(private jupyterApp: JupyterFrontEnd) {
+ this.projectDialog = new ProjectDialog(this);
+ }
+
+ async changeLauncherPath(path: string) {
+ return await this.jupyterApp.commands.execute('launcher:refresh');
+ }
+
+ async getAvailableSoftwareStacks() {
+ if (this.availableSoftwareStacks) {
+ return this.availableSoftwareStacks.stacks;
+ }
+ this.availableSoftwareStacks = await getAvailableSoftwareStacksRequest();
+ return this.availableSoftwareStacks!.stacks;
+ }
+
+ async getProjectForPath(path: string): Promise
+
+ {props.isLoading ? (
+
+
+ ) : (
+ form
+ )}
+
+
+
+
+