Skip to content

Activity Directive Builder #1900

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
JosephVolosin wants to merge 8 commits into
base: develop
Choose a base branch
from
Open

Activity Directive Builder #1900

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
f40cdc4
Create Actiity Directive Builder
JosephVolosin Mar 27, 2026
5e56681
Add directive builder to drag & drop
JosephVolosin Apr 24, 2026
1a8351b
Linting, add start time set during drag & drop
JosephVolosin Apr 24, 2026
5527ef5
Initial call of validateArguments when type is selected
JosephVolosin May 7, 2026
eff85d5
Use common function for validateArguments
JosephVolosin May 7, 2026
d67c3f5
Log cleanup
JosephVolosin May 7, 2026
0456b15
Linting
JosephVolosin May 7, 2026
cb284a8
Show missing required parameters
JosephVolosin May 8, 2026
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
36 changes: 35 additions & 1 deletion src/components/ActivityList.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,17 +1,20 @@
<svelte:options immutable={true} />

<script lang="ts">
import { Button } from '@nasa-jpl/stellar-svelte';
import CloseIcon from '@nasa-jpl/stellar/icons/close.svg?component';
import UploadIcon from '@nasa-jpl/stellar/icons/upload.svg?component';
import { CirclePlus } from 'lucide-svelte';
import { plan, planModelActivityTypes, subsystemTags } from '../stores/plan';
import type { ActivityType } from '../types/activity';
import type { ActivityDirectiveInsertInput, ActivityType } from '../types/activity';
import type { User } from '../types/app';
import type { TimelineItemType } from '../types/timeline';
import effects from '../utilities/effects';
import { permissionHandler } from '../utilities/permissionHandler';
import { featurePermissions } from '../utilities/permissions';
import { tooltip } from '../utilities/tooltip';
import TimelineItemList from './TimelineItemList.svelte';
import ActivityDirectiveBuilder from './activity/ActivityDirectiveBuilder.svelte';
import Input from './form/Input.svelte';

export let user: User | null;
Expand All @@ -22,6 +25,8 @@
let isUploadVisible: boolean = false;
let uploadFiles: FileList | undefined;
let uploadFileInput: HTMLInputElement;
let directiveBuilder: ActivityDirectiveBuilder;
let activeDirectiveName: string = '';

$: if (user !== null && $plan !== null) {
hasUploadPermission = featurePermissions.activityDirective.canCreate(user, $plan);
Expand Down Expand Up @@ -49,8 +54,33 @@
onHideUpload();
}
}

function onCreateActivityDirective(directive: ActivityDirectiveInsertInput) {
if ($plan !== null && $plan.model) {
effects.createActivityDirectivePredefined(directive, $plan, user);
Copy link
Copy Markdown
Contributor

@AaronPlave AaronPlave May 11, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Should we await creation of the directive first in case it fails to create? I know a failure toast will appear, just means that if any sort of hiccup happens (unlikely) that user input from builder will be lost. Not sure if it is necessary though.

directiveBuilder.toggle();
}
}

function onShowDirectiveBuilder() {
directiveBuilder.toggle();
}
</script>

<ActivityDirectiveBuilder
bind:this={directiveBuilder}
directiveName={activeDirectiveName}
directiveWidth={200}
on:visibilityChange={visibility => {
if (!visibility.detail.isShown) {
activeDirectiveName = '';
}
}}
on:createActivityDirective={directive => {
onCreateActivityDirective(directive.detail.directive);
}}
{user}
/>
<TimelineItemList
items={$planModelActivityTypes}
chartType="activity"
Expand All @@ -59,6 +89,7 @@
{getFilterValueFromItem}
filterOptions={$subsystemTags.map(s => ({ color: s.color || '', label: s.name, value: s.id }))}
filterName="Subsystem"
{user}
>
<div slot="header" class="upload-container" hidden={!isUploadVisible}>
<button class="close-upload" type="button" on:click={onHideUpload}>
Expand Down Expand Up @@ -105,6 +136,9 @@
>
<UploadIcon />
</button>
<Button variant="ghost" size="icon-sm" aria-label="Add Activity" on:click={onShowDirectiveBuilder}>
Copy link
Copy Markdown
Contributor

@AaronPlave AaronPlave May 11, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Button needs permission gating.

Copy link
Copy Markdown
Contributor

@AaronPlave AaronPlave May 11, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Could this be an outline button that matches the height of the neighboring buttons?

<CirclePlus size={16} />
</Button>
</svelte:fragment>
</TimelineItemList>

