quietlight/skraak.app - Change 3BOFJXKAMRCAQSJQD3AZWYG64A3IO54F4773ZOVWHJSVOQY34CSQC

wrsk on editable selections

Created by AEj8dahVWy718uSSFPe9VSRJ5qX5G8pC2zvFzJJ8yzBd on July 9, 2025

3BOFJXKAMRCAQSJQD3AZWYG64A3IO54F4773ZOVWHJSVOQY34CSQC

Dependencies

In channels

main

Change contents

Insertion in src/components/FileTable.tsx at line 141 [4.1]

[4.4552]

[5.8805]

  const [datasetPermissions, setDatasetPermissions] = useState<string[]>([]);

Replacement in src/components/FileTable.tsx at line 329 [4.1]

∅:D[6.3984] → [4.9927:10033]

B:BD[4.9927] → [4.9927:10033]

    // Fetch dataset owner if we don't have it yet
    if (!datasetOwnerId && requiredParams.datasetId) {

[6.3984]

[4.10033]

    // Fetch dataset owner and permissions if we don't have them yet
    if ((!datasetOwnerId || datasetPermissions.length === 0) && requiredParams.datasetId) {

Replacement in src/components/FileTable.tsx at line 335 [4.1]
B:BD[4.10122] → [4.10122:10147]
```
  // Fetch dataset owner
```
[4.10122]
[4.10147]
```
  // Fetch dataset owner and permissions
```

Insertion in src/components/FileTable.tsx at line 350 [4.1]

[4.10626]

        const permissions = result.data?.permissions || result.permissions || [];

Insertion in src/components/FileTable.tsx at line 352 [4.1]
[4.10660]
[4.10660]
```
        setDatasetPermissions(permissions);
```

Replacement in src/components/FileTable.tsx at line 355 [4.1]

B:BD[4.10690] → [4.10690:10751]

      console.error("Error fetching dataset owner:", error);

[4.10690]

[4.10751]

      console.error("Error fetching dataset owner and permissions:", error);

Insertion in src/components/FileTable.tsx at line 590 [4.1]

[4.17061]

  // Fetch dataset permissions when component mounts or dataset changes
  useEffect(() => {
    const targetDatasetId = requiredParams.datasetId || datasetId;
    if (isAuthenticated && !authLoading && targetDatasetId && datasetPermissions.length === 0) {
      void fetchDatasetOwner(targetDatasetId).catch(console.error);
    }
  }, [isAuthenticated, authLoading, requiredParams.datasetId, datasetId, datasetPermissions.length, fetchDatasetOwner]);

Insertion in src/components/FileTable.tsx at line 837 [4.1]

[4.26287]

        canEditSelections={(() => {
          const canEdit = datasetPermissions.includes('EDIT');
          if (process.env.NODE_ENV === "development") {
            console.log("FileTable permissions check:", {
              datasetPermissions,
              canEdit
            });
          }
          return canEdit;
        })()}

Replacement in src/components/File.tsx at line 2 [7.1]

B:BD[7.135] → [8.101:169]

import { AlertCircle, Pause, Play, Upload, X } from "lucide-react";

[7.135]

[9.228]

import { AlertCircle, Check, Edit, Pause, Play, Upload, X } from "lucide-react";

Insertion in src/components/File.tsx at line 40 [7.1]

[10.1571]

  }>;
}
interface EditableSelectionData {
  description: string;
  distance: string; // "", "close", "ok", "far"
  note: string;
  speciesId: string;
  speciesCertainty: number | null;
  callTypeId: string;
  callTypeCertainty: number | null;
}
interface SpeciesOption {
  id: string;
  label: string;
  callTypes: Array<{
    id: string;
    label: string;

Insertion in src/components/File.tsx at line 68 [7.1]

[11.176]

[7.574]

  canEditSelections?: boolean; // Whether user can edit selections

Insertion in src/components/File.tsx at line 102 [7.1]

[10.1834]

[7.867]


  // Edit state management
  editingSelectionId: string | null;
  editingData: EditableSelectionData | null;
  savingSelection: boolean;
  speciesOptions: SpeciesOption[];
  speciesLoading: boolean;

Insertion in src/components/File.tsx at line 117 [7.1]
[9.726]
[7.958]
```
  canEditSelections = false,
```
Insertion in src/components/File.tsx at line 119 [7.1]
[7.966]
[12.25962]
```
  const { getAccessToken, user } = useKindeAuth();
  
```

Insertion in src/components/File.tsx at line 125 [7.1]

[9.836]

[12.26167]

      console.log("File component canEditSelections:", canEditSelections);
      console.log("File component datasetOwnerId:", datasetOwnerId);
      console.log("File component user:", user);

Replacement in src/components/File.tsx at line 129 [7.1]
B:BD[12.26173] → [12.26173:26192]
B:BD[12.26192] → [9.837:838]
∅:D[9.838] → [7.966:1017]
∅:D[12.26195] → [7.966:1017]
B:BD[7.966] → [7.966:1017]
```
  }, [datasetId]);
  const { getAccessToken, user } = useKindeAuth();
```
[12.26173]
[7.1017]
```
  }, [datasetId, canEditSelections, datasetOwnerId, user]);
```

Insertion in src/components/File.tsx at line 150 [7.1]

[10.1966]

[7.1383]

    editingSelectionId: null,
    editingData: null,
    savingSelection: false,
    speciesOptions: [],
    speciesLoading: false,

Insertion in src/components/File.tsx at line 511 [7.1]

[3.1441]

  }, []);
  // Update editing data
  const handleFieldChange = useCallback((field: keyof EditableSelectionData, value: string | number | null) => {
    setState(prev => ({
      ...prev,
      editingData: prev.editingData ? {
        ...prev.editingData,
        [field]: value
      } : null
    }));
  }, []);
  // Render editable or static field based on edit mode
  const renderEditableField = useCallback((
    selection: SelectionData, 
    fieldType: 'description' | 'distance' | 'note' | 'species' | 'callType',
    currentValue: string,
    fieldKey?: keyof EditableSelectionData
  ) => {
    const isEditing = state.editingSelectionId === selection.id;
    
    if (!isEditing) {
      return currentValue;
    }
    if (!state.editingData || !fieldKey) {
      return currentValue;
    }
    switch (fieldType) {
      case 'description':
      case 'note':
        return (
          <input
            type="text"
            value={String(state.editingData[fieldKey] || "")}
            onChange={(e) => handleFieldChange(fieldKey, e.target.value)}
            className="w-full px-2 py-1 text-sm border border-gray-300 rounded focus:outline-none focus:ring-1 focus:ring-blue-500"
            placeholder={fieldType === 'description' ? 'Enter description' : 'Enter comment'}
          />
        );
      
      case 'distance':
        return (
          <select
            value={String(state.editingData[fieldKey] || "")}
            onChange={(e) => handleFieldChange(fieldKey, e.target.value)}
            className="w-full px-2 py-1 text-sm border border-gray-300 rounded focus:outline-none focus:ring-1 focus:ring-blue-500"
          >
            <option value="">Select distance</option>
            <option value="close">Close</option>
            <option value="ok">OK</option>
            <option value="far">Far</option>
          </select>
        );
      
      case 'species':
        return (
          <select
            value={String(state.editingData.speciesId || "")}
            onChange={(e) => {
              handleFieldChange('speciesId', e.target.value);
              // Reset call type when species changes
              handleFieldChange('callTypeId', "");
            }}
            className="w-full px-2 py-1 text-sm border border-gray-300 rounded focus:outline-none focus:ring-1 focus:ring-blue-500"
          >
            <option value="">Select species</option>
            {state.speciesOptions.map(species => (
              <option key={species.id} value={species.id}>
                {species.label}
              </option>
            ))}
          </select>
        );
      
      case 'callType': {
        const selectedSpecies = state.speciesOptions.find(s => s.id === state.editingData?.speciesId);
        const callTypeOptions = selectedSpecies?.callTypes || [];
        
        return (
          <select
            value={String(state.editingData.callTypeId || "")}
            onChange={(e) => handleFieldChange('callTypeId', e.target.value)}
            className="w-full px-2 py-1 text-sm border border-gray-300 rounded focus:outline-none focus:ring-1 focus:ring-blue-500"
            disabled={!state.editingData.speciesId}
          >
            <option value="">Select call type</option>
            {callTypeOptions.map(callType => (
              <option key={callType.id} value={callType.id}>
                {callType.label}
              </option>
            ))}
          </select>
        );
      }
      
      default:
        return currentValue;
    }
  }, [state.editingSelectionId, state.editingData, state.speciesOptions, handleFieldChange]);
  // Fetch species options for the dataset
  const fetchSpeciesOptions = useCallback(async () => {
    if (!datasetId || !canEditSelections) return;
    setState(prev => ({ ...prev, speciesLoading: true }));
    try {
      const accessToken = await getAccessToken();
      const response = await fetch(`/api/species?datasetId=${encodeURIComponent(datasetId)}`, {
        headers: {
          Authorization: `Bearer ${accessToken}`,
        },
      });
      if (response.ok) {
        const data = await response.json();
        setState(prev => ({ 
          ...prev, 
          speciesOptions: data.data || [], 
          speciesLoading: false 
        }));
      }
    } catch (error) {
      console.error("Error fetching species options:", error);
      setState(prev => ({ 
        ...prev, 
        speciesOptions: [], 
        speciesLoading: false 
      }));
    }
  }, [datasetId, canEditSelections, getAccessToken]);
  // Start editing a selection
  const handleEditSelection = useCallback((selection: SelectionData) => {
    // Get current filter data for the selection
    const filterData = state.selectedFilterId
      ? selection.filters.find(f => f.id === state.selectedFilterId)
      : selection.filters[0];
    const firstSpecies = filterData?.species?.[0];
    const firstCallType = firstSpecies?.callTypes?.[0];
    setState(prev => ({
      ...prev,
      editingSelectionId: selection.id,
      editingData: {
        description: selection.description || "",
        distance: getMetadataValue(selection.metadata, "distance"),
        note: getMetadataValue(selection.metadata, "note"),
        speciesId: firstSpecies?.id || "",
        speciesCertainty: firstSpecies?.certainty || null,
        callTypeId: firstCallType?.id || "",
        callTypeCertainty: firstCallType?.certainty || null,
      }
    }));
  }, [state.selectedFilterId, getMetadataValue]);
  // Cancel editing
  const handleCancelEdit = useCallback(() => {
    setState(prev => ({
      ...prev,
      editingSelectionId: null,
      editingData: null,
    }));

Insertion in src/components/File.tsx at line 680 [7.1]

[13.625]

[10.4122]

  // Save selection changes
  const handleSaveSelection = useCallback(async () => {
    if (!state.editingSelectionId || !state.editingData || !canEditSelections) return;
    setState(prev => ({ ...prev, savingSelection: true }));
    try {
      const accessToken = await getAccessToken();
      // Save metadata (distance, note)
      const metadataResponse = await fetch(`/api/files/selections/${state.editingSelectionId}/metadata`, {
        method: 'PATCH',
        headers: {
          'Authorization': `Bearer ${accessToken}`,
          'Content-Type': 'application/json',
        },
        body: JSON.stringify({
          metadata: {
            distance: state.editingData.distance,
            note: state.editingData.note,
          }
        }),
      });
      if (!metadataResponse.ok) {
        throw new Error('Failed to update metadata');
      }
      // Save labels (species, call types) if species is selected
      if (state.editingData.speciesId) {
        const labels = [{
          speciesId: state.editingData.speciesId,
          certainty: state.editingData.speciesCertainty,
          callTypes: state.editingData.callTypeId ? [{
            callTypeId: state.editingData.callTypeId,
            certainty: state.editingData.callTypeCertainty,
          }] : [],
        }];
        const labelsResponse = await fetch(`/api/files/selections/${state.editingSelectionId}/labels`, {
          method: 'PATCH',
          headers: {
            'Authorization': `Bearer ${accessToken}`,
            'Content-Type': 'application/json',
          },
          body: JSON.stringify({
            labels,
            filterId: state.selectedFilterId,
          }),
        });
        if (!labelsResponse.ok) {
          throw new Error('Failed to update labels');
        }
      }
      // Refresh selections data
      if (file) {
        await fetchSelections(file.id);
      }
      // Exit edit mode
      handleCancelEdit();
    } catch (error) {
      console.error("Error saving selection:", error);
      // TODO: Show error message to user
    } finally {
      setState(prev => ({ ...prev, savingSelection: false }));
    }
  }, [state.editingSelectionId, state.editingData, state.selectedFilterId, canEditSelections, getAccessToken, file, fetchSelections, handleCancelEdit]);

Insertion in src/components/File.tsx at line 913 [7.1]

[8.6548]

[10.6304]


  // Fetch species options when component opens and editing is enabled
  useEffect(() => {
    if (isOpen && canEditSelections && datasetId) {
      void fetchSpeciesOptions().catch(console.error);
    }
  }, [isOpen, canEditSelections, datasetId, fetchSpeciesOptions]);

Insertion in src/components/File.tsx at line 1234 [7.1]

[14.1257]

                        {canEditSelections && (
                          <TableHead className="w-[120px] py-3 font-bold text-sm uppercase text-center">Actions</TableHead>
                        )}

Replacement in src/components/File.tsx at line 1267 [7.1]

∅:D[14.1932] → [13.3774:3839]

B:BD[13.3774] → [13.3774:3839]

                                  {selection.description || "-"}

[14.1932]

[14.1933]

                                  {renderEditableField(selection, 'description', selection.description || "-", 'description')}

Replacement in src/components/File.tsx at line 1270 [7.1]

B:BD[3.1740] → [3.1740:1825]

                                  {getMetadataValue(selection.metadata, "distance")}

[3.1740]

[3.1825]

                                  {renderEditableField(selection, 'distance', getMetadataValue(selection.metadata, "distance"), 'distance')}

Replacement in src/components/File.tsx at line 1273 [7.1]

B:BD[3.1956] → [3.1956:2037]

                                  {getMetadataValue(selection.metadata, "note")}

[3.1956]

[3.2037]

                                  {renderEditableField(selection, 'note', getMetadataValue(selection.metadata, "note"), 'note')}

Insertion in src/components/File.tsx at line 1279 [7.1]

[14.2392]

                                {canEditSelections && (
                                  <TableCell className="text-center">
                                    <div className="flex justify-center gap-2">
                                      {state.editingSelectionId === selection.id ? (
                                        <>
                                          <Button
                                            onClick={handleSaveSelection}
                                            variant="ghost"
                                            size="sm"
                                            className="p-1 h-8 w-8 text-green-600 hover:text-green-700 hover:bg-green-50"
                                            disabled={state.savingSelection}
                                            title="Save changes"
                                          >
                                            <Check className="h-4 w-4" />
                                          </Button>
                                          <Button
                                            onClick={handleCancelEdit}
                                            variant="ghost"
                                            size="sm"
                                            className="p-1 h-8 w-8 text-red-600 hover:text-red-700 hover:bg-red-50"
                                            disabled={state.savingSelection}
                                            title="Cancel editing"
                                          >
                                            <X className="h-4 w-4" />
                                          </Button>
                                        </>
                                      ) : (
                                        <Button
                                          onClick={() => handleEditSelection(selection)}
                                          variant="ghost"
                                          size="sm"
                                          className="p-1 h-8 w-8"
                                          title="Edit selection"
                                        >
                                          <Edit className="h-4 w-4" />
                                        </Button>
                                      )}
                                    </div>
                                  </TableCell>
                                )}

Replacement in src/components/File.tsx at line 1343 [7.1]

∅:D[14.3058] → [13.5374:5443]

B:BD[13.5374] → [13.5374:5443]

                                      {selection.description || "-"}

[14.3058]

[3.2083]

                                      {renderEditableField(selection, 'description', selection.description || "-", 'description')}

Replacement in src/components/File.tsx at line 1346 [7.1]

B:BD[3.2222] → [3.2222:2311]

                                      {getMetadataValue(selection.metadata, "distance")}

[3.2222]

[14.3059]

                                      {renderEditableField(selection, 'distance', getMetadataValue(selection.metadata, "distance"), 'distance')}

Replacement in src/components/File.tsx at line 1349 [7.1]

B:BD[3.2402] → [3.2402:2487]

                                      {getMetadataValue(selection.metadata, "note")}

[3.2402]

[3.2487]

                                      {renderEditableField(selection, 'note', getMetadataValue(selection.metadata, "note"), 'note')}

Replacement in src/components/File.tsx at line 1351 [7.1]

∅:D[3.2536] → [14.3108:3224]

B:BD[14.3108] → [14.3108:3224]

                                    <TableCell className="whitespace-normal break-words">{species.name}</TableCell>

[3.2536]

[14.3224]

                                    <TableCell className="whitespace-normal break-words">
                                      {renderEditableField(selection, 'species', species.name, 'speciesId')}
                                    </TableCell>

Insertion in src/components/File.tsx at line 1361 [7.1]

[14.3570]

                                    {canEditSelections && (
                                      <TableCell className="text-center">
                                        <div className="flex justify-center gap-2">
                                          {state.editingSelectionId === selection.id ? (
                                            <>
                                              <Button
                                                onClick={handleSaveSelection}
                                                variant="ghost"
                                                size="sm"
                                                className="p-1 h-8 w-8 text-green-600 hover:text-green-700 hover:bg-green-50"
                                                disabled={state.savingSelection}
                                                title="Save changes"
                                              >
                                                <Check className="h-4 w-4" />
                                              </Button>
                                              <Button
                                                onClick={handleCancelEdit}
                                                variant="ghost"
                                                size="sm"
                                                className="p-1 h-8 w-8 text-red-600 hover:text-red-700 hover:bg-red-50"
                                                disabled={state.savingSelection}
                                                title="Cancel editing"
                                              >
                                                <X className="h-4 w-4" />
                                              </Button>
                                            </>
                                          ) : (
                                            <Button
                                              onClick={() => handleEditSelection(selection)}
                                              variant="ghost"
                                              size="sm"
                                              className="p-1 h-8 w-8"
                                              title="Edit selection"
                                            >
                                              <Edit className="h-4 w-4" />
                                            </Button>
                                          )}
                                        </div>
                                      </TableCell>
                                    )}

Replacement in src/components/File.tsx at line 1422 [7.1]

∅:D[14.4222] → [13.7073:7140]

B:BD[13.7073] → [13.7073:7140]

                                    {selection.description || "-"}

[14.4222]

[14.4223]

                                    {renderEditableField(selection, 'description', selection.description || "-", 'description')}

Replacement in src/components/File.tsx at line 1425 [7.1]

B:BD[3.2625] → [3.2625:2712]

                                    {getMetadataValue(selection.metadata, "distance")}

[3.2625]

[3.2712]

                                    {renderEditableField(selection, 'distance', getMetadataValue(selection.metadata, "distance"), 'distance')}

Replacement in src/components/File.tsx at line 1428 [7.1]

B:BD[3.2847] → [3.2847:2930]

                                    {getMetadataValue(selection.metadata, "note")}

[3.2847]

[3.2930]

                                    {renderEditableField(selection, 'note', getMetadataValue(selection.metadata, "note"), 'note')}

Replacement in src/components/File.tsx at line 1430 [7.1]

∅:D[3.2977] → [14.4270:4384]

B:BD[14.4270] → [14.4270:4384]

                                  <TableCell className="whitespace-normal break-words">{species.name}</TableCell>

[3.2977]

[14.4384]

                                  <TableCell className="whitespace-normal break-words">
                                    {renderEditableField(selection, 'species', species.name, 'speciesId')}
                                  </TableCell>

Replacement in src/components/File.tsx at line 1438 [7.1]

B:BD[14.4520] → [14.4520:4635]

                                  <TableCell className="whitespace-normal break-words">{callType.name}</TableCell>

[14.4520]

[14.4635]

                                  <TableCell className="whitespace-normal break-words">
                                    {renderEditableField(selection, 'callType', callType.name, 'callTypeId')}
                                  </TableCell>

Insertion in src/components/File.tsx at line 1446 [7.1]

[14.4771]

                                  {canEditSelections && (
                                    <TableCell className="text-center">
                                      <div className="flex justify-center gap-2">
                                        {state.editingSelectionId === selection.id ? (
                                          <>
                                            <Button
                                              onClick={handleSaveSelection}
                                              variant="ghost"
                                              size="sm"
                                              className="p-1 h-8 w-8 text-green-600 hover:text-green-700 hover:bg-green-50"
                                              disabled={state.savingSelection}
                                              title="Save changes"
                                            >
                                              <Check className="h-4 w-4" />
                                            </Button>
                                            <Button
                                              onClick={handleCancelEdit}
                                              variant="ghost"
                                              size="sm"
                                              className="p-1 h-8 w-8 text-red-600 hover:text-red-700 hover:bg-red-50"
                                              disabled={state.savingSelection}
                                              title="Cancel editing"
                                            >
                                              <X className="h-4 w-4" />
                                            </Button>
                                          </>
                                        ) : (
                                          <Button
                                            onClick={() => handleEditSelection(selection)}
                                            variant="ghost"
                                            size="sm"
                                            className="p-1 h-8 w-8"
                                            title="Edit selection"
                                          >
                                            <Edit className="h-4 w-4" />
                                          </Button>
                                        )}
                                      </div>
                                    </TableCell>
                                  )}

Replacement in TODO.md at line 6 [15.62710]
B:BD[15.62882] → [15.62882:62909]
```
[X] check and update auth 
```
[15.62882]
[16.105954]
```
[X] check and update auth
```

Replacement in TODO.md at line 18 [15.62710]

B:BD[15.62966] → [17.337:417]

[X] fix soft delete on cyclic_recording patterns, file_metadata, moth_metadata

[18.3312]

[17.417]

[X] fix soft delete on cyclic_recording patterns, file_metadata, moth_metadata

Replacement in TODO.md at line 28 [15.62710]
∅:D[2.1322] → [13.8286:8338]
B:BD[13.8286] → [13.8286:8338]
```
[ ] fix floating dropdown
[ ] add distance metadata
```
[2.1322]
[13.8338]
```
[X] fix floating dropdown
[X] add distance metadata
```

Insertion in TODO.md at line 31 [15.62710]

[13.8362]

[ ] in file table, make sure label and label sub_type are active=true
[ ] find selections with no label associated, query
[ ] check that all permission checking are permission based, not role.
[ ] remove everything to do with owner fields
[ ] relook at file metadata, render columns

Deletion in TODO.md at line 45 [15.62710]
B:BD[19.12063] → [19.12063:12064]