On Page refresh in concore-editor, fileHandle of a graph is set to undefined and 'Save' button problem occurs.

[Rahuljagwani]

Its more or less an issue, but I want to discuss it first.

To reproduce:
Upload or make graphML files on concore-editor, you will be able to save them but after page refresh or reload takes place, on clicking 'save' button 'Switch to Edge/Chrome' appears. This is happening because fileHandle(s) ( which are of form FileSystemFileHandle ) of the loaded graphs are set to 'undefined'.

The first thought that comes in mind after above problem is to store fileHandle of respective graph in local storage but it will not work as FileSystemFileHandle of a file cannot be stored into local storage directly because its a sort of interface which has parent interface FileSystemHandle. FileSystemFileHandle cannot be replicated programmatically in JavaScript as only browser can create it when window.showSaveFilePicker , window.showOpenFilePicker etc. are called.

The possible solution can be after page reload (only after page reload), on clicking 'Save' , instead of window.showSaveFilePicker (which is generally executed) window.showOpenFilePicker executes and a file picker dialog will appear for which user will again have to select the file which is already loaded. (Problem with this solution: It can be irritating for user to again select the file from file picker dialog )

Another approach which can be taken is to simply display an alert warning to user before page refresh that graphs have to be loaded again if page reload takes place.

( NOTE : For graphs which are to be saved for the first time, it is possible to store their file handles in local storage as they will be null initially. Therefore no problem for these graphs. )

Asking for suggestions regarding above.

@pradeeban

[pradeeban]

"Another approach which can be taken is to simply display an alert warning to user before page refresh that graphs have to be loaded again if page reload takes place."

This is what we are doing right now - but without the explicit alert against the "Refresh"/Reload option of the browser. So, we have learned not to touch the Refresh button.

Once you hit that refresh, the browser simply forgets whatever it was holding. I fear the issue is not just with "Save" but with much other stuff. For example, why a "Refresh" makes the loaded studies (via "Upload Directory") and many erratic behaviors after that?

For the "Save," we could make the "Save" function as a "Save As" once a refresh is hit. This is similar to a PR you made recently.

But I think we are looking at patchwork fixes to a fundamental flow of how Refresh is handled. Currently, it is like a dangerous weapon, making everything disappear without even asking you.

So, perhaps, your suggestion makes sense.

Can we throw an Alert "The Refresh Button will reset the loaded files and directory and will make you lose your progress. Do you want to continue?" with an option of "Ok" and "Cancel."

It is like a Forced Restart of the Computer. We should hit it only when we are stuck with something random and dangerous. We need to prevent users from mistakenly invoking that.

[Rahuljagwani]

Can we throw an Alert "The Refresh Button will reset the loaded files and directory and will make you lose your progress. Do you want to continue?" with an option of "Ok" and "Cancel."

Yes we can do this, should I send a PR regarding this?

For the "Save," we could make the "Save" function as a "Save As" once a refresh is hit. This is similar to a PR you made recently.

It will again save the already saved file if we apply this which will not be good for user interaction.

[pradeeban]

Good points on both. Sure, please send a PR, making sure you have deployed it in your own concore-editor instance in github.io too.

[parteekcoder]

@pradeeban @Rahuljagwani
I think we can use this type of thing

async function saveGraphMLFile(state) {
const { userAgent } = navigator;
if (userAgent.match(/firefox|fxios/i)) {
getGraphFun(state).saveToDisk();
return;
}
const pickerOpts = {
types: [
{
description: 'Graphml',
accept: {
'text/graphml': ['.graphml'],
},
},
],
excludeAcceptAllOption: true,
multiple: false,
};
if (state.curGraphInstance) {
const graph = state.graphs[state.curGraphIndex];
if (!graph.fileHandle) {
const fileHandle = await window.showSaveFilePicker(pickerOpts);
graph.fileHandle = fileHandle;
}
try {
const stream = await graph.fileHandle.createWritable();
await stream.write(getGraphFun(state).saveToFolder());
await stream.close();
} catch (error) {
// eslint-disable-next-line no-alert
alert('Switch to Edge/Chrome!');
}
} else {
// eslint-disable-next-line no-alert
alert('Switch to Edge/Chrome!');
}
}

Where we check if there is filehandle defined or not, And It also works as I have mentioned it in my previous PR

[Rahuljagwani]

const fileHandle = await window.showSaveFilePicker(pickerOpts);

This line you mentioned in code will open Save file dialog and user will have to again save an already save file as filehandle vanishes after page reload. It will be inconvinient for user.
@parteekcoder

[pradeeban]

@parteekcoder and I thought similarly on this.

But I agree with @Rahuljagwani. It is an inconvenience for the user to ask to save again.

Just throwing a warning and making users aware that the "Refresh" is a dangerous reset feature will be sufficient. Right now, a mistake click on Refresh may make you lose your unsaved changes.

[parteekcoder]

hey @pradeeban @Rahuljagwani , I want to tell you about the user experience . We have used so many alerts in the concore-editor.

The file succesfully saved alert is annoying to user as he/she has to click ok to remove popup , It degrades user experience

Here my suggestion is to remove that popup of file succesfully saved with a flash message or something like that e.g

If @pradeeban @Rahuljagwani you liked my idea I will create a PR for this.

[pradeeban]

The success message fades on its own soon, without user action, say, in 3 seconds? That will be neat.
@Rahuljagwani what do you think?

[Rahuljagwani]

Yes, it will be great to implement this.
I was thinking of using Toasts but this is also good.

[parteekcoder]

So @pradeeban will I create a PR for this

[pradeeban]

Sure! Go ahead. Please show the same text (Whatever that is displayed now) in your flash message. (Don't change the alert content).