Expand Down
1 change: 1 addition & 0 deletions src/components/ExternalEventTypeList.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,4 +18,5 @@
filterOptions={$externalEventTypes.map(t => ({ label: t.name, value: t.name }))}
filterName="Event Type"
{getFilterValueFromItem}
user={null}
/>
1 change: 1 addition & 0 deletions src/components/ResourceList.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -77,6 +77,7 @@
{getFilterValueFromItem}
{loading}
let:prop={item}
user={null}
>
<div slot="header" class="upload-container" hidden={!isUploadVisible}>
<button class="close-upload" type="button" on:click={onHideUpload}>
Expand Down
48 changes: 46 additions & 2 deletions src/components/TimelineItemList.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,8 +4,11 @@
import { Button } from '@nasa-jpl/stellar-svelte';
import ChevronDownIcon from '@nasa-jpl/stellar/icons/chevron_down.svg?component';
import { capitalize } from 'lodash-es';
import { CirclePlus, GripVertical } from 'lucide-svelte';
import { CirclePlus, Filter, GripVertical } from 'lucide-svelte';
import { plan } from '../stores/plan';
import { view, viewAddFilterToRow } from '../stores/views';
import type { ActivityDirectiveInsertInput } from '../types/activity';
import type { User } from '../types/app';
import type {
ChartType,
Layer,
Expand All @@ -14,7 +17,9 @@
TimelineItemListFilterOption,
TimelineItemType,
} from '../types/timeline';
import effects from '../utilities/effects';
import { tooltip } from '../utilities/tooltip';
import ActivityDirectiveBuilder from './activity/ActivityDirectiveBuilder.svelte';
import Input from './form/Input.svelte';
import LayerPicker from './LayerPicker.svelte';
import Loading from './Loading.svelte';
Expand All @@ -31,6 +36,7 @@
export let filterName: string = 'Filter';
export let getFilterValueFromItem: (item: TimelineItemType) => string | number;
export let loading: boolean = false;
export let user: User | null;
Copy link
Copy Markdown
Contributor

@AaronPlave AaronPlave May 11, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

missing a default for all of these export let user: User | null;


let activeItemIndex: number = -1;
let menu: Menu;
Expand All @@ -41,6 +47,8 @@
let layerPicker: LayerPicker;
let layerPickerIndividual: LayerPicker;
let timelines: Timeline[] = [];
let directiveBuilder: ActivityDirectiveBuilder;
let activeDirectiveName: string = '';

$: filteredItems = filterItems(items, filterText ? textFilters.concat(filterText) : textFilters, selectedFilters);
$: timelines = $view?.definition.plan.timelines || [];
Expand Down Expand Up @@ -138,8 +146,34 @@
}
return undefined;
}

function onCreateActivityDirective(directive: ActivityDirectiveInsertInput) {
if ($plan !== null && $plan.model) {
effects.createActivityDirectivePredefined(directive, $plan, user);
directiveBuilder.toggle();
}
}

function onShowDirectiveBuilder(activityType: string) {
directiveBuilder.setCurrentActivityType(activityType);
directiveBuilder.toggle();
}
</script>

<ActivityDirectiveBuilder
Copy link
Copy Markdown
Contributor

@AaronPlave AaronPlave May 11, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Two builder windows can be simultaneously opened - one from a specific type and one from the general circle plus button. Any way to consolidate to a single builder instance since the builder is copied in 3 places?

bind:this={directiveBuilder}
directiveName={activeDirectiveName}
directiveWidth={200}
on:visibilityChange={visibility => {
if (!visibility.detail.isShown) {
activeDirectiveName = '';
}
}}
on:createActivityDirective={directive => {
onCreateActivityDirective(directive.detail.directive);
}}
{user}
/>
<div class="timeline-item-list">
<div class="timeline-item-list-filters">
<input
Expand Down Expand Up @@ -299,10 +333,20 @@
let:builders
>
<Button {builders} variant="ghost" size="icon-sm" aria-label="Add{capitalize(typeName)}-{item.name}">
Copy link
Copy Markdown
Contributor

@AaronPlave AaronPlave May 11, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Should this be "Filter" instead of "Add" for aria-label?

<CirclePlus size={16} />
<Filter size={16} />
</Button>
</LayerPicker>
</div>
<div use:tooltip={{ content: 'Add New Directive', placement: 'top' }} class="flex items-center">
<Button
variant="ghost"
size="icon-sm"
aria-label="Add{capitalize(typeName)}-{item.name}"
on:click={() => onShowDirectiveBuilder(item.name)}
>
<CirclePlus size={16} />
</Button>
</div>
<div class="drag">
<GripVertical size={16} />
</div>
Expand Down
Loading
Loading