map ux tweaks 2

[ForeverYoung1208]

1. Investigate and fix fluctuating bug after map loading process, appears sometimes - when map is declared as loaded by the system but after refreshing the page it disappears. (Looks like process of the map loading not finishes ans rolls back).
2. Sort map list alphabetically.
3. After the synchronization, the Map Translator page needs to be reloaded to show all maps. Fix it to show all maps without refresh.
4. try to fix SVG image position and scale after upload.

[ForeverYoung1208]

1. Knowledge gained of many hours of debugging and figuring out why map uploading fails randomly. IMO it is not trivial, so maybe, i'll save a couple of hours for somebody. So.
   getDataSource method at data-source.ts

const getDataSource = (opts: SqljsConnectionOptions) => async () => {
  await initialize();
  const ds = new DataSource(opts);
  setInterval(() => {
    (ds.driver as SqljsDriver).save();
  }, 10000);

  return ds;
};

had really speed up our DB operations but as a price we have all changes to the db persisted exactly after 10 seconds timeout after data source init.
So if the user closes tab/navigates to other page before 10secs, we may have weird situation when sql query is fulfilled, even we get its results as generated entities/ids/etc. BUT only in memory, no data really persisted to the localStorage yet, so the next call to query this 'like-saved-data' fails (even not fails, just returns empty set).

Such an errors really hard to debug, so be aware.

To avoid, i think it is sufficient to place call await singletons.driver.save() when you want data to be really saved.

Ah, also i noticed that such a deferred persistance causes strange behaviour of the button 'clear site data' at the Google Chrome's devtools... - after cleaning, the data will apper again if you don't refresh page during 10s....

2.-3. Solved.

4. SVG positioning is already fine. But some svg files have their own inner trnsparent margins, so it is necessary to adjust svg files, not the layout of the map page.