@jbrowse/plugin-linear-genome-view 1.7.7 → 1.7.8

package/dist/BaseLinearDisplay/models/BaseLinearDisplayModel.js

@@ -693,8 +693,6 @@ var BaseLinearDisplay = _mobxStateTree.types.compose('BaseLinearDisplay', _model
                   // version, or just get the default if none available
 
 
-                  // regionCannotBeRendered can return jsx so look for plaintext
-                  // version, or just get the default if none available
                   var cannotBeRenderedReason = self.regionCannotBeRenderedText(block) || self.regionCannotBeRendered(block);
 
                   if (cannotBeRenderedReason) {

package/dist/LinearGenomeView/components/ImportForm.js

@@ -70,35 +70,35 @@ var ImportForm = (0, _mobxReact.observer)(function (_ref) {
       textSearchManager = session.textSearchManager;
   var rankSearchResults = model.rankSearchResults,
       isSearchDialogDisplayed = model.isSearchDialogDisplayed,
-      modelError = model.error;
+      error = model.error;
 
   var _useState = (0, _react.useState)(assemblyNames[0]),
       _useState2 = (0, _slicedToArray2.default)(_useState, 2),
       selectedAsm = _useState2[0],
       setSelectedAsm = _useState2[1];
 
-  var _useState3 = (0, _react.useState)(modelError),
+  var _useState3 = (0, _react.useState)(error),
       _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
-      error = _useState4[0],
-      setError = _useState4[1];
+      importError = _useState4[0],
+      setImportError = _useState4[1];
 
   var searchScope = model.searchScope(selectedAsm);
   var assembly = assemblyManager.get(selectedAsm);
   var assemblyError = assemblyNames.length ? assembly === null || assembly === void 0 ? void 0 : assembly.error : 'No configured assemblies';
   var regions = (assembly === null || assembly === void 0 ? void 0 : assembly.regions) || [];
-  var err = assemblyError || error;
+  var err = assemblyError || importError;
 
-  var _useState5 = (0, _react.useState)(),
+  var _useState5 = (0, _react.useState)(''),
       _useState6 = (0, _slicedToArray2.default)(_useState5, 2),
-      myOption = _useState6[0],
-      setOption = _useState6[1]; // use this instead of useState initializer because the useState initializer
-  // won't update in response to an observable
+      myVal = _useState6[0],
+      setValue = _useState6[1];
 
+  var value = myVal || ((_regions$ = regions[0]) === null || _regions$ === void 0 ? void 0 : _regions$.refName); // use this instead of useState initializer because the useState initializer
+  // won't update in response to an observable
 
-  var option = myOption || new _BaseResults.default({
-    label: (_regions$ = regions[0]) === null || _regions$ === void 0 ? void 0 : _regions$.refName
+  var option = new _BaseResults.default({
+    label: value
   });
-  var selectedRegion = option === null || option === void 0 ? void 0 : option.getLocation();
 
   function fetchResults(_x, _x2) {
     return _fetchResults.apply(this, arguments);
@@ -155,7 +155,7 @@ var ImportForm = (0, _mobxReact.observer)(function (_ref) {
 
   function _handleSelectedRegion() {
     _handleSelectedRegion = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee2(input) {
-      var trackId, location, _assembly$allRefNames2, results;
+      var trackId, location, _location$split, _location$split2, ref, rest, allRefs, results;
 
       return _regenerator.default.wrap(function _callee2$(_context2) {
         while (1) {
@@ -171,61 +171,63 @@ var ImportForm = (0, _mobxReact.observer)(function (_ref) {
             case 2:
               trackId = option.getTrackId();
               location = input || option.getLocation() || '';
-              _context2.prev = 4;
+              _location$split = location.split(':'), _location$split2 = (0, _slicedToArray2.default)(_location$split, 2), ref = _location$split2[0], rest = _location$split2[1];
+              allRefs = (assembly === null || assembly === void 0 ? void 0 : assembly.allRefNames) || [];
+              _context2.prev = 6;
 
-              if (!(assembly !== null && assembly !== void 0 && (_assembly$allRefNames2 = assembly.allRefNames) !== null && _assembly$allRefNames2 !== void 0 && _assembly$allRefNames2.includes(location))) {
-                _context2.next = 9;
+              if (!(allRefs.includes(location) || allRefs.includes(ref) && rest !== undefined && !Number.isNaN(parseInt(rest, 10)))) {
+                _context2.next = 11;
                 break;
               }
 
               model.navToLocString(location, selectedAsm);
-              _context2.next = 20;
+              _context2.next = 22;
               break;
 
-            case 9:
-              _context2.next = 11;
+            case 11:
+              _context2.next = 13;
               return fetchResults(input, 'exact');
 
-            case 11:
+            case 13:
               results = _context2.sent;
 
-              if (!(results && results.length > 1)) {
-                _context2.next = 17;
+              if (!(results.length > 1)) {
+                _context2.next = 19;
                 break;
               }
 
               model.setSearchResults(results, input.toLowerCase());
               return _context2.abrupt("return");
 
-            case 17:
-              if ((results === null || results === void 0 ? void 0 : results.length) === 1) {
+            case 19:
+              if (results.length === 1) {
                 location = results[0].getLocation();
                 trackId = results[0].getTrackId();
               }
 
-            case 18:
+            case 20:
               model.navToLocString(location, selectedAsm);
 
               if (trackId) {
                 model.showTrack(trackId);
               }
 
-            case 20:
-              _context2.next = 26;
+            case 22:
+              _context2.next = 28;
               break;
 
-            case 22:
-              _context2.prev = 22;
-              _context2.t0 = _context2["catch"](4);
+            case 24:
+              _context2.prev = 24;
+              _context2.t0 = _context2["catch"](6);
               console.error(_context2.t0);
               session.notify("".concat(_context2.t0), 'warning');
 
-            case 26:
+            case 28:
             case "end":
               return _context2.stop();
           }
         }
-      }, _callee2, null, [[4, 22]]);
+      }, _callee2, null, [[6, 24]]);
     }));
     return _handleSelectedRegion.apply(this, arguments);
   }
@@ -241,7 +243,12 @@ var ImportForm = (0, _mobxReact.observer)(function (_ref) {
     className: classes.importFormContainer
   }, /*#__PURE__*/_react.default.createElement("form", {
     onSubmit: function onSubmit(event) {
-      return event.preventDefault();
+      event.preventDefault();
+      model.setError(undefined);
+
+      if (value) {
+        handleSelectedRegion(value);
+      }
     }
   }, /*#__PURE__*/_react.default.createElement(_core.Grid, {
     container: true,
@@ -252,7 +259,7 @@ var ImportForm = (0, _mobxReact.observer)(function (_ref) {
     item: true
   }, /*#__PURE__*/_react.default.createElement(_AssemblySelector.default, {
     onChange: function onChange(val) {
-      setError(undefined);
+      setImportError('');
       setSelectedAsm(val);
     },
     session: session,
@@ -268,15 +275,15 @@ var ImportForm = (0, _mobxReact.observer)(function (_ref) {
     style: {
       color: 'red'
     }
-  }) : selectedRegion ? /*#__PURE__*/_react.default.createElement(_RefNameAutocomplete.default, {
+  }) : value ? /*#__PURE__*/_react.default.createElement(_RefNameAutocomplete.default, {
     fetchResults: fetchResults,
     model: model,
     assemblyName: assemblyError ? undefined : selectedAsm,
-    value: selectedRegion // note: minWidth 270 accomodates full width of helperText
+    value: value // note: minWidth 270 accomodates full width of helperText
     ,
     minWidth: 270,
-    onSelect: function onSelect(option) {
-      return setOption(option);
+    onChange: function onChange(str) {
+      return setValue(str);
     },
     TextFieldProps: {
       variant: 'outlined',
@@ -298,19 +305,12 @@ var ImportForm = (0, _mobxReact.observer)(function (_ref) {
     item: true
   }, /*#__PURE__*/_react.default.createElement(_core.Button, {
     type: "submit",
-    disabled: !selectedRegion,
+    disabled: !value,
     className: classes.button,
-    onClick: function onClick() {
-      model.setError(undefined);
-
-      if (selectedRegion) {
-        handleSelectedRegion(selectedRegion);
-      }
-    },
     variant: "contained",
     color: "primary"
   }, "Open"), /*#__PURE__*/_react.default.createElement(_core.Button, {
-    disabled: !selectedRegion,
+    disabled: !value,
     className: classes.button,
     onClick: function onClick() {
       model.setError(undefined);

package/dist/LinearGenomeView/components/RefNameAutocomplete.d.ts

@@ -6,9 +6,10 @@ export interface Option {
     group?: string;
     result: BaseResult;
 }
-declare function RefNameAutocomplete({ model, showHelp, onSelect, assemblyName, style, fetchResults, value, minWidth, TextFieldProps, }: {
+declare function RefNameAutocomplete({ model, onSelect, assemblyName, style, fetchResults, onChange, value, showHelp, minWidth, TextFieldProps, }: {
     model: LinearGenomeViewModel;
-    onSelect: (region: BaseResult) => void;
+    onSelect?: (region: BaseResult) => void;
+    onChange?: (val: string) => void;
     assemblyName?: string;
     value?: string;
     fetchResults: (query: string) => Promise<BaseResult[]>;

package/dist/LinearGenomeView/components/RefNameAutocomplete.js

@@ -80,13 +80,14 @@ var MyPopper = function MyPopper(props) {
 
 function RefNameAutocomplete(_ref) {
   var model = _ref.model,
-      _ref$showHelp = _ref.showHelp,
-      showHelp = _ref$showHelp === void 0 ? true : _ref$showHelp,
       onSelect = _ref.onSelect,
       assemblyName = _ref.assemblyName,
       style = _ref.style,
       fetchResults = _ref.fetchResults,
+      onChange = _ref.onChange,
       value = _ref.value,
+      _ref$showHelp = _ref.showHelp,
+      showHelp = _ref$showHelp === void 0 ? true : _ref$showHelp,
       _ref$minWidth = _ref.minWidth,
       minWidth = _ref$minWidth === void 0 ? 200 : _ref$minWidth,
       _ref$TextFieldProps = _ref.TextFieldProps,
@@ -223,7 +224,8 @@ function RefNameAutocomplete(_ref) {
     loading: !loaded,
     inputValue: inputValue,
     onInputChange: function onInputChange(event, newInputValue) {
-      return setInputValue(newInputValue);
+      setInputValue(newInputValue);
+      onChange === null || onChange === void 0 ? void 0 : onChange(newInputValue);
     },
     loadingText: "loading results",
     open: open,
@@ -246,11 +248,11 @@ function RefNameAutocomplete(_ref) {
 
       if (typeof selectedOption === 'string') {
         // handles string inputs on keyPress enter
-        onSelect(new _BaseResults.default({
+        onSelect === null || onSelect === void 0 ? void 0 : onSelect(new _BaseResults.default({
           label: selectedOption
         }));
       } else {
-        onSelect(selectedOption.result);
+        onSelect === null || onSelect === void 0 ? void 0 : onSelect(selectedOption.result);
       }
 
       setInputValue(inputBoxVal);

package/dist/LinearGenomeView/components/ScaleBar.d.ts

@@ -130,7 +130,7 @@ declare const _default: React.ForwardRefExoticComponent<{
         moveTrack(movingTrackId: string, targetTrackId: string): void;
         closeView(): void;
         toggleTrack(trackId: string): void;
-        setTrackLabels(setting: "overlapping" | "offset" | "hidden"): void;
+        setTrackLabels(setting: "offset" | "hidden" | "overlapping"): void;
         toggleCenterLine(): void;
         setDisplayedRegions(regions: import("@jbrowse/core/util").Region[]): void;
         activateTrackSelector(): import("@jbrowse/core/util").Widget;
@@ -327,7 +327,7 @@ declare const _default: React.ForwardRefExoticComponent<{
         moveTrack(movingTrackId: string, targetTrackId: string): void;
         closeView(): void;
         toggleTrack(trackId: string): void;
-        setTrackLabels(setting: "overlapping" | "offset" | "hidden"): void;
+        setTrackLabels(setting: "offset" | "hidden" | "overlapping"): void;
         toggleCenterLine(): void;
         setDisplayedRegions(regions: import("@jbrowse/core/util").Region[]): void;
         activateTrackSelector(): import("@jbrowse/core/util").Widget;

package/dist/LinearGenomeView/components/SearchBox.js

@@ -9,6 +9,8 @@ exports.default = void 0;
 
 var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
 
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+
 var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
 
 var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
@@ -54,7 +56,12 @@ function SearchBox(_ref) {
 
   function fetchResults(_x, _x2) {
     return _fetchResults.apply(this, arguments);
-  }
+  } // gets a string as input, or use stored option results from previous query,
+  // then re-query and
+  // 1) if it has multiple results: pop a dialog
+  // 2) if it's a single result navigate to it
+  // 3) else assume it's a locstring and navigate to it
+
 
   function _fetchResults() {
     _fetchResults = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee(query, searchType) {
@@ -104,7 +111,7 @@ function SearchBox(_ref) {
 
   function _handleSelectedRegion() {
     _handleSelectedRegion = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee2(option) {
-      var trackId, location, label, _assembly$allRefNames2, results;
+      var trackId, location, label, _location$split, _location$split2, ref, rest, allRefs, results;
 
       return _regenerator.default.wrap(function _callee2$(_context2) {
         while (1) {
@@ -113,61 +120,63 @@ function SearchBox(_ref) {
               trackId = option.getTrackId();
               location = option.getLocation();
               label = option.getLabel();
-              _context2.prev = 3;
+              _location$split = location.split(':'), _location$split2 = (0, _slicedToArray2.default)(_location$split, 2), ref = _location$split2[0], rest = _location$split2[1];
+              allRefs = (assembly === null || assembly === void 0 ? void 0 : assembly.allRefNames) || [];
+              _context2.prev = 5;
 
-              if (!(assembly !== null && assembly !== void 0 && (_assembly$allRefNames2 = assembly.allRefNames) !== null && _assembly$allRefNames2 !== void 0 && _assembly$allRefNames2.includes(location))) {
-                _context2.next = 8;
+              if (!(allRefs.includes(location) || allRefs.includes(ref) && rest !== undefined && !Number.isNaN(parseInt(rest, 10)))) {
+                _context2.next = 10;
                 break;
               }
 
-              model.navToLocString(location);
-              _context2.next = 19;
+              model.navToLocString(location, assemblyName);
+              _context2.next = 21;
               break;
 
-            case 8:
-              _context2.next = 10;
+            case 10:
+              _context2.next = 12;
               return fetchResults(label, 'exact');
 
-            case 10:
+            case 12:
               results = _context2.sent;
 
-              if (!(results && results.length > 1)) {
-                _context2.next = 16;
+              if (!(results.length > 1)) {
+                _context2.next = 18;
                 break;
               }
 
               model.setSearchResults(results, label.toLowerCase());
               return _context2.abrupt("return");
 
-            case 16:
-              if ((results === null || results === void 0 ? void 0 : results.length) === 1) {
+            case 18:
+              if (results.length === 1) {
                 location = results[0].getLocation();
                 trackId = results[0].getTrackId();
               }
 
-            case 17:
+            case 19:
               model.navToLocString(location, assemblyName);
 
               if (trackId) {
                 model.showTrack(trackId);
               }
 
-            case 19:
-              _context2.next = 25;
+            case 21:
+              _context2.next = 27;
               break;
 
-            case 21:
-              _context2.prev = 21;
-              _context2.t0 = _context2["catch"](3);
+            case 23:
+              _context2.prev = 23;
+              _context2.t0 = _context2["catch"](5);
               console.error(_context2.t0);
               session.notify("".concat(_context2.t0), 'warning');
 
-            case 25:
+            case 27:
             case "end":
               return _context2.stop();
           }
         }
-      }, _callee2, null, [[3, 21]]);
+      }, _callee2, null, [[5, 23]]);
     }));
     return _handleSelectedRegion.apply(this, arguments);
   }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jbrowse/plugin-linear-genome-view",
-  "version": "1.7.7",
+  "version": "1.7.8",
   "description": "JBrowse 2 linear genome view",
   "keywords": [
     "jbrowse",
@@ -57,5 +57,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "2c26e04ae942c380bf2f5b79ef7a49cc32b7bfed"
+  "gitHead": "b429fa2bb5734fc8a5380988f6dfdd3f7a41a39f"
 }

package/src/LinearGenomeView/components/ImportForm.tsx

@@ -37,13 +37,9 @@ const ImportForm = observer(({ model }: { model: LGV }) => {
   const classes = useStyles()
   const session = getSession(model)
   const { assemblyNames, assemblyManager, textSearchManager } = session
-  const {
-    rankSearchResults,
-    isSearchDialogDisplayed,
-    error: modelError,
-  } = model
+  const { rankSearchResults, isSearchDialogDisplayed, error } = model
   const [selectedAsm, setSelectedAsm] = useState(assemblyNames[0])
-  const [error, setError] = useState<typeof modelError | undefined>(modelError)
+  const [importError, setImportError] = useState(error)
   const searchScope = model.searchScope(selectedAsm)
 
   const assembly = assemblyManager.get(selectedAsm)
@@ -51,19 +47,15 @@ const ImportForm = observer(({ model }: { model: LGV }) => {
     ? assembly?.error
     : 'No configured assemblies'
   const regions = assembly?.regions || []
-  const err = assemblyError || error
-
-  const [myOption, setOption] = useState<BaseResult>()
+  const err = assemblyError || importError
+  const [myVal, setValue] = useState('')
+  const value = myVal || regions[0]?.refName
 
   // use this instead of useState initializer because the useState initializer
   // won't update in response to an observable
-  const option =
-    myOption ||
-    new BaseResult({
-      label: regions[0]?.refName,
-    })
-
-  const selectedRegion = option?.getLocation()
+  const option = new BaseResult({
+    label: value,
+  })
 
   async function fetchResults(query: string, searchType?: SearchType) {
     if (!textSearchManager) {
@@ -98,15 +90,26 @@ const ImportForm = observer(({ model }: { model: LGV }) => {
     }
     let trackId = option.getTrackId()
     let location = input || option.getLocation() || ''
+    const [ref, rest] = location.split(':')
+    const allRefs = assembly?.allRefNames || []
     try {
-      if (assembly?.allRefNames?.includes(location)) {
+      // instead of querying text-index, first:
+      // - check if input matches a refname directly
+      // - or looks like locstring
+      // then just navigate as if it were a locstring
+      if (
+        allRefs.includes(location) ||
+        (allRefs.includes(ref) &&
+          rest !== undefined &&
+          !Number.isNaN(parseInt(rest, 10)))
+      ) {
         model.navToLocString(location, selectedAsm)
       } else {
         const results = await fetchResults(input, 'exact')
-        if (results && results.length > 1) {
+        if (results.length > 1) {
           model.setSearchResults(results, input.toLowerCase())
           return
-        } else if (results?.length === 1) {
+        } else if (results.length === 1) {
           location = results[0].getLocation()
           trackId = results[0].getTrackId()
         }
@@ -130,7 +133,15 @@ const ImportForm = observer(({ model }: { model: LGV }) => {
     <div className={classes.container}>
       {err ? <ErrorMessage error={err} /> : null}
       <Container className={classes.importFormContainer}>
-        <form onSubmit={event => event.preventDefault()}>
+        <form
+          onSubmit={event => {
+            event.preventDefault()
+            model.setError(undefined)
+            if (value) {
+              handleSelectedRegion(value)
+            }
+          }}
+        >
           <Grid
             container
             spacing={1}
@@ -140,7 +151,7 @@ const ImportForm = observer(({ model }: { model: LGV }) => {
             <Grid item>
               <AssemblySelector
                 onChange={val => {
-                  setError(undefined)
+                  setImportError('')
                   setSelectedAsm(val)
                 }}
                 session={session}
@@ -152,15 +163,15 @@ const ImportForm = observer(({ model }: { model: LGV }) => {
               {selectedAsm ? (
                 err ? (
                   <CloseIcon style={{ color: 'red' }} />
-                ) : selectedRegion ? (
+                ) : value ? (
                   <RefNameAutocomplete
                     fetchResults={fetchResults}
                     model={model}
                     assemblyName={assemblyError ? undefined : selectedAsm}
-                    value={selectedRegion}
+                    value={value}
                     // note: minWidth 270 accomodates full width of helperText
                     minWidth={270}
-                    onSelect={option => setOption(option)}
+                    onChange={str => setValue(str)}
                     TextFieldProps={{
                       variant: 'outlined',
                       helperText:
@@ -181,21 +192,15 @@ const ImportForm = observer(({ model }: { model: LGV }) => {
             <Grid item>
               <Button
                 type="submit"
-                disabled={!selectedRegion}
+                disabled={!value}
                 className={classes.button}
-                onClick={() => {
-                  model.setError(undefined)
-                  if (selectedRegion) {
-                    handleSelectedRegion(selectedRegion)
-                  }
-                }}
                 variant="contained"
                 color="primary"
               >
                 Open
               </Button>
               <Button
-                disabled={!selectedRegion}
+                disabled={!value}
                 className={classes.button}
                 onClick={() => {
                   model.setError(undefined)

package/src/LinearGenomeView/components/RefNameAutocomplete.tsx

@@ -66,17 +66,19 @@ const MyPopper = function (
 
 function RefNameAutocomplete({
   model,
-  showHelp = true,
   onSelect,
   assemblyName,
   style,
   fetchResults,
+  onChange,
   value,
+  showHelp = true,
   minWidth = 200,
   TextFieldProps = {},
 }: {
   model: LinearGenomeViewModel
-  onSelect: (region: BaseResult) => void
+  onSelect?: (region: BaseResult) => void
+  onChange?: (val: string) => void
   assemblyName?: string
   value?: string
   fetchResults: (query: string) => Promise<BaseResult[]>
@@ -171,7 +173,10 @@ function RefNameAutocomplete({
         value={inputBoxVal}
         loading={!loaded}
         inputValue={inputValue}
-        onInputChange={(event, newInputValue) => setInputValue(newInputValue)}
+        onInputChange={(event, newInputValue) => {
+          setInputValue(newInputValue)
+          onChange?.(newInputValue)
+        }}
         loadingText="loading results"
         open={open}
         onOpen={() => setOpen(true)}
@@ -190,9 +195,9 @@ function RefNameAutocomplete({
 
           if (typeof selectedOption === 'string') {
             // handles string inputs on keyPress enter
-            onSelect(new BaseResult({ label: selectedOption }))
+            onSelect?.(new BaseResult({ label: selectedOption }))
           } else {
-            onSelect(selectedOption.result)
+            onSelect?.(selectedOption.result)
           }
           setInputValue(inputBoxVal)
         }}

package/src/LinearGenomeView/components/SearchBox.tsx

@@ -58,19 +58,35 @@ function SearchBox({
     )
   }
 
+  // gets a string as input, or use stored option results from previous query,
+  // then re-query and
+  // 1) if it has multiple results: pop a dialog
+  // 2) if it's a single result navigate to it
+  // 3) else assume it's a locstring and navigate to it
   async function handleSelectedRegion(option: BaseResult) {
     let trackId = option.getTrackId()
     let location = option.getLocation()
     const label = option.getLabel()
+    const [ref, rest] = location.split(':')
+    const allRefs = assembly?.allRefNames || []
     try {
-      if (assembly?.allRefNames?.includes(location)) {
-        model.navToLocString(location)
+      // instead of querying text-index, first:
+      // - check if input matches a refName directly
+      // - or looks like locString
+      // then just navigate as if it were a locString
+      if (
+        allRefs.includes(location) ||
+        (allRefs.includes(ref) &&
+          rest !== undefined &&
+          !Number.isNaN(parseInt(rest, 10)))
+      ) {
+        model.navToLocString(location, assemblyName)
       } else {
         const results = await fetchResults(label, 'exact')
-        if (results && results.length > 1) {
+        if (results.length > 1) {
           model.setSearchResults(results, label.toLowerCase())
           return
-        } else if (results?.length === 1) {
+        } else if (results.length === 1) {
           location = results[0].getLocation()
           trackId = results[0].getTrackId()
         